🐤

Azure Static Web Apps に GitHub Actions を使って Nuxt3 アプリをデプロイする

2024/04/22に公開

GitHub Actions

Node.js

pnpm

Azure Static Web Apps

Nuxt 3

tech

はじめに

Azure Static Web Apps に Nuxt3 のアプリケーションをデプロイすることになったので、GitHub Actions で CD をするようにしました。
(実務では)はじめての GitHub Actions だったので格闘しました🤣🤣

格闘の経過はこちらに書いたので、ここでは結果だけ記載します。（といっても大したことは書いてないかも）

環境

WSL2 Ubuntu 22.04
node.js v20
npm v10.5
pnpm v8.15

デプロイするアプリケーション

今回はこちらをお借りしました。
sakai-nuxt

typescript 版コード

GitHub Actions workflow

早速ですが、workflow ファイルから。

.github/workflows/dev-deploy.yml

# This workflow will build and push a web application to an Azure Static Web App when you change your code.
#
# This workflow assumes you have already created the target Azure Static Web App.
# For instructions see https://docs.microsoft.com/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript
#
# To configure this workflow:
#
# 1. Set up a secret in your repository named AZURE_STATIC_WEB_APPS_API_TOKEN with the value of your Static Web Apps deployment token.
#    For instructions on obtaining the deployment token see: https://docs.microsoft.com/azure/static-web-apps/deployment-token-management
#
# 3. Change the values for the APP_LOCATION, API_LOCATION and APP_ARTIFACT_LOCATION, AZURE_STATIC_WEB_APPS_API_TOKEN environment variables (below).
#    For instructions on setting up the appropriate configuration values go to https://docs.microsoft.com/azure/static-web-apps/front-end-frameworks
name: Deploy web app to Azure Static Web Apps

on:
  push:
    branches: [ "develop" ]
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches: [ "develop" ]

# Environment variables available to all jobs and steps in this workflow
env:
  APP_LOCATION: ".output/public" # location of your client code
  # API_LOCATION: "api" # location of your api source code - optional
  AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing deployment token for your static web app

permissions:
  contents: read

jobs:
  build_and_deploy_job:
    permissions:
      contents: read # for actions/checkout to fetch code
      pull-requests: write # for Azure/static-web-apps-deploy to comment on PRs
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 8
      - name: Detect package manager
        id: detect-package-manager
        run: |
          echo "manager=pnpm" >> $GITHUB_OUTPUT
          echo "command=install" >> $GITHUB_OUTPUT
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: ${{ steps.detect-package-manager.outputs.manager }}
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            dist
            .nuxt
          key: ${{ runner.os }}-nuxt-build-${{ hashFiles('dist') }}
          restore-keys: |
            ${{ runner.os }}-nuxt-build-
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Static HTML export with Nuxt
        run: ${{ steps.detect-package-manager.outputs.manager }} generate
      - name: Deploy
        id: deploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          skip_app_build : true
          output_location: ''
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: ${{ env.APP_LOCATION }}
          # api_location: ${{ env.API_LOCATION }}
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    permissions:
      contents: none
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          app_location: ${{ env.APP_LOCATION }}
          azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app
          action: "close"

staticwebapp.config.json

{
  "routes": [
    {
      "route": "/index.html",
      "redirect": "/"
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

解説

基本は Azure Static Web Apps のビルド構成 - [ビルド構成] の Deploy ジョブです。

Azure/static-web-apps-deploy@v1 ジョブ（と呼ぶのかな？）は、ビルドとデプロイ両方を行ってくれるジョブです。
ですが、 pnpm には対応していないので、ビルドをカスタムするために、Azure/static-web-apps-deploy@v1 ジョブ内ではビルドは行わないようにしました。
それが、　skip_app_build : true の部分です。
このオプションを指定するときは、output_location: '' も同時に指定する必要があります。

pnpm のビルドは粛々とやる感じです。

最初は、APP_LOCATION: dist を指定していましたが、dist フォルダは generate した際に、生成される .output/public のシンボリックリンクのようで、Azure/static-web-apps-deploy@v1 のジョブだと、シンボリックリンクがうまく見れないようです。ビルドのジョブの方は見れてるようなんですけどね？
なので、実体のフォルダである .output/public を指定すると動きました。

staticwebapp.config.json はとりあえずの設定で、Nuxt アプリの場合のデフォルトっぽい設定を GitHub Copilot に教えてもらって書いてます。(雑)

あとがき

Nuxt も GitHub も SWA もどれも慣れちゃいなかったので、結構悪戦苦闘しました。フロントエンドむずい。ビルドしたら、若干デザイン崩れてるので、どっかでバージョン指定がダメだったかもしれないけど、またあとで！！！

SWA のパスワード機能いいすね。