この記事には何が書いてある？
Azure Static Web Apps に新しく追加された、パスワードによるアクセス制御機能を試してみた結果と設定手順。
背景
Azure Static Web Apps の Public Preview 機能として、パスワードによるアクセス制限機能が公開されました！
この機能が公開される以前には、Azure Static Web Apps にアクセス制御を実装しようとした場合、認証プロバイダーを利用しなければならず、よく Web 業界や広告業界で行われているような、単純なパスワードを用いたテスト用のサイトへのアクセス制限の実装が難しいという課題がありました。
今回、遂にこの課題をクリアできるような、単純なパスワード保護機能が（いまのところ Public Preview ですが）リリースされたので、試してみました。
手順
Static Web App のデプロイ
- まずは、下準備として適当な HTML ファイルを GitHub に Push します
- これがサイトのひな型になります
- 作るが面倒でしたら、このテンプレートリポジトリをベースに自分のリポジトリにコピーで OK です
- Static Web App のデプロイ
- 先述のリポジトリの Readme.md にデプロイ手順が書いてありますので、その通りにデプロイしましょう
パスワードによるアクセス制御の構成
Static Web App のデプロイが完了したら、まずはサイトにアクセスしてみます。
Azure Portal から該当する Static Web App の「概要」を開き、URL から移動できます。
いまのところ、パスワードによるアクセス制限はかかっていないので、そのままアクセスできます。
さて、パスワード保護を設定していきましょう。Azure ポータルに戻りまして、左ペインの「構成」をクリックします。
そして、開いた画面の右ペインから「全般設定」のタブを探してそこをクリックします。
すると、非常にシンプルな画面が表示されます。
あとは画面に書いてある通りに作業を進めていけば OK です。
いまはパスワード保護が「無効」になっていますので、チェックボックスを切り替えることで、パスワード保護機能の有効化・無効化と、効果範囲の設定が可能です。今回は、本番環境もアクセス制御の対象にしたいと思いますので、「ステージングと運用の両方の環境を保護」にチェックします。そして、「訪問者のパスワード」のテキストボックスにパスワードを入力します。
パスワードのフォーマットに対する注意点！
なお、設定するパスワードは、8文字以上かつ、大文字、小文字、数字、記号を含むものにする必要があります。
この書式にあっていない場合、保存時に警告が表示され、設定が完了できませんのでご注意ください。
入力が完了したら、左上にある「保存」ボタンを押すことで、設定を完了できます。
アクセスを試みる
先ほどはアクセス出来た Static Web App でホストしているサイトに改めてアクセスすると、以下の画面が表示され、パスワードによる保護が働いていることが確認できます。
管理画面の方で設定したパスワードを、表示されているテキストボックスに入力して Submit を押すことで、サイトにアクセスすることが可能になります。
これでパスワードによる保護が有効化された Static Web App をデプロイできました！
まとめ
非常に簡単な手順で、Azure Static Web Apps にホストしたコンテンツをパスワード保護出来ることがわかりました。
是非この機能を活用いただき、様々な領域で Static Web Apps をご活用いただければ幸いです！
Tips
「ステージング環境のみを保護」の活用方法
Azure Static Web Apps では、コンテンツの保存先となっている GitHub のリポジトリに Pull Request が開かれると、それに対応して自動的にステージング環境を生成することが可能です。この機能をうまく活用し、本番環境は GitHub の main ブランチに、そして新しいアップデートは別のブランチで開発を進めて最終的に Pull Request を開いて main ブランチにマージするような運用を行うことで、本番環境と同様のステージング環境で一旦テストを行って、それから本番環境に反映をするようなワークフローを簡単に実施できます。
その場合、本番環境は外部公開する為にパスワード保護の対象外とし、ステージング環境のみをパスワード保護の対象とする必要がありますが、そういったワークフローを実装する際には「ステージング環境のみを保護」の機能をうまく活用いただくと良いでしょう。
GitHub でコンテンツを管理することで、FTP でのコンテンツのアップロードと比べて、複数人での開発におけるバージョン管理や競合の管理がしやすくなります。こういったメリットとあわせて、Static Web Apps のステージング機能とパスワードによる保護機能をうまく使っていただけたら良いと思います。