Azure Static Web Apps (PREVIEW) でWebアプリをデプロイする

2 min read読了の目安(約2500字

昨年末に遊んだテキストの感情分析(ネガポジ判定)を呼ぶだけのWEBアプリを、Azure Static Web Appsを使ってデプロイしてみました。

↓前回のテキストの感情分析(ネガポジ判定)の記事はこちら↓

https://zenn.dev/ibaraki/articles/461543bf8351a5

作ったもの

  • https://calm-bay-09fad7000.azurestaticapps.net/
  • 私のAzureの課金とか無料枠の枯渇が怖いので、googleでのログインを必須にしています
    • googleでログインさえすれば誰にでも使えるザルセキュリティです
    • この認証の仕組みはAzure Static Web Appsの機能で簡単につけられます
  • inputにテキストを入力するとAzureのText Analyticsをかけた結果のjsonをoutputに表示します

作り方を雑に解説

Azure Static Web Apps (PREVIEW) のリソースを作る

GitHubのリポジトリを準備

Azure Static Web Appsは、GitHubと連携して自動でAzure上にWebアプリをデプロイしてくれすサービスです。ですので、まずはGitHubのリポジトリを作ります。
自力で1から環境構築しても良いですが、Azureがテンプレートを用意しているので今回はそれをベースに作りました。
実際には試すときは公式のドキュメントを読むのがよいです。

https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-api/

ということで、作りました。

https://github.com/k-ibaraki/judgement-nega-poji

コンソールからAzure Static Web Appsを作る

VSCodeからでも作れるみたいですが、コンソールから作りました。
githubのリポジトリ指定が必須なので、先にgithubリポジトリを作っておく必要があります。

リソースを作るときにGitHub Actionsの設定も作られます。
うまく行けば自動でdeployされます。

APIを作る

リポジトリ直下にapiディレクトリ(リソース作成時に指定したディレクトリ)を作ることで、その配下にapiを設置できます。
このあたりは解説がほとんどないですが、要するにAzure FunctionsですのでAzure Functionsを知っていればなんとかなると思います。

APIの環境変数設定

設定->構成で、APIの環境変数が設定できます。
今回の場合だと、Text Analyticsのキーはセキュリティ上ソースに埋め込むわけにはいかないのでここで設定しました。
もう一つAPPINSIGHTS_INSTRUMENTATIONKEYを設定してます。これは次項で説明します。

APIのログの設定

Azure Static Web Appsでは、デフォルトではAPIのログが見れません。
さすがに糞すぎませんか?
ログを見るには、Application Insightsのリソースを自分で作ります。
作ったらインストルメンテーションキーをコピーして、これを前項で出てきたAPPINSIGHTS_INSTRUMENTATIONKEYに設定します。
これでApplication InsightsでAPIのログが見れます。

認証認可の設定をする

無尽蔵に使われるのは怖いので、googleでの認証を必須にしました。
public/routes.jsonにいい感じに設定を書けば、認証・認可の設定が入れられます。
今回はこんな感じで書いています。
詳しく知りたい方は、公式マニュアルを読みましょう。

https://docs.microsoft.com/ja-jp/azure/static-web-apps/authentication-authorization

さいごに

Azure Static Web Appsは、githubと連携してくれるのでdeployがとても楽です。
特にプルリク出したときにstaging環境を自動で作ってくれるのがいいですね。今回の記事にこの説明入れていないですが。
一方でプレビューだけあって、機能がまだ十分ではない印象です。特にAPI周りはほとんど情報も機能も物足りないです。
とりあえず開発時に使うのには便利ですけど、まだ本番運用に使うには辛いかなーという印象です。

あとは、Azureへのこだわりが無ければ、AWSのAmplifyで良くないか?とも思います。