SPAをGitHub ActionsでGitHub Pagesにデプロイ(手動編)

以前、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アプリ「[路線王](https://rosenoh.uedayou.net/)」がまさにそんなアプリだったので、「workflow_dispatch」により手動でデプロイするようにしてみました。

路線王については、別の記事を作成していますので、よかったら見てみてください。

鉄道オープンデータ使ってクイズゲーム作りました
https://qiita.com/uedayou/items/4020d1daa92051fb2209

# 手動でのデプロイ方法

## デプロイ準備

基本的に自動デプロイするときの設定と同じです。

GatsbyとGitHub PagesとGitHub Actionsで技術系イベントサイトを無料・爆速で作る方法
https://qiita.com/uedayou/items/903f44a8dd251463ce59

の以下の作業をあらかじめ行っておいてください。

1. [サイト公開](https://qiita.com/uedayou/items/903f44a8dd251463ce59#%E3%82%B5%E3%82%A4%E3%83%88%E5%85%AC%E9%96%8B)
2. [秘密鍵・公開鍵作成](https://qiita.com/uedayou/items/903f44a8dd251463ce59#%E7%A7%98%E5%AF%86%E9%8D%B5%E5%85%AC%E9%96%8B%E9%8D%B5%E4%BD%9C%E6%88%90)
3. [公開鍵を登録](https://qiita.com/uedayou/items/903f44a8dd251463ce59#%E5%85%AC%E9%96%8B%E9%8D%B5%E3%82%92%E7%99%BB%E9%8C%B2)
4. [秘密鍵を登録](https://qiita.com/uedayou/items/903f44a8dd251463ce59#%E7%A7%98%E5%AF%86%E9%8D%B5%E3%82%92%E7%99%BB%E9%8C%B2)

その後、`.github/workflows/gh-pages.yml` を作成してリポジトリにpushします。

```yaml:.github/workflows/gh-pages.yml

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をトリガーに自動デプロイしたい場合は

```yaml
on:
  workflow_dispatch:
    branches:
      - master
```

の部分を

```yaml
on:
  push:
    branches:
      - master
```

とすれば良いようです。


## デプロイ実行

このままだとGitHub Pages にはビルドされないので、GitHubのリポジトリページからデプロイされるように操作します。

まず、「Actions」タブを開きます。

![Actionsタブ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62575/9dc9691d-1d38-3ab9-f05a-464d6602185d.jpeg)


次に、「Workflows > github pages」を開きます。

![Workflows > github pages](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62575/11898c5d-cf6d-2b3c-855b-ffff74d72ee2.jpeg)


「Run workflow」をクリックします。

![Run workflow](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62575/6f7aae24-3f6d-262f-6615-1383c3bce71e.jpeg)


最後に「Run workflowボタン」を押すと、GitHub Actions が実行できます。

![Run workflowボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62575/e852fc35-8d5b-985f-d808-c251d2d06d83.jpeg)


![実行中](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62575/5bc2ace3-5924-93bb-2449-61e2c12fae0e.jpeg)


[路線王](https://rosenoh.uedayou.net/) のように頻繁に更新しないものであれば、`workflow_dispatch`トリガで手動で実行にされるようにしておいたほうがよいかもしれません。