Closed8
GitHub Actions Azure/static-web-apps-deploy@v1 との格闘
GitHub Actions で Azure Static Web Apps にデプロイするには Azure/static-web-apps-deploy@1 を使うらしい
.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してるの?
どうやら、Azure/static-web-apps-deploy@v1 はビルドとデプロイを両方してくれるものらしい。
悩んでたら Kazumi IWANAGA (OHIRA) / dz さんが教えてくれました。さすが公認トレーナー!!!ありがたし。
(よく見たらコメントのリンクに書いてるな・・・)
全パラメータはこっち
...
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: 'upload'
app_location: 'src/dist'
api_location: 'api'
output_location: ''
skip_app_build: true
app_location ができるってことは、 artifact としてアップロードは別に必要ないのかな?
artifact には必要ないみたい(保存したいなら別だけど)
あと、dist はシンボリックリンクで、実体は .output/public に出力されるので、実体の方のパスを app_location に指定すると動いた。
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]
このスクラップは2024/04/22にクローズされました