Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
26
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

【初心者向け】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
26
Help us understand the problem. What are the problem?