Azure Static Web Appsを使用して静的サイトを初めて構築する

この記事の内容

Azure Static Web Appsは、静的なWebサイトをホスティングするためのAzureサービスです。GitHubリポジトリと直接連携し、コードをコミット・プッシュするたびにGitHub Actionsが自動的に実行されてビルド・デプロイが行われます。

Azureにはサービスが非常に多く、触ったことがないものもたくさんあります。クイックスタートをやってみることで、実際に手を動かして理解を深めるのが効果的です。本記事では、そのクイックスタートの内容をもとに、Azure Static Web Appsで静的サイトを構築する流れを解説します。

以下のものが必要です。

拡張機能はまだインストールされていない場合、VS Codeの拡張機能マーケットプレイスから「Azure Static Web Apps」を検索してインストールします。

まず、デプロイするコードを管理するGitHubリポジトリを作成します。

今回はフレームワークなし（プリセット：なし）で進めます。リポジトリはプライベートで作成しました。作成後、リポジトリには index.html などの基本的なファイルが含まれています。

作成したリポジトリをローカルにクローンし、該当フォルダに移動します。

git clone <リポジトリURL>
cd <リポジトリ名>

続いてVisual Studio Codeでフォルダを開きます。

code .

VS CodeにAzure Static Web Apps拡張機能をインストールすると、サイドバーにAzureパネルが表示されます。

続いて以下の情報を入力・選択します。

設定が完了すると「Successfully created」と表示され、リソースの作成が成功します。

リソースを作成すると、GitHubリポジトリにGitHub Actionsのワークフローファイルが自動的に追加されます。これはAzure Static Web Apps拡張機能が自動で構成してくれるため、手動での設定は不要です。

ワークフローが実行されると、VS Codeのアクションパネルにビルドとデプロイの状況がリアルタイムで表示されます。ビルドが完了すると、デプロイも自動的に行われます。

デプロイが完了したら、作成されたサイトにアクセスします。VS Codeの拡張機能から「Browse Site」をクリックするか、Azureポータルから確認します。

割り当てられるURLは以下のような形式です。

このURLにアクセスすると、作成した静的サイトが表示されます。

Azure Static Web Appsの便利なところは、コードを変更してプッシュするだけで自動的にサイトが更新される点です。

index.html などのファイルを編集してコミット・プッシュします。

git add .
git commit -m "Update index.html"
git push

プッシュ後、GitHub Actionsが自動的に起動し、新しいビルドとデプロイジョブが走ります。完了後にサイトを確認すると、変更内容が反映されています。人間が何かをするのではなく、コンピューターが自動的に動いてくれるこのワークフローは非常にスマートです。

Azureポータルでリソースを確認すると、以下のような情報が確認できます。

今回はAzure Static Web Appsのクイックスタートとして、静的サイトの初回構築を行いました。

次のステップとして、APIの追加（Azure Functions連携）なども可能です。静的サイトのホスティングをお手軽に始めたい方にとって、Azure Static Web Appsは非常に入門しやすいサービスです。