【AZ-400】Azure DevOps Pipelines で Node.js アプリを App Service にデプロイしてみた

はじめに

AZ-400 の学習の一環として、Azure DevOps Pipelines を利用し、Node.js アプリを Azure App Service にデプロイしました。

---

実施内容

1. ローカルで Node.js アプリを作成
2. Azure DevOps アカウントを作成
3. Azure Repos にソースコードを配置
4. App Service Planを作成
5. App Serviceを作成
6. Azure Pipelines 実行のための事前準備（エージェント・サービス接続）
7. Azure Pipelines を構成し、CI/CD を実行
8. デプロイ結果を確認

---

詳細とハマりポイント

1. ローカルで Node.js アプリを作成

AIに出力させた適当なアプリをそのまま利用。
Azure App Service にデプロイ可能な状態にすることが目的。

ローカル(mac)にディレクトリ作成

mkdir az400-node-handson
cd az400-node-handson

npm 初期化

npm init -y

expressインストール

npm install express

ソース作成

mkdir src
vi src/app.js

// src/app.js
const express = require('express');
const app = express();

app.get('/', (_, res) => {
  res.send('Hello AZ400 on Node.js + App Service F1!');
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`listening on ${port}`));

package.jsonを編集

vi package.json

{
  "name": "az400-node-handson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node src/app.js",
    "test": "echo \"no test yet\" && exit 0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "dependencies": {
    "express": "^5.1.0"
  }
}

ローカルホストでアプリ起動

npm start

http://localhost:3000

2. Azure DevOpsアカウントを作成

Azure DevOps の CI/CD を試すため、まずはアカウントを作成。

1. [Azure DevOps Services](https://dev.azure.com/) にアクセス  
2. Microsoft アカウントでサインイン  
3. 組織（Organization）を作成  
4. プロジェクト(AZ400-test-project)を新規作成

右上のユーザーアイコンから、
Personal Access Tokenを作成しておく
(リポジトリへのpushに利用)

3. Azure Repos にソースコードを配置

ローカルのgitリポジトリを作成

git init
git add .
git commit -m "initial commit"

Azure Repos でリポジトリ作成

作成後、

Push an existing repository from command line

に表示されるコマンドを実行

git remote add origin <Azure Repos URL>
git push -u origin main

※push 時に認証を求められるので、2の手順で作成したPATを利用して認証する
(ユーザー名は Microsoft アカウントのメールアドレス/パスワードにPAT)

4. App Service Plan を作成

OSはLinuxを選択。Linux App Service には Node.js ランタイムが標準サポートされているため。
また、Azure東日本リージョンはリソースが逼迫しているためか、新規でApp Service Planを作成できなかったため、西日本リージョンに作成。

# リソースグループ作成（存在しない場合）
az group create \
  --name rg-az400-node \
  --location japanwest

# App Service Plan 作成（Linux, B1）
az appservice plan create \
  --name asp-az400-b1 \
  --resource-group rg-az400-node \
  --sku B1 \
  --is-linux \
  --location japanwest

(参考)　クォータ超過のメッセージ

Operation cannot be completed without additional quota. 
Additional details - Location:  
Current Limit (Basic VMs): 0 
Current Usage: 0
Amount required for this deployment (Basic VMs): 1 
(Minimum) New Limit that you should request to enable this deployment: 1. 
Note that if you experience multiple scaling operations failing (in addition to this one) and need to accommodate the aggregate quota requirements of these operations, you will need to request a higher quota limit than the one currently displayed.

5. App Service を作成

# Web App 作成
az webapp create \
  --resource-group rg-az400-node \
  --plan asp-az400-b1 \
  --name az400-test-app \
  --runtime "NODE|20-lts" \
  --location japanwest

6. Azure Pipelines 実行のための事前準備（エージェント・サービス接続）

今回は、Azure Pipelineを実行するためのリソースとしてMicrosoft-hostedエージェントを利用する。
無料プランではMicrosoft-hostedエージェントの枠が初期状態では付与されていないため、MSへの申請もしくは課金が必要。

今回はサブスクリプションに紐づける形で一時的に課金する。

また、Service Connectionを作成して、AzureResourceManagerを連携する必要がある。

7. Azure Pipelines を構成し、CI/CD を実行

Azure Repos に push されたソースをトリガーに、Node.js アプリをビルド → アーティファクト化 → App Service へデプロイするパイプラインを構成。
poolをubuntu-latestで指定。(Microsoft-hostedなエージェントを使用)

touch azure-pipelines.yml
vi azure-pipelines.yml

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
# 1. Node.js インストール
- task: NodeTool@0
  inputs:
    versionSpec: '20.x'
  displayName: 'Install Node.js'

# 2. 依存関係インストール
- script: |
    npm install
  displayName: 'npm install'

# 3. ビルド成果物を zip 化
- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true
  displayName: 'Archive build artifacts'

# 4. Artifact 発行
- publish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
  artifact: drop

# 5. Azure App Service へのデプロイ
- task: AzureWebApp@1
  inputs:
    azureSubscription: 'az400-test-app'      # サービス接続名
    appType: 'webAppLinux'                   # Linux App Service
    appName: 'az400-test-app'           # App Service 名
    package: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
  displayName: 'Deploy to Azure App Service'

リモートブランチに add

git add ./
git commit -m "modify azure-pipeline.yml"
git push -u origin 

8. デプロイ結果を確認

パイプラインが実行され、Azure App Service上へリソースがデプロイされる。

https://az400-test-app.azurewebsites.net