Skip to main content

Deploying Node.js to Azure App Service

You can deploy your Node.js project to Azure App Service as part of your continuous deployment (CD) workflows.

はじめに

This guide explains how to use GitHub Actions to build, test, and deploy a Node.js project to Azure App Service.

必要な環境

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

  1. Azure App Serviceプランの作成

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

    Shell
    az appservice plan create \
       --resource-group MY_RESOURCE_GROUP \
       --name MY_APP_SERVICE_PLAN \
       --is-linux

    上のコマンドで、MY_RESOURCE_GROUPはすでに存在するAzure Resource Groupに、MY_APP_SERVICE_PLANはApp Serviceプランの新しい名前に置き換えてください。

    Azure CLIの使いからに関する詳しい情報については、Azureのドキュメンテーションを参照してください。

    • 認証については「Sign in with Azure CLI」を参照してください。
    • 新しいリソースグループを作成しなければならない場合は、「az group」を参照してください。
  2. Webアプリケーションの作成

    For example, you can use the Azure CLI to create an Azure App Service web app with a Node.js runtime:

    Shell
    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のドキュメンテーションの「Generate deployment credentials」を参照してください。

    GitHubリポジトリで、公開されたプロフィールの内容を含むAZURE_WEBAPP_PUBLISH_PROFILEという名前のシークレットを生成してください。 シークレットの作成に関する詳しい情報については「暗号化されたシークレット」を参照してください。

  4. Optionally, configure a deployment environment. 環境は、productionstagingdevelopmentのような一般的なターゲットを記述するために使われます。 GitHub Actionsワークフローが環境にデプロイする場合、その環境はリポジトリのメインページに表示されます。 環境を使って、ジョブが進むために承認を必要にしたり、ワークフローをトリガーできるブランチを制限したり、シークレットへのアクセスを制限したりできます。 環境の作成に関する詳しい情報については「デプロイメントのための環境の利用」を参照してください。

ワークフローの作成

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

The following example workflow demonstrates how to build, test, and deploy the Node.js project to Azure App Service when there is a push to the main branch.

ワークフローのenvキー中のAZURE_WEBAPP_NAMEを、作成したWebアプリケーションの名前に設定してください。 If the path to your project is not the repository root, change AZURE_WEBAPP_PACKAGE_PATH to your project path. If you use a version of Node.js other than 10.x, change NODE_VERSION to the version that you use.

デプロイメント環境を設定したなら、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@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      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@v2
      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@v2
      with:
        name: node-app

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

追加リソース

以下のリソースも役に立つでしょう。