ひでぼ~blog

C#ときどきゲーム

Azure Static Web Appsのステージング機能を試す

ステージング機能が気になった&良さそうだったので試してみました。

そもそもステージング機能とは

Azure Static Web Appsを使ったWebアプリケーションは、GitHubリポジトリに変更があるとCI/CDが走って本番環境が更新されるようになっています。 例えばdevelopで開発した機能をmasterへマージして本番環境を更新するときなどがあると思います。 このとき、masterへプルリクが出されたタイミングで自動的にステージング環境が作成されて動作確認することができるという機能です。

developからmasterへプルリクを出してみる

さっそく適当なプロジェクトでプルリクを出してみました。 プルリク作成後の画面を見てみるといきなりビルド&デプロイのワークフローが走り出しました。

f:id:hideb3:20210929215638p:plain
プルリク作成後の画面

少し待つとデプロイが終わって、ステージング環境のURLが表示されました。

f:id:hideb3:20210930204045p:plain
デプロイ完了後の画面

URLに飛んでみるとプルリクの内容が反映されていることが確認できました。本番環境にはまだ反映されていません。

たくさんプルリクを出してみる

プルリクを出すたびに作られるステージング環境は上書きされていくのか確認するために何個もプルリクを出してみました。 自動で作られるステージング環境はプルリクごとにURLが違っていて、それぞれ独立したものになっていました。 Azure Portalから確認すると、たくさんステージング環境が作られていることが確認できます。

f:id:hideb3:20210930204535p:plain
Azure Portalの画面

プルリクをマージしてみる

プルリクをマージしたらステージング環境がどうなるのか試してみます。 マージ後のAzure Portalでのステージング一覧です。masterにマージしたdevelopのステージング環境だけ削除されています。

f:id:hideb3:20210930205039p:plain
developマージ後のステージング環境一覧

ちなみにプルリクをマージせずにクローズした場合もステージング環境は削除されました。

まとめ

ステージング機能、めちゃくちゃ便利な機能でした。プルリクをチェックするとき、コードレビューだけでなく実際に画面を見ながら確認できるのはすごい助かります。

参考

dev.classmethod.jp