Skip to main content

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

継続的デプロイ (CD) ワークフローの一部として、Web アプリを Azure Static Web App にデプロイできます。

はじめに

このガイドでは、GitHub Actions を使用して、Web アプリをビルドし、Azure 静的 Web アプリにデプロイする方法について説明します。

Note

GitHub Actions ワークフローが OpenID Connect (OIDC) をサポートするクラウド プロバイダーのリソースにアクセスする必要がある場合、そのクラウド プロバイダーで直接認証されるようにワークフローを構成できます。 これにより、有効期間の長いシークレットとしてこれらの資格情報の格納を停止し、その他のセキュリティ上の利点を提供できます。 詳しくは、「OpenID Connect を使ったセキュリティ強化について」をご覧ください と「Azure での OpenID Connect の構成」。

前提条件

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@v4
        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 リポジトリを参照してください。