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

前提条件

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

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

たとえば、Azure CLIを使って新しいApp Serviceのプランを作成できます。
Bash
```
az appservice plan create \
   --resource-group MY_RESOURCE_GROUP \
   --name MY_APP_SERVICE_PLAN \
   --is-linux
```
```
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 の使用に関する詳細については、Azure のドキュメントを参照してください。
- 認証については、「Azure CLI を使用してサインインする」を参照してください。
- 新しいリソースグループを作成する必要がある場合は、「az group」を参照してください。
Web アプリを作成する。

たとえば、Azure CLI を使用すると、Node.js ランタイムを持つ Azure App Service Web アプリを作成することができます。
Bash
```
az webapp create \
    --name MY_WEBAPP_NAME \
    --plan MY_APP_SERVICE_PLAN \
    --resource-group MY_RESOURCE_GROUP \
    --runtime "NODE|14-lts"
```
```
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 アプリの新しい名前です。
Azure 発行プロファイルを構成し、AZURE_WEBAPP_PUBLISH_PROFILE シークレットを作成します。

公開されたプロフィールを使って、Azureのデプロイ資格情報を生成してください。詳細については、Azure ドキュメントのデプロイ資格情報の生成に関する記事を参照してください。

GitHub リポジトリで、発行プロファイルの内容を含む AZURE_WEBAPP_PUBLISH_PROFILE という名前のシークレットを作成してください。シークレットの作成の詳細については、「GitHub Actions でのシークレットの使用」を参照してください。
必要に応じて、デプロイ環境を構成します。環境は、一般的なデプロイターゲットを記述するために使用されます (例: production、staging、または development)。 GitHub Actions ワークフローが環境にデプロイされると、その環境がリポジトリのメインページに表示されます。環境を使って、ジョブを進めるために承認を必要とすること、ワークフローをトリガーできるブランチを制限すること、カスタムデプロイ保護規則でデプロイを制限すること、またはシークレットへのアクセスを制限することができます。環境の作成の詳細については、「デプロイに環境の使用」を参照してください。

ワークフローの作成

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

次のワークフローの例では、main ブランチへのプッシュがある場合に、Node.js プロジェクトを作成し、Azure App Service にデプロイする方法のデモを行います。

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

デプロイ環境を構成した場合は、environment の値を環境の名前に変更します。環境を構成しなかった場合を使わない場合は、environment キーを削除します。

YAML

# このワークフローは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@v5

    - name: Set up Node.js
      uses: actions/setup-node@v4
      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@v3
      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@v3
      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 }}

# このワークフローは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@v5

    - name: Set up Node.js
      uses: actions/setup-node@v4
      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@v3
      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@v3
      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 }}

参考資料

元のワークフローテンプレートについては、GitHub Actions starter-workflows リポジトリの azure-webapps-node.yml を参照してください。
Web アプリのデプロイに使用されるアクションは、Azure の公式な Azure/webapps-deploy アクションです。
Azure にデプロイする GitHub アクションワークフローの例が他にも必要であれば、actions-workflow-samples リポジトリを参照してください。
Azure Web アプリのドキュメントの Azure での Node.js Web アプリの作成に関するクイックスタートでは、Azure App Service 拡張機能での Visual Studio Code の使用について見ることができます。

この記事の内容

前提条件

ワークフローの作成

参考資料