Skip to main content

このバージョンの GitHub Enterprise はこの日付をもって終了となりました: 2023-01-18. 重大なセキュリティの問題に対してであっても、パッチリリースは作成されません。 パフォーマンスの向上、セキュリティの向上、新機能の向上を図るために、最新バージョンの GitHub Enterprise にアップグレードします。 アップグレードに関するヘルプについては、GitHub Enterprise サポートにお問い合わせく� さい

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

この記事では、次の� �目が扱われます。

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

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

はじめに

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

前提条件

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 が関連していない� �合は、変数およびそれが使用されている行を削除することができます。
  • APP_ARTIFACT_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
  APP_ARTIFACT_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

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@v2
        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 }}
          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}

  close:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close
    steps:
      - name: Close
        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 リポジトリを参照してく� さい。