Azure Static Web Apps を使用して React で静的サイト構築

はじめに

Azure Static Web Apps は、フロントエンドアプリケーションを素早くデプロイできるサービスです。

本記事では、React を使用して静的サイトを構築し、Azure Static Web Apps にデプロイする手順を解説します。

1. Azure Static Web Apps とは？

✅ 主な特徴

• 簡単デプロイ: GitHub Actions を活用し、自動デプロイが可能
• 無料プランあり: 個人開発や小規模プロジェクト向けに無料で利用可能
• カスタムドメイン対応: 独自ドメインの設定が可能
• API サポート: Azure Functions と連携可能

Azure Static Web Apps は、GitHub リポジトリと連携してコードを変更するたびに自動的に更新されるのが特徴です。

2. 事前準備

以下の環境が必要です。

• Node.js (最新の LTS 版推奨)
• GitHub アカウント
• Azure アカウント（無料アカウント作成はこちら）

3. React アプリの作成

📌 手順 1: React プロジェクトを作成

ターミナルを開き、以下のコマンドを実行します。

npx create-react-app my-static-web-app
cd my-static-web-app
npm start

ローカルで http://localhost:3000/ にアクセスし、React アプリが動作することを確認してください。

📌 手順 2: GitHub リポジトリを作成し、コードをプッシュ

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/あなたのGitHubユーザー名/my-static-web-app.git
git push -u origin main

4. Azure Static Web Apps にデプロイ

📌 手順 1: Azure ポータルで Static Web Apps を作成

1. Azure ポータル にログイン
2. 「Static Web Apps」を検索し、「作成」をクリック
3. GitHub と連携 してリポジトリを選択
4. ビルドプリセット で “React” を選択
5. リソースを作成

📌 手順 2: GitHub Actions によるデプロイ

Azure Static Web Apps の作成時に GitHub Actions が自動設定されます。リポジトリに push するたびに自動デプロイされます。

📌 手順 3: 公開 URL で確認

Azure ポータルの Static Web Apps のページから、デプロイされた URL にアクセスし、React アプリが表示されることを確認してください。

5. まとめと応用

✅ ここまでの流れ

1. React アプリを作成
2. GitHub にプッシュ
3. Azure Static Web Apps でデプロイ
4. GitHub Actions による自動デプロイ

🚀 応用編

• カスタムドメイン設定 (公式ガイド)
• API 機能追加（Azure Functions を活用）
• CI/CD パイプラインのカスタマイズ

6. 参考資料

• Azure Static Web Apps 公式ドキュメント
• GitHub Actions 公式ドキュメント
• Azure 無料アカウントの作成

これで、React アプリを Azure Static Web Apps にデプロイする準備は完了です！🎉

さて、楽しみましょう！！