以前、SPA(Gatsby.js)を GitHub Actionsを使って GitHub Pagesにデプロイする記事を投稿しました。
GatsbyとGitHub PagesとGitHub Actionsで技術系イベントサイトを無料・爆速で作る方法
https://qiita.com/uedayou/items/903f44a8dd251463ce59
こちらは、技術系イベントサイトを複数人数で編集することを前提としているため、特定のブランチ(記事内ではmasterブランチ)のpushをトリガーに自動的にデプロイされるものでした。
以前までは、このような何かのトリガーにより自動的に処理が実行されることしかできなったらしいですが、最近手動で処理を実行できるようになったそうです。
GitHub Actions: Manual triggers with workflow_dispatch
https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/
個人の小規模なアプリであれば、頻繁に更新することも少なく、自動ではなくこちらの任意のタイミングで実行できたほうがうれしいことがあると思います。
最近、作った鉄道路線当てクイズゲームWebアプリ「路線王」がまさにそんなアプリだったので、「workflow_dispatch」により手動でデプロイするようにしてみました。
路線王については、別の記事を作成していますので、よかったら見てみてください。
鉄道オープンデータ使ってクイズゲーム作りました
https://qiita.com/uedayou/items/4020d1daa92051fb2209
手動でのデプロイ方法
デプロイ準備
基本的に自動デプロイするときの設定と同じです。
GatsbyとGitHub PagesとGitHub Actionsで技術系イベントサイトを無料・爆速で作る方法
https://qiita.com/uedayou/items/903f44a8dd251463ce59
の以下の作業をあらかじめ行っておいてください。
その後、.github/workflows/gh-pages.yml を作成してリポジトリにpushします。
name: github pages
on:
workflow_dispatch:
branches:
- master
jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v2
- name: build
uses: actions/setup-node@v1
with:
node-version: '12.x'
- name: Cache dependencies
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Install
run: npm ci
- name: Build
run: npm run build
- name: deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./dist
※ https://github.com/uedayou/rosenoh/blob/master/.github/workflows/gh-pages.yml より
※ run, publish_dir 等はプロジェクトに応じて書き換えてください、Vue.js ならそのまま使えると思います。
※ React なら publish_dir: ./build としてください。
特定のブランチのpushをトリガーに自動デプロイしたい場合は
on:
workflow_dispatch:
branches:
- master
の部分を
on:
push:
branches:
- master
とすれば良いようです。
デプロイ実行
このままだとGitHub Pages にはビルドされないので、GitHubのリポジトリページからデプロイされるように操作します。
まず、「Actions」タブを開きます。
次に、「Workflows > github pages」を開きます。
「Run workflow」をクリックします。
最後に「Run workflowボタン」を押すと、GitHub Actions が実行できます。
路線王 のように頻繁に更新しないものであれば、workflow_dispatchトリガで手動で実行にされるようにしておいたほうがよいかもしれません。