はじめに
このガイドでは、GitHub Actions を使用して、Web アプリをビルドし、Azure 静的 Web アプリにデプロイする方法について説明します。
注: 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 のビルド構成」を参照してください。
# このワークフローは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 リポジトリを参照してください。