Azure Static Web AppsにNextjsをAzure DevOps Pipelinesからデプロイ

Azure Static Web Apps(SWA)とは

Freeプランでも十分使え、NextjsではプレビューステータスですがSSR,SSG,ISRも動作するというかなりいい感じなサービスです

SWAリソースの作成

デプロイの詳細はその他で作っておきます

デプロイ

Reposで作成したブランチを任意のタイミングで手動でデプロイすることを想定しています

pipelines.yml

trigger: none

pool:
  vmImage: ubuntu-latest

steps:
- checkout: self
  submodules: true
- task: AzureStaticWebApp@0
  inputs:
    app_location: "."
    azure_static_web_apps_api_token: $(DEPLOYMENT_TOKEN)

トークンは「デプロイトークンの管理」から取得し、Pipelinesの変数に設定しています

注意が必要なのは2024/01現在SWAはNodejsの18系までしか対応していないため、package.jsonのenginesで明示的にバージョンを指定する必要があります

package.json

{
  "engines": {
    "node": "18.x"
  }
}

デプロイにはサイズ制限があるためstandaloneモードにすることを忘れずに

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone'
}