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

Note

GitHub ホステッドランナーは、現在 GitHub Enterprise Server ではサポートされていません。 GitHub public roadmap で、今後の計画的なサポートの詳細を確認できます。

はじめに

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

Note

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

前提条件

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

デプロイソースの [Other](その他) オプションを使用して、Azure 静的 Web アプリを作成します。詳しくは、Azure ドキュメントのクイックスタート: Azure portal での初めての静的サイトの構築に関する記事をご覧ください。
静的 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によって認定されていないアクションを使用します。
# それらはサードパーティによって提供され、
# 別個の利用規約、プライバシーポリシー、
# ドキュメントを参照してください。

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

この記事の内容

はじめに

前提条件

ワークフローの作成

その他のリソース