# Azure App Serviceへの Node.js のデプロイ

継続的配置 (CD) ワークフローの一部としてAzure App Serviceする Node.js プロジェクトをデプロイする方法について説明します。

## 前提条件

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

1. Azure App Service プランを作成する。

   たとえば、Azure CLIを使って新しいApp Serviceのプランを作成できます。

   ```bash copy
   az appservice plan create \
      --resource-group MY_RESOURCE_GROUP \
      --name MY_APP_SERVICE_PLAN \
      --is-linux
   ```

   上記のコマンドでは、`MY_RESOURCE_GROUP` を既存の Azure リソース グループに、`MY_APP_SERVICE_PLAN` を App Service プランの新しい名前に置き換えます。

   [Azure CLI](https://docs.microsoft.com/cli/azure/) の使用に関する詳細については、Azure のドキュメントを参照してください。

   * 認証については、「[Azure CLI を使用してサインインする](https://docs.microsoft.com/cli/azure/authenticate-azure-cli)」を参照してください。
   * 新しいリソース グループを作成する必要がある場合は、「[az group](https://docs.microsoft.com/cli/azure/group?view=azure-cli-latest#az_group_create)」を参照してください。

2. Web アプリを作成する。

   たとえば、Azure CLIを使用して、Node.js ランタイムを使用してAzure App Service Web アプリを作成できます。

   ```bash copy
   az webapp create \
       --name MY_WEBAPP_NAME \
       --plan MY_APP_SERVICE_PLAN \
       --resource-group MY_RESOURCE_GROUP \
       --runtime "NODE|14-lts"
   ```

   上のコマンドで、パラメーターを独自の値に置き換えます。`MY_WEBAPP_NAME` は、その Web アプリの新しい名前です。

3. Azure 発行プロファイルを構成し、`AZURE_WEBAPP_PUBLISH_PROFILE` シークレットを作成します。

   公開されたプロフィールを使って、Azureのデプロイ資格情報を生成してください。 詳細については、Azure ドキュメントの[デプロイ資格情報の生成](https://docs.microsoft.com/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials)に関する記事を参照してください。

GitHub リポジトリで、発行プロファイルの内容を含む `AZURE_WEBAPP_PUBLISH_PROFILE` という名前のシークレットを作成します。 シークレットの作成の詳細については、「[GitHub Actions でのシークレットの使用](/ja/actions/how-tos/write-workflows/choose-what-workflows-do/use-secrets#creating-secrets-for-a-repository)」を参照してください。

1. 必要に応じて、デプロイ環境を構成します。 環境は、一般的なデプロイ ターゲットを記述するために使用されます (例: `production`、`staging`、または `development`)。
   GitHub Actions ワークフローが環境にデプロイされると、その環境がリポジトリのメイン ページに表示されます。 環境を使って、ジョブを進めるために承認を必要とすること、ワークフローをトリガーできるブランチを制限すること、カスタム デプロイ保護規則でデプロイを制限すること、またはシークレットへのアクセスを制限することができます。 環境の作成の詳細については、「[デプロイメント用の環境管理](/ja/actions/how-tos/deploy/configure-and-manage-deployments/manage-environments)」を参照してください。

## ワークフローの作成

必要な環境を整えたら、ワークフローの作成に進むことができます。

次のワークフロー例は、`main` ブランチへのプッシュがある場合にAzure App Serviceする Node.js プロジェクトをビルド、テスト、およびデプロイする方法を示しています。

ワークフロー `AZURE_WEBAPP_NAME` キーの `env` は、必ず作成した Web アプリの名前に設定してください。 プロジェクトのパスがリポジトリ ルートではない場合は、`AZURE_WEBAPP_PACKAGE_PATH` をプロジェクト パスに変更します。
`10.x` 以外の Node.js のバージョンを使用する場合、`NODE_VERSION` は、使用するバージョンに変更します。

デプロイ環境を構成した場合は、`environment` の値を環境の名前に変更します。 環境を構成しなかった場合、またはワークフローがプライベート リポジトリにあり、GitHub Enterprise Cloud を使わない場合は、`environment` キーを削除します。

```yaml copy
# このワークフローはGitHubによって認定されていないアクションを使用します。
# それらはサードパーティによって提供され、
# 別個の利用規約、プライバシーポリシー、
# ドキュメントを参照してください。

# GitHub では、コミット SHA にアクションをピン留めすることが推奨されます。
# 新しいバージョンを取得するには、SHA を更新する必要があります。
# タグまたはブランチを参照することもできますが、アクションは警告なしに変更される可能性があります。

on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: MY_WEBAPP_NAME   # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '14.x'                # set this to the node version to use

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v6

    - name: Set up Node.js
      uses: actions/setup-node@v7
      with:
        node-version: ${{ env.NODE_VERSION }}
        cache: 'npm'

    - name: npm install, build, and test
      run: |
        npm install
        npm run build --if-present
        npm run test --if-present
    - name: Upload artifact for deployment job
      uses: actions/upload-artifact@v4
      with:
        name: node-app
        path: .

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
    - name: Download artifact from build job
      uses: actions/download-artifact@v5
      with:
        name: node-app

    - name: 'Deploy to Azure WebApp'
      id: deploy-to-webapp
      uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
```

## 参考資料

* 元のワークフロー テンプレートについては、[`azure-webapps-node.yml`](https://github.com/actions/starter-workflows/blob/main/deployments/azure-webapps-node.yml) を GitHub Actions `starter-workflows` リポジトリで参照してください。
* Web アプリのデプロイに使用されるアクションは、公式の Azure [`Azure/webapps-deploy`](https://github.com/Azure/webapps-deploy) アクションです。
* AzureにデプロイGitHubアクション ワークフローのその他の例については、[actions-workflow-samples](https://github.com/Azure/actions-workflow-samples) リポジトリを参照してください。
* <c0>Azure での Node.js ウェブアプリの作成</c0> は、Azure Web アプリのドキュメント中のクイックスタートで、Visual Studio Code と <c1>Azure App Service 拡張機能</c1>の使用方法を示しています。