Azure Static Web App を手間なくパスワードで保護できる。 リリース前のwebサイト校正などにとても重宝します。 変更が発生したら連携させている Github のレポジトリを更新するだけで Azure 側で設定した Static Web に反映できる。
構築手順を簡単にメモします。
たとえば myweb という名前のレポジトリを作成してそこに index.html を入れることを考える。 ローカルで、次のように作成。
$ mkdir myweb
$ cd myweb
$ touch index.html
index.html の内容を書く:
<html>
<body>
Hello, World!
</body>
</html>
Github にアクセスしてこれを管理するためのレポジトリを作成する。 あとは、そこへ push する。
$ git init
$ git add index.html
$ git commit -m "Add index.html"
$ git remote add origin ... なんとかかんとか
$ git push
あとは、適当に設定するだけです。 Azure と Github の連携設定がされていれば、今つくろうとしている Static Web App と連携する Github レポジトリのリストが提示されるので、 そこから選ぶだけです。（ここでは myweb を選択するだけ。） 種類を選ぶところで、HTML を選ぶ必要があります。 （Angular とかいろいろ Static Web 用のアプリ選択肢がある。その中で HTML を選択する。）
追加の設定として Deployment authorization policy を選ぶところがあります。 最初から選択されている development token を指定する。 ここで github という選択肢があるが、それは選ぶべきではない。 つまりデフォルトのままでいい、ということ。 （今回のケースにおいては。）
Static Web App 生成を行うと、連携した Github レポジトリに github workflow 設定を（勝手に Azure が）入れてきます。 したがって、このタイミングでローカルの該当ディレクトリで pull しておくべき。
$ git pull
自動的に Azure 側から Github の該当レポジトリ myweb へ github workflow が push された段階で、 Github 側で CI が動きます。 それが成功していれば、 すでにこれで最初に push しておいた index.html は、Azure 側で作成した Static Web App に反映されています。 Azure Portal で 割り当てられた URL にブラウザでアクセスして作動を確認しましょう。
たとえば index.html を変更する必要があれば変更して push すれば、 それで Github の CI が動いて自動的に Azure Static Web App に反映されます。
Azure Portal の該当の Static Web App にアクセスして、左サイドバーから:
これだけで、Static Web App をパスワードで保護できます。
パスワード保護のために、 Github のレポジトリで管理しているコード（今は index.html だけですが）の変更が不要なのがうれしい。
以上です。