前置き
2021 年 5 月に Static Web Apps が GA(一般公開) されました。
Azure でブログやコーポレートサイトをホスティングする際、今までは Blob Storage を利用していましたが、Static Web Apps が GA(一般公開) されたので、移行してみました。
What is Static Web Apps ?
Vue.js、React、Angular、Go などのフレームワークで開発されたアプリや JavaScript、TypeScript などで開発する SPA（Single Page Application) などのアプリケーションを GitHub や Azure DevOps のリポジトリから自動的にビルド & デプロイするサービスです。
機能や特徴は以下の通りです。
- 無償で Web アプリ、静的 Web サイト/コンテンツをホスティングできる
- グローバル配信(ユーザーに近いリージョンに配置)
- Azure Functions などのサーバーレス API の対応をサポート
- Azure AD、GitHub、Twitter 等の認証プロバイダーとの統合をサポート
- リポジトリの変更をトリガーとした、CI/CD が可能
- プレビューデプロイ機能（Pull Request したブランチも自動的にデプロイされ、どのように表示されるのかが確認できる）
- 無償でカスタムドメイン対応
- 無償で SSL 証明書の自動更新が可能
詳細は公式ドキュメント をご覧ください。
Static Web Apps の価格ですが、カスタム認証や、SLA が不要であれば基本的には無料枠で必要な機能の利用が可能になります。
※ 個人ブログは無料枠で、コーポレートサイトは SLA のために、有料にしています
移行にあたって行った作業のドキュメント
- Hugo サイトを Azure Static Web Apps に発行する
- Azure DevOps を使用して Azure Static Web Apps を継続的デプロイする
- Azure Static Web Apps で無料の証明書を使用してカスタム ドメインを設定する
移行前後の状況と比較
-
プロセス
- 移行前
- GitHub に Hugo のソースコードを push する
- Azure DevOps(Azure Pipelines) がコードの変更を検知して、静的 Web サイトを生成する(CI)
- Azure DevOps(Azure Pipelines) が生成された静的 Web サイトのファイルを Blob Storage にデプロイする(CD)
- Azure DevOps(Azure Pipelines) が Azure CDN のキャッシュをクリアする(CD)
- 移行後
- GitHub に Hugo のソースコードを push する
- Static Web Apps がコードの変更を検知して、デプロイする(CI & CD)
- 移行前
-
ビルド時間
- 移行前
- 10分前後
- 移行後
- 1分前後
- 移行前
となり、爆速になりました！
移行で気になった点
移行の際に、以下のドキュメントに従い、TXT レコードを使ったダウンタイムなしで移行を試したがうまくいきませんでした。
結局、TXT レコードの方法を諦めて、CNAME での切り替えを行いました。