Help us understand the problem. What is going on with this article?

【初心者向け】Azureでサーバーレスな簡易Webアプリケーションを作るハンズオン

Microsoft Azureで簡単なサーバーレスWebアプリケーションを作るハンズオンを作りました。

このハンズオンで学べること

初心者向けです。
このハンズオンでは、Azure Functionsで簡易REST APIを作り(プロキシ機能を利用)、Vue.jsベースで簡単に作ったページをBlob Storageの静的Webサイトホスティング機能で公開しAPIとつなぐことで手軽にWebアプリができることを体験できます。

Azure FunctionsとCosmos DBの連携(入出力バインド)

データストアはCosmos DBを使っており、Functionsとの連携の手軽さも体験できます。

Azure FunctionsはAzureにおけるFaaS(Function as a Service)ですが、Azureポータル上で手軽にコーディングできたり、豊富なトリガーと入出力バインドの機能でAzure内外の他サービスとの連携が簡単にできます。
このハンズオンではCosmos DBへのCRUDを、入出力バインドの機能を用いることで、面倒な設定や複雑なコーディングなしに直観的に簡単に行えることを体験します。

参考:Azure Functions 2.x の Azure Cosmos DB バインド

Blob Storageによる静的Webサイトの公開

Azure Blob Storageを使うと、驚くほど簡単に静的なWebサイトを公開することができます。
このハンズオンではHTMLとJavaScriptのファイルをストレージに配置し、Functionsで作ったREST APIにアクセスすることでサーバーレスなWebアプリケーションを作ることができます。

参考:Azure Storage での静的 Web サイト ホスティング

所要時間

だいたい1時間くらいでできるかと思います。

ハンズオンのありか

手順と使用するコードはGitHubに公開しています。

※↑の画像は https://ghlinkcard.com/ で作成しました

ハンズオンの内容

本ハンズオンは、次のステップで実施します。

事前に準備が必要なもの

  • ChromeやFirefox、Edgeなどのメジャーなモダンブラウザが動作するPCまたはMac
  • 有効なAzureアカウントおよびサブスクリプション

注意点

  • 作成するアプリは認証などを特に行わないため、あくまでも学習用教材として使用してください。
  • Function App、Web画面用のソースコードは(ほぼ)完成済みのものを使用します。
  • ハンズオンがすべて終わったらリソースを削除しましょう。特にCosmos DBは放っておくと多くの課金が発生してしまいます。

なにかおかしなところやわかりにくい部分があれば、コメントやプルリクいただければ対応しますのでお知らせください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした