作成済のAzure Static Web Apps に Azure DevOps からデプロイしたメモ

概要

クイックスタートだとgithub actionsでのデプロイだった。
同等のことをAzure DevOpsで行う。

デプロイ対象の準備

クイックスタート: Azure Static Web Apps を使用して静的サイトを初めて構築するで使用されているReact Starterをデプロイすることとする。

Cloneしてきたコードを、AzureDevOpsのリポジトリとして登録する。

なお、この手順で紹介されているAzure Static Web Apps for Visual Studio Codeは手順通りのGitHubではうまく行ったが、DevOpsで同様のことをやろうとしたらURL parsing failedといわれてしまった。

Azure Static Web Appsの作成

クイック スタート: 静的 Web アプリを初めてビルドするで「コードホスティング プラットフォームを選択する」のDevOpsを選択

「静的 Web アプリを作成する」の[Review + create](レビュー + 作成) を選択します。の直前まで作業を進める。デプロイはパイプラインからやりたいので。

デプロイトークンの取得

作成されたAzure Static Web Appsをポータルから開き、
パイプラインの環境変数に設定するためのトークンを取得する。

パイプラインからのデプロイ

パイプライン用ファイルの作成

デプロイ用のファイルを作成する。
コミットしてプッシュしておく。

azure-pipelines.yaml

trigger:
  - main
pool:
  vmImage: ubuntu-latest
steps:
  - task: AzureStaticWebApp@0
    name: DeployStaticWebApp
    displayName: Deploy Static Web App
    inputs:
      app_location: /
      output_location: build
    env:
      azure_static_web_apps_api_token: $(deployment_token)

パイプラインの設定

Azure Dev Opsのパイプラインを新規作成する。

環境変数の設定

deployment_tokenにAzure Static Web Appsから取得したデプロイトークンを設定する

パイプラインの実行

以上で設定は完了。パイプラインからデプロイができる。

Unsupported engineのWARNが出る件への対応

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@4.14.0',
npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }

Node.js環境で発生する”npm WARN EBADENGINE Unsupported engine”を解決したいによると、Nodeのバージョンの問題の模様。

Eslint周りのモジュールが要求するNodeバージョンを現在の環境が満たしていないようです。

package.jsonにenginesの設定をすることでNodeのバージョンを設定できる。
Azure Static Web Apps でサポートされている言語とランタイム > フロントエンド

package.json

{
  "version": "0.0.1",
+  "engines": {
+    "node": ">=18.x"
+  },

APIのデプロイ

api/src/functions/httpTrigger1.ts

import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext,
} from '@azure/functions';
import { format } from 'date-fns';

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';
  const time = format(new Date(), 'yyyy-MM-dd: HH:mm:ss');
  return { body: JSON.stringify({ msg: `Hello, ${name}!`, time }) };
}

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

api/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",
    "test": "echo \"No tests yet...\""
  },
  "dependencies": {
    "@azure/functions": "^4.4.0",
    "date-fns": "^3.6.0"
  },
  "devDependencies": {
    "@types/node": "^20.x",
    "rimraf": "^5.0.5",
    "typescript": "^5.4.4"
  },
  "main": "dist/src/functions/*.js"
}

azure-pipelines.yaml

trigger:
  - main
pool:
  vmImage: ubuntu-latest
steps:
  - task: AzureStaticWebApp@0
    name: DeployStaticWebApp
    displayName: Deploy Static Web App
    inputs:
      app_location: /
      output_location: build
+      api_location: api
    env:
      azure_static_web_apps_api_token: $(deployment_token)

2024.05.05 追記

パイプラインを使わない方法

参考

Azure Static Web Apps が Azure DevOps からデプロイできるようになった
AzureStaticWebApp@0 - Azure Static Web App v0 タスクをデプロイする
Azure Static Web Apps のビルド構成