🍣

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

2021/01/02に公開

GitHub

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

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

作ったもの

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がテンプレートを用意しているので今回はそれをベースに作りました。
実際には試すときは公式のドキュメントを読むのがよいです。

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

コンソールから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にいい感じに設定を書けば、認証・認可の設定が入れられます。
今回はこんな感じで書いています。
詳しく知りたい方は、公式マニュアルを読みましょう。

さいごに

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

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