GitHub Actionsを使ってGitHub PagesにReactアプリを公開する

5188 ワード
React GitHubActions github-pages github-pages テキストリンク

背景・動機

先日、以下の記事で簡単なReactアプリを開発した話を投稿しましたが、masterへpushで簡単にデプロイしたいなと思いはじめました。
https://qiita.com/nouka/items/a4c25ce685294dc17ce3

  • スマホにインストールしたGitHubクライアントアプリで、通勤中に開発したいと思った。
  • GitHub Actionsの勉強のため。
  • Advent Calendarのネタのため。

事前準備

1. 秘密鍵、公開鍵を生成

以下のコマンドを実行し秘密鍵と公開鍵を生成します。

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

参考：https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d

2. gh-pages.pub(公開鍵)をDeploy keysに登録

生成したgh-pages.pub(公開鍵)をリポジトリの[Settings]->[Deploy keys]->[Add deploy key]から登録します。

3. gh-pages(秘密鍵)をSecretsに登録

gh-pages(秘密鍵)はリポジトリの[Settings]->[Secrets]->[Add a new secret]からACTIONS_DEPLOY_KEYという名前で登録します。

ワークフローを設定

リポジトリの.github/workflowsディレクトリに任意の名前のymlファイルを生成します。
今回はbuild.ymlというファイルを作成します。内容は以下の通りです。

.github/workflows/build.ymlの内容

# ワークフローの名前
name: Release GitHub Page

# 起動のタイミング
# 今回はmasterブランチへのpush
on:
  push:
    branches:
      - master

# ジョブの定義
jobs:
  build:
    # 実行するインスタンス
    runs-on: ubuntu-latest

    # nodeのバージョン一覧
    strategy:
      matrix:
        node-version: ['12.x']

    # 各ステップの実行
    steps:

    # チェックアウト
    - uses: actions/checkout@v1

    # 使用するnodeのバージョンを指定
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    # パッケージのインストールとアプリのビルド
    - name: install and build
      run: |
        npm ci
        npm run build
      env:
        CI: true

    # gh-pagesを使って公開
    - name: deploy
      uses: peaceiris/actions-gh-pages@v2
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        PUBLISH_BRANCH: gh-pages
        PUBLISH_DIR: ./build

これでmasterブランチにpushすれば、ワークフローで定義した通りコンテナが起動し、アプリを公開してくれます。
GitHub Actionsを使えば、lintやユニットテストもGitHubだけで実行できそうなので、今度やってみたいと思います。