{"meta":{"title":"Azure 静的 Web アプリへのデプロイ","intro":"継続的デプロイ (CD) ワークフローの一部として静的 Web アプリAzure Web アプリをデプロイする方法について説明します。","product":"GitHub Actions","breadcrumbs":[{"href":"/ja/actions","title":"GitHub Actions"},{"href":"/ja/actions/how-tos","title":"方法"},{"href":"/ja/actions/how-tos/deploy","title":"デプロイ"},{"href":"/ja/actions/how-tos/deploy/deploy-to-third-party-platforms","title":"サード パーティのプラットフォームへのデプロイ"},{"href":"/ja/actions/how-tos/deploy/deploy-to-third-party-platforms/azure-static-web-app","title":"Azure 静的 Web アプリ"}],"documentType":"article"},"body":"# Azure 静的 Web アプリへのデプロイ\n\n継続的デプロイ (CD) ワークフローの一部として静的 Web アプリAzure Web アプリをデプロイする方法について説明します。\n\n## 前提条件\n\nGitHub Actionsワークフローを作成する前に、まず以下のセットアップのステップを完了しておかなければなりません。\n\n1. デプロイ ソースの [その他] オプションを使用して、Azure静的 Web アプリを作成します。 詳細については、Azureドキュメントの「[Quickstart: Azure ポータルでの最初の静的サイトのビルド](https://docs.microsoft.com/azure/static-web-apps/get-started-portal)を参照してください。\n\n1. 静的 Web アプリのデプロイ トークンの値を使用して、`AZURE_STATIC_WEB_APPS_API_TOKEN` という名前のシークレットを作成します。 デプロイメント トークンの検索方法の詳細については、Azure ドキュメントの「Azure Static Web Apps のデプロイメント トークンのリセット」を参照してください。\n\n## ワークフローの作成\n\n必要な環境を整えたら、ワークフローの作成に進むことができます。\n\n次のワークフロー例は、`main` ブランチへのプッシュがある場合、または `main` をターゲットとするプル要求が開かれる、同期される、または再度開かれたときに、Azure静的 Web アプリをビルドしてデプロイする方法を示しています。 また、`main` がターゲットとして設定されている pull request が閉じている場合は、対応する実稼働前デプロイが、ワーフクローによって破棄されます。\n\nワークフロー `env` キーで、次の値を変更します。\n*               クライアント コードの場所に `APP_LOCATION`\n* `API_LOCATION` を API のソースコードの場所に設定します。 \n`API_LOCATION` が関連していない場合は、変数およびそれが使用されている行を削除することができます。\n*               クライアント コードのビルド出力の場所に `OUTPUT_LOCATION`\n\nこれらの値の詳細については、Azureドキュメントの「Azure Static Web Apps</c0> <c0>Build の構成」を参照してください。\n\n```yaml copy\n# このワークフローはGitHubによって認定されていないアクションを使用します。\n# それらはサードパーティによって提供され、\n# 別個の利用規約、プライバシーポリシー、\n# ドキュメントを参照してください。\n\n# GitHub では、コミット SHA にアクションをピン留めすることが推奨されます。\n# 新しいバージョンを取得するには、SHA を更新する必要があります。\n# タグまたはブランチを参照することもできますが、アクションは警告なしに変更される可能性があります。\n\nname: Deploy web app to Azure Static Web Apps\n\nenv:\n  APP_LOCATION: \"/\" # location of your client code\n  API_LOCATION: \"api\" # location of your api source code - optional\n  OUTPUT_LOCATION: \"build\" # location of client code build output\n\non:\n  push:\n    branches:\n      - main\n  pull_request:\n    types: [opened, synchronize, reopened, closed]\n    branches:\n      - main\n\npermissions:\n  issues: write\n  contents: read\n  pull-requests: write\n\njobs:\n  build_and_deploy:\n    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')\n    runs-on: ubuntu-latest\n    name: Build and Deploy\n    steps:\n      - uses: actions/checkout@v6\n        with:\n          submodules: true\n      - name: Build And Deploy\n        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9\n        with:\n          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}\n          repo_token: ${{ secrets.GITHUB_TOKEN }}\n          action: \"upload\"\n          app_location: ${{ env.APP_LOCATION }}\n          api_location: ${{ env.API_LOCATION }}\n          output_location: ${{ env.OUTPUT_LOCATION }}\n\n  close_pull_request:\n    if: github.event_name == 'pull_request' && github.event.action == 'closed'\n    runs-on: ubuntu-latest\n    name: Close Pull Request\n    steps:\n      - name: Close Pull Request\n        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9\n        with:\n          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}\n          action: \"close\"\n```\n\n## 参考資料\n\n* 元のワークフロー テンプレートについては、[`azure-staticwebapp.yml`](https://github.com/actions/starter-workflows/blob/main/deployments/azure-staticwebapp.yml) を GitHub Actions `starter-workflows` リポジトリで参照してください。\n* Web アプリのデプロイに使用されるアクションは、公式の Azure [`Azure/static-web-apps-deploy`](https://github.com/Azure/static-web-apps-deploy) アクションです。\n* AzureにデプロイGitHubアクション ワークフローのその他の例については、[actions-workflow-samples](https://github.com/Azure/actions-workflow-samples) リポジトリを参照してください。"}