Azure 静的 Web アプリへのデプロイ

継続的デプロイ (CD) ワークフローの一部として、Web アプリを Azure Static Web Apps にデプロイする方法について説明します。

この記事の内容

前提条件

GitHub Actionsワークフローを作成する前に、まず以下のセットアップのステップを完了しておかなければなりません。

  1. デプロイ ソースの [Other](その他) オプションを使用して、Azure 静的 Web アプリを作成します。 詳しくは、Azure ドキュメントのクイックスタート: Azure portal での初めての静的サイトの構築に関する記事をご覧ください。

  2. 静的 Web アプリのデプロイ トークンの値を使用して、AZURE_STATIC_WEB_APPS_API_TOKEN という名前のシークレットを作成します。 デプロイ トークンの検索方法について詳しくは、Azure ドキュメントの「Azure Static Web Apps のデプロイ トークンをリセットする」をご覧ください。

ワークフローの作成

必要な環境を整えたら、ワークフローの作成に進むことができます。

次のワークフローの例では、main ブランチへのプッシュがある場合、または main がターゲットとして設定されている pull request が開いているか、同期しているか、再び開いている場合に、Azure 静的 Web アプリをビルドして、デプロイする方法のデモを行います。 また、main がターゲットとして設定されている pull request が閉じている場合は、対応する実稼働前デプロイが、ワーフクローによって破棄されます。

ワークフロー env キーで、次の値を変更します。

  • APP_LOCATION をクライアント コードの場所に
  • API_LOCATION を API ソース コードの場所に。 API_LOCATION が関連していない場合は、変数およびそれが使用されている行を削除することができます。
  • OUTPUT_LOCATION をクライアント コードのビルド出力の場所に

これらの値について詳しくは、Azure ドキュメントの「Azure Static Web Apps のビルド構成」をご覧ください。

YAML
# このワークフローはGitHubによって認定されていないアクションを使用します。 # それらはサードパーティによって提供され、 # 別個の利用規約、プライバシーポリシー、 # ドキュメントを参照してください。 # GitHub では、コミット SHA にアクションをピン留めすることが推奨されます。 # 新しいバージョンを取得するには、SHA を更新する必要があります。 # タグまたはブランチを参照することもできますが、アクションは警告なしに変更される可能性があります。 name: Deploy web app to Azure Static Web Apps env: APP_LOCATION: "/" # location of your client code API_LOCATION: "api" # location of your api source code - optional OUTPUT_LOCATION: "build" # location of client code build output on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main permissions: issues: write contents: read pull-requests: write jobs: build_and_deploy: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Build and Deploy steps: - uses: actions/checkout@v5 with: submodules: true - name: Build And Deploy uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: ${{ env.APP_LOCATION }} api_location: ${{ env.API_LOCATION }} output_location: ${{ env.OUTPUT_LOCATION }} close_pull_request: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Close Pull Request steps: - name: Close Pull Request uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} action: "close"

参考資料

  • 元のワークフロー テンプレートについては、GitHub Actions starter-workflows リポジトリの azure-staticwebapp.yml を参照してください。
  • Web アプリのデプロイに使用されるアクションは、Azure の公式な Azure/static-web-apps-deploy アクションです。
  • Azure にデプロイする GitHub アクション ワークフローの例が他にも必要であれば、actions-workflow-samples リポジトリを参照してください。