Closed8

GitHub Actions Azure/static-web-apps-deploy@v1 との格闘

yukiko_bassyukiko_bass
.github/workflows/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: "/" # location of your client code
  # API_LOCATION: "api" # location of your api source code - optional
  APP_ARTIFACT_LOCATION: "build" # location of client code build output
  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: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: ${{ env.APP_ARTIFACT_LOCATION }}
          path: ./dist
      - name: Build And Deploy
        id: builddeploy
        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"
          ###### 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 }}
          app_artifact_location: ${{ env.APP_ARTIFACT_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:
          azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app
          action: "close"

ビルドは単独でできたので、deployを合わせてみることに。

actionsを実行するとエラーに。

Using Node version:
v20.11.1

Using Npm version:
10.2.4

Running 'npm install'...

npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @antfu/eslint-config@2.15.0
npm WARN Found: eslint@8.55.0-1
npm WARN node_modules/.pnpm/@antfu+utils@0.7.7/node_modules/@antfu/utils/node_modules/eslint
npm WARN   dev eslint@"npm:eslint-ts-patch@8.55.0-1" from @antfu/utils@0.7.7
npm WARN   node_modules/.pnpm/@antfu+utils@0.7.7/node_modules/@antfu/utils
npm WARN     @antfu/utils@0.7.7
npm WARN     node_modules/@antfu/utils
npm WARN     @antfu/utils@0.7.7
npm WARN     node_modules/.pnpm/unconfig@0.3.13/node_modules/@antfu/utils
npm WARN     @antfu/utils@0.7.7
npm WARN     node_modules/.pnpm/vite-plugin-inspect@0.8.3_@nuxt+kit@3.11.2_rollup@2.79.1_vite@5.2.9/node_modules/@antfu/utils
npm WARN     @antfu/utils@0.7.7
npm WARN     node_modules/.pnpm/@iconify+utils@2.1.23/node_modules/@antfu/utils
npm WARN     @antfu/utils@0.7.7
npm WARN     node_modules/.pnpm/@nuxt+devtools@1.1.5_@unocss+reset@0.59.3_floating-vue@5.2.2_nuxt@3.11.2_rollup@2.79.1_unocss_nxxkslicpjojrj6brmknvtrtbu/node_modules/@antfu/utils
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@">=8.40.0" from @antfu/eslint-config@2.15.0
npm WARN node_modules/.pnpm/@antfu+utils@0.7.7/node_modules/@antfu/utils/node_modules/@antfu/eslint-config
npm WARN   dev @antfu/eslint-config@"^2.4.4" from @antfu/utils@0.7.7
npm WARN   node_modules/.pnpm/@antfu+utils@0.7.7/node_modules/@antfu/utils
npm WARN 
npm WARN Conflicting peer dependency: eslint@9.0.0
npm WARN node_modules/eslint
npm WARN   peer eslint@">=8.40.0" from @antfu/eslint-config@2.15.0
npm WARN   node_modules/.pnpm/@antfu+utils@0.7.7/node_modules/@antfu/utils/node_modules/@antfu/eslint-config
npm WARN     dev @antfu/eslint-config@"^2.4.4" from @antfu/utils@0.7.7
npm WARN     node_modules/.pnpm/@antfu+utils@0.7.7/node_modules/@antfu/utils
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @eslint/eslintrc@2.1.4
npm WARN Found: peer eslint-plugin-jsdoc@">=22.1.0" from eslint-config-eslint@7.0.0
npm WARN node_modules/.pnpm/@eslint+eslintrc@2.1.4/node_modules/@eslint/eslintrc/node_modules/eslint-config-eslint
npm WARN   dev eslint-config-eslint@"^7.0.0" from @eslint/eslintrc@2.1.4
npm WARN   node_modules/.pnpm/@eslint+eslintrc@2.1.4/node_modules/@eslint/eslintrc
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint-plugin-jsdoc@">=22.1.0" from eslint-config-eslint@7.0.0
npm WARN node_modules/.pnpm/@eslint+eslintrc@2.1.4/node_modules/@eslint/eslintrc/node_modules/eslint-config-eslint
npm WARN   dev eslint-config-eslint@"^7.0.0" from @eslint/eslintrc@2.1.4
npm WARN   node_modules/.pnpm/@eslint+eslintrc@2.1.4/node_modules/@eslint/eslintrc
npm ERR! Cannot read properties of null (reading 'edgesOut')

npm ERR! A complete log of this run can be found in: /github/home/.npm/_logs/2024-04-19T10_12_40_229Z-debug-0.log


---End of Oryx build logs---
Oryx has failed to build the solution.

あれ、なんでまたnpm installしてるの?

yukiko_bassyukiko_bass

どうやら、Azure/static-web-apps-deploy@v1 はビルドとデプロイを両方してくれるものらしい。

yukiko_bassyukiko_bass

artifact には必要ないみたい(保存したいなら別だけど)

あと、dist はシンボリックリンクで、実体は .output/public に出力されるので、実体の方のパスを app_location に指定すると動いた。

yukiko_bassyukiko_bass

Static Web Apps をローカルで確認

  • @azure/static-web-apps-cli をインストール
$ pnpm install -D @azure/static-web-apps-cli
 WARN  1 deprecated subdependencies found: workbox-google-analytics@7.0.0
Packages: +186
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1453, reused 1220, downloaded 186, added 186, done
node_modules/.pnpm/keytar@7.9.0/node_modules/keytar: Running install script, done in 1.3s

devDependencies:
+ @azure/static-web-apps-cli 1.1.7
  • build
$ pnpm generate
  • SWA を初期化
$ pnpm run swa:init

> sakai-nuxt@ swa:init /home/spring/GitHub/xxxxxxx/nuxt-application
> swa init


Welcome to Azure Static Web Apps CLI (1.1.7)

✔ Choose a configuration name: … nuxt-application

Detected configuration for your app:
- Framework(s): none
- App location: .
- Output location: .
- API location: 
- API language: 
- API version: 
- Data API location: 
- App build command: 
- API build command: 
- App dev server command: 
- App dev server URL: 

- API dev server URL: 

✔ Are these settings correct? … yes

Configuration successfully saved to swa-cli.config.json.

Get started with the following commands:
- Use swa start to run your app locally.
- Use swa deploy to deploy your app to Azure.

ほんとはここでいろいろ指定するんだろうけど、Yesって押しちゃったので、書き直し。

staticwebapp.config.json
{
  "routes": [
    {
      "route": "/index.html",
      "redirect": "/"
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}
swa-cli.config.json
{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "nuxt-application": {
      "appLocation": ".",
      "apiLocation": "",
      "outputLocation": ".output/public"
    }
  }
}
  • 起動
$ pnpm run swa:start

> sakai-nuxt@ swa:start /home/spring/GitHub/xxxxxxx/nuxt-application
> swa start --api-location=""


Welcome to Azure Static Web Apps CLI (1.1.7)

Using configuration "nuxt-application" from file:
  /home/spring/GitHub/xxxxxxx/nuxt-application/swa-cli.config.json

***********************************************************************
* WARNING: This emulator may not match the cloud environment exactly. *
* Always deploy and test your app in Azure.                           *
***********************************************************************

[swa] 
[swa] Found configuration file:
[swa]   /home/spring/GitHub/xxxxxxx/nuxt-application/staticwebapp.config.json
[swa] 
[swa] 
[swa] Serving static content:
[swa]   /home/spring/GitHub/xxxxxxx/nuxt-application/.output/public
[swa] 
[swa] Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.
[swa] 
[swa]
このスクラップは14日前にクローズされました