GitHub Actionsで「サブディレクトリに配置されてるnpmのプロジェクト(Vite)」をGitHub Pagesにデプロイする時に、ymlの書き方でハマったので注意点メモ
ツイーティ・ザ・フォックスGitHub Actionsの初使用で少しハマったので備忘録のメモ。
JavaScriptを使ったウェブアプリのリポジトリ(Viteを使用)に関して、
「サブディレクトリに、npmのプロジェクトを配置」という構成のやつを、
GitHub Actionsを使ってGitHub Pagesにデプロイする時に、
workflowsのymlの書き方で少しハマったので注意点まとめをメモする。
※↓の構成のリポジトリについて、「npm_project」の内部で、
Viteのデフォのnpm run buildをして生成されたdistをデプロイしようとした
.
├── npm_project
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ └── src
└── 関係ないディレクトリ
気をつける必要があるポイント
Vite公式のサンプルのymlを少し書き換えれば楽勝にできる…
と思っていたけど、割とハマりそうなポイントがあって苦戦してしまった
★：サブディレクトリをworking-directoryに指定
defaultsの作業ディレクトリをnpm_projectに変更
これでビルドコマンドをnpm_project内で実行できるようになる。
これだけで上手くいくと思っていたけどそうはいかなかった。
defaults:
run:
working-directory: npm_project
★： 「actions/setup-node@v4」の「cache-dependency-path」にpackage-lock.jsonのパスを指定
working-directoryで作業ディレクトリを指定していても、
「actions/setup-node@v4」の「cache-dependency-path」で、
package-lock.jsonのパスを明示的に指定しないとエラーになってしまう。
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
# サブディレクトリにあるpackage-lock.jsonを指定する
cache-dependency-path: ./npm_project/package-lock.json
※cache-dependency-pathを指定してない時に出たActionsのエラー
Error: Dependencies lock file is not found in /home/runner/work/*リポジトリの名前*. Supported file patterns: package-lock.json,npm-shrinkwrap.json,yarn.lock
★： 「actions/upload-pages-artifact@v3」の「path」にdistディレクトリのパスを指定
これも同様で、working-directoryで作業ディレクトリを指定していても、
「actions/upload-pages-artifact@v3」の「pass」で、
distディレクトリのパスを明示的に指定しないとエラーになってしまう。
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# サブディレクトリにあるdistを指定する
path: './npm_project/dist'
upload-pages-artifact@v3のissueに
「working-directoryが効いてない」ってやつがあって気付いた。
※working-directoryが効いてると思い./distと書いた時に出たActionsのエラー
tar: dist: Cannot open: No such file or directory
tar: Error is not recoverable: exiting now
Error: Process completed with exit code 2.
ツイーティ・ザ・フォックス全部をまとめる!
こういう感じでサブディレクトリに配置されている、
npmのプロジェクト(Viteを使用)をデプロイする場合
.
├── npm_project
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ └── src
└── 関係ないディレクトリ
Vite公式のサンプルのymlを書き換えるなら、こういう感じになるはず(実際これで成功)
# Viteのサンプルより
# https://ja.vitejs.dev/guide/static-deploy.html#github-pages
name: Deploy static content to Pages
on:
push:
branches: ['main']
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: 'pages'
cancel-in-progress: true
# npm_projectのディレクトリで、ビルドを実行してデプロイする
# 参照：https://ebc-2in2crc.hatenablog.jp/entry/2023/01/13/181801
defaults:
run:
working-directory: npm_project
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 22
cache: 'npm'
# rootにpackage-lock.jsonがないとエラーになる現象への対応
# 参照：https://zenn.dev/nixieminton/articles/8b26a92feb26d8
cache-dependency-path: ./npm_project/package-lock.json
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: check directory
run: tree
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
# dist ディレクトリのパス指定(working-directoryは効かない)
#参照：https://github.com/actions/upload-pages-artifact/issues/74
path: './npm_project/dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4