次の方法で共有

GitHub Actions ワークフローを使用して、静的 Web サイトを Azure Storage にデプロイする

  • [アーティクル]

ワークフローを使用して静的サイトを Azure Storage アカウントにデプロイすることによって、GitHub Actions を開始します。 GitHub Actions ワークフローを設定すると、サイトのコードに変更を加えたときに、GitHub から Azure にサイトを自動的にデプロイできるようになります。

Note

Azure Static Web Apps を使用している場合は、GitHub Actions ワークフローを手動で設定する必要はありません。 Azure Static Web Apps によって GitHub Actions ワークフローが自動的に作成されます。

前提条件

Azure サブスクリプションと GitHub アカウント。

  • アクティブなサブスクリプションが含まれる Azure アカウント。 無料でアカウントを作成できます。
  • GitHub リポジトリと静的 Web サイト コード。 GitHub アカウントをお持ちでない場合は、無料でサインアップできます。
  • Azure Storage でホストされている作業用の静的 Web サイト。 Azure Storage で静的 Web サイトをホストする方法については、こちらをご覧ください。 この例を実行するには、Azure CDN のデプロイも必要になります。

Note

コンテンツ配信ネットワーク (CDN) を使用して、世界中のユーザーの待機時間を短縮し、ストレージ アカウントに対するトランザクションの数を減らすことが一般的です。 静的コンテンツをクラウドベースのストレージ サービスにデプロイすると、高価なコンピューティング インスタンスが必要になる可能性が低くなります。 詳細については、「静的コンテンツ ホスティング パターン」を参照してください。

デプロイ資格情報を生成する

Azure CLI で az ad sp create-for-rbac コマンドを使用して、サービス プリンシパルを作成します。 このコマンドは、Azure portal で Azure Cloud Shell を使用するか、[試してみる] ボタンを選択して実行します。

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

--json-auth パラメーターは、Azure CLI バージョン 2.51.0 以降で使用できます。 これ以前のバージョンでは --sdk-auth を使用し、非推奨の警告が表示されます。

上記の例で、プレースホルダーをご利用のサブスクリプション ID、リソース グループ名、アプリ名に置き換えます。 これにより、以下のようなご自分の App Service アプリにアクセスするためのロールの割り当て資格情報を含む JSON オブジェクトが出力されます。 この JSON オブジェクトを後のためにコピーします。

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

GitHub シークレットの構成

  1. GitHub で、お使いのリポジトリに移動します。

  2. ナビゲーション メニューで [設定] に移動します。

  3. [Security] (セキュリティ) > [Secrets and variables] (シークレットと変数) > [Actions] (アクション) を選びます。

    Screenshot of adding a secret

  4. [New repository secret](新しいリポジトリ シークレット) を選択します。

  5. Azure CLI コマンドからの JSON 出力全体をシークレットの値フィールドに貼り付けます。 シークレットに AZURE_CREDENTIALS と名前を付けます。

  6. [Add secret](シークレットの追加) を選択します。

ワークフローを追加する

  1. GitHub リポジトリの [Actions](アクション) にアクセスします。

    GitHub Actions menu item

  2. [Set up a workflow yourself](ワークフローを自分でセットアップする) を選択します。

  3. ワークフロー ファイルの on: セクションの後にあるすべてのものを削除します。 たとえば、残りのワークフローは次のようになります。

    name: CI

on:
    push:
        branches: [ main ]

  4. ワークフロー Blob storage website CI の名前を変更し、チェックアウトとログインのアクションを追加します。 これらのアクションは、サイト コードをチェックアウトし、先ほど作成した AZURE_CREDENTIALS GitHub シークレットを使用して Azure で認証を行います。

    name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

  5. Azure CLI アクションを使用して、コードを BLOB ストレージにアップロードし、CDN エンドポイントを消去します。 az storage blob upload-batch の場合、プレースホルダーを実際のストレージ アカウント名に置き換えます。 スクリプトが $web コンテナーにアップロードされます。 az cdn endpoint purge の場合、プレースホルダーを CDN プロファイル名、CDN エンドポイント名、およびリソース グループに置き換えます。 CDN の消去を高速化するには、--no-wait オプションを az cdn endpoint purge に追加します。 セキュリティを強化するために、--account-key オプションとストレージ アカウント キーを追加することもできます。

        - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  6. Azure のログアウトにアクションを追加して、ワークフローを完成させます。 完成したワークフローを次に示します。 このファイルは、リポジトリの .github/workflows フォルダー内に表示されます。

    name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

デプロイを確認する

  1. GitHub リポジトリの [Actions](アクション) にアクセスします。

  2. 最初の結果を開くと、ワークフローの実行の詳細なログが表示されます。

    Log of GitHub Actions run

リソースをクリーンアップする

静的 Web サイトと GitHub リポジトリが不要になったら、リソース グループと GitHub リポジトリを削除して、デプロイしたリソースをクリーンアップします。

次の手順

Azure Static Web Apps について学習する