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/ で作成しました
ハンズオンの内容
本ハンズオンは、次のステップで実施します。
- STEP1 Azure Cosmos DBアカウント・コンテナー作成
- STEP2 Azure FunctionsでのAPI作成
- STEP3 Azure Blob Storageでの静的Webサイトホスティング
事前に準備が必要なもの
- ChromeやFirefox、Edgeなどのメジャーなモダンブラウザが動作するPCまたはMac
- 有効なAzureアカウントおよびサブスクリプション
注意点
- 作成するアプリは認証などを特に行わないため、あくまでも学習用教材として使用してください。
- Function App、Web画面用のソースコードは（ほぼ）完成済みのものを使用します。
- ハンズオンがすべて終わったらリソースを削除しましょう。特にCosmos DBは放っておくと多くの課金が発生してしまいます。
なにかおかしなところやわかりにくい部分があれば、コメントやプルリクいただければ対応しますのでお知らせください。