注: GitHub ホステッド ランナーは、現在 GitHub Enterprise Server でサポートされていません。 GitHub public roadmap で、今後の計画的なサポートの詳細を確認できます。
はじめに
このガイドでは、GitHub Actions を使用して、Node.js プロジェクトを作成、テスト、および Azure App Service にデプロイする方法について説明します。
注: GitHub Actions ワークフローが OpenID Connect (OIDC) をサポートするクラウド プロバイダーのリソースにアクセスする必要がある場合、そのクラウド プロバイダーで直接認証されるようにワークフローを構成できます。 これにより、有効期間の長いシークレットとしてこれらの資格情報の格納を停止し、その他のセキュリティ上の利点を提供できます。 詳しくは、「OpenID Connect を使ったセキュリティ強化について」をご覧ください と「Azure での OpenID Connect の構成」。
前提条件
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
キーを削除します。
# このワークフローは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@v4 - 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@v4
- 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 を使用する方法のデモを行います。