Azure DevOpsのパイプラインでAzure FunctionsにTypescriptのNodeランタイムのAPIをデプロイしたメモ

概要

前回はbicepでTypescript の Functionsのリソースを構築するところまで行った。今回はAzure DevOps のパイプラインを通してデプロイしてみたいと思う。
手順はAzure Pipelines を使用した継続的デリバリーを参考にする。

デプロイしたファイル

- functions-build-pipeline.yml
- batches
  - packages.json
  - tsconfig.json
  - host.json
  - .gitignore
  - .funcignore
  - src
    - functions
      - httpTrigger1.ts

batches/package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "clean": "rimraf dist",
    "prestart": "npm run clean && npm run build",
    "start": "func start",
    "predev": "npm run clean && npm run build",
    "dev": "func start --port 7071",
    "test": "echo \"No tests yet...\"",
    "ncu": "ncu"
  },
  "dependencies": {
    "@azure/functions": "^4.4.0"
  },
  "devDependencies": {
    "@types/node": "^20.x",
    "typescript": "^5.4.5"
  },
  "main": "dist/src/functions/*.js"
}

batches/tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "dist",
    "rootDir": ".",
    "sourceMap": true,
    "strict": false
  }
}

batches/host.json

{
  "version": "2.0",
  "logging": {
    "applicationInsights": {
      "samplingSettings": {
        "isEnabled": true,
        "excludedTypes": "Request"
      }
    }
  },
  "extensionBundle": {
    "id": "Microsoft.Azure.Functions.ExtensionBundle",
    "version": "[4.*, 5.0.0)"
  }
}

batches/src/functions/httpTrigger.ts

import { app, HttpRequest, HttpResponseInit, InvocationContext } from '@azure/functions';

export async function httpTrigger1(request: HttpRequest,context: InvocationContext,): Promise<HttpResponseInit> {
  context.log(`Http function processed request for url "${request.url}"`);
  const name = request.query.get('name') || (await request.text()) || 'world!!!';
  return { jsonBody: name };
}

app.http('httpTrigger1', {
  methods: ['GET', 'POST'],
  authLevel: 'anonymous',
  handler: httpTrigger1,
});

batches/.funcignore

*.js.map
*.ts
.git*
.vscode
__azurite_db*__.json
__blobstorage__
__queuestorage__
local.settings.json
test
tsconfig.json

batches/.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TypeScript output
dist
out

# Azure Functions artifacts
bin
obj
appsettings.json
local.settings.json

# Azurite artifacts
__blobstorage__
__queuestorage__
__azurite_db*__.json

ビルドパイプライン

ArchiveFiles@2 PublishBuildArtifacts@1

batchesフォルダを切ってfunctionsのファイルを入れていたので、workingDirectoryを追加した。

functions-build-pipeline.yml

pool:
  vmImage: ubuntu-latest
steps:
- bash: |
    if [ -f extensions.csproj ]
    then
        dotnet build extensions.csproj --output ./bin
    fi
    npm install 
    npm run build --if-present
    npm prune --production
  workingDirectory: $(System.DefaultWorkingDirectory)/batches
- task: ArchiveFiles@2
  displayName: "Archive files"
  inputs:
    rootFolderOrFile: "$(System.DefaultWorkingDirectory)/batches"
    includeRootFolder: false
    archiveFile: "$(System.DefaultWorkingDirectory)/build$(Build.BuildId).zip"
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)/build$(Build.BuildId).zip'
    artifactName: 'drop'

ビルドパイプラインを一度実行する

リリースパイプライン

AzureFunctionApp@2

ビルドパイプラインで作成したArtifactを選択

タスクを追加していく

サブスクリプションは認証を求められるので許可しておく。
許可出来たら、AzureのFunctionsのAppServiceを選択。

実行環境はlinux(ubuntu-latest)にしておく

デプロイタスクのバージョンは2にしておく。
Package or folderを *.zipまで指定。

動作確認

https://hoge.azurewebsites.net/api/httptrigger1 にアクセスして、値が取得できることを確認した。

設定に失敗したときのログ

// ここまでは問題なし

デプロイタスクのバージョンは2にしておく。※ここで設定項目をミスった

Package or folder で指定するzipがちゃんとできているか一応確認。

リリースしてみる。

うごかない

WEBSITE_RUN_FROM_PACKAGEの値がパイプラインによって書き換えられている。
VSCodeからデプロイしたときと値が異なるので、少し追ってみる。

デプロイ方法	WEBSITE_RUN_FROM_PACKAGEの値
VSCode	https://hoge.blob.core.windows.net/function-releases/yyyyMMddHHmmss-略.zip?sv=2022...省略
pipeline	https://hoge.blob.core.windows.net/azure-pipelines-deploy/package_略.zip?st=2024...省略

VSCodeからのデプロイは、functions-releaseコンテナに。パイプラインからのデプロイはazure-pipeline-deployコンテナに入っている。

成功しているとき(VSCode)のzipの中身。

失敗したとき(Pipeline)のzipの中身

どうやら、artifactの中身をさらにzipで包んでお出ししてしまっていることが原因のもよう。
jobの指定の仕方を修正。

無事動いたし、手順の例にもちゃんと*.zipって書いてあった。

参考

Azure Pipelines を使用した継続的デリバリー
DevOpsでAzure FunctionsにAPIをデプロイしてみた（TypeScript編）