ReactアプリをGitHub ActionsでPagesにCDする

• 個人で開発する分にはCodesandbox等々でもデプロイされたアプリをプレビューできますが、構成管理としてちゃんとリポジトリのmasterに入っている成果物の出来を確認しておきたいという場合や、チームで開発する場合には有効かと思います。
• アプリケーション、及びパイプラインの定義ファイルはこちらのリポジトリに格納しています。
  • https://github.com/soyjoy666666/react-experimental-app

はじめに

前提

• 環境
  • ローカル：Windows 10 Home
  • Gitリモートリポジトリ：GitHub
  • Reactアプリ開発環境：Codesandbox
    • ブラウザ上でコードの実装とリアルタイムプレビューができる開発環境です。GitHubとも連携できます。無料。
• 知識
  • Gitはわかる
  • GitHub Actionsがどんなものかはざっくり知っている
  • JS、ReactについてHello Wolrdレベルには知っている

実現したこと

• GitHubリポジトリのmasterブランチにReactアプリのソースコードをプッシュすると、それをトリガーにしてGitHub Pagesにアプリがデプロイされる（つまり変更を勝手にデプロイしてくれる）
  • Reactのアプリの中身自体はHello World程度です。
• PagesのURLにアクセスすると、デプロイされたアプリをブラウザから確認できる

やったこと

• CodesandboxでReactアプリを実装
• GitHubリポジトリの作成
• .github/workflowsにパイプラインを記述したyamlファイルを作成
• pagesで見えるようにするための作業
• 動作確認

CodesandboxでReactアプリを実装

• Codesandboxにアクセス
• Create Sandboxから、Reactのテンプレートを選択
• Hello World的なReactアプリが生成される
  • jsを編集して保存するとそのプレビューが即座に右側に表示されます。
• メニューからGitHubっぽいマークを選び、Export to new GitHub repositoryを選択。適当にリポジトリ名を入れるとGitHub側にリポジトリが作成され、ソースコード類が格納されます。

.github/workflowsにパイプラインを記述したyamlファイルを作成

アプリのソースコードのmasterブランチへのプッシュ・マージをトリガーとして、reactのビルド成果物をPagesに自動デプロイするための処理を作成します。
ここでやろうとしているのは、Reactアプリをyarn buildでビルドし、ビルド成果物フォルダをパブリッシュするという処理です。

• リポジトリ直下に、.github/workflows/deploy-to-pages.ymlを作成します。
  • ymlファイル名は任意です。
• 以下のような感じでdeploy-to-pages.ymlにパイプラインを定義します。

name: deployment to pages

# masterブランチへのプッシュをトリガー設定
on:
  push:
    branches: [ master ]


# 実行する処理の設定
jobs:
  build-deploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    steps:
      # ソースコードを取得
      - uses: actions/checkout@v2

      - name: setup node
        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('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-node-

      # パッケージのインストール
      - name: install
        run: yarn install

      # Reactアプリのビルド
      - name: build
        run: yarn build


      # ビルド成果物をpagesにデプロイ
      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

• 最後のデプロイステップで使っているpeaceiris/actions-gh-pagesは、GitHub ActionsでGitHub Pagesにデプロイすることに特化したアクションです。

pagesで見えるようにするため作業

GitHubでPagesを有効化

• 前準備としてGitHubでgh-pagesブランチを作成しておきます。
  • デプロイ時に使っているpeaceiris/actions-gh-pages@v3では、公開対象のビルド成果物をgh-pagesブランチに格納するので、その前準備としての作業です。
• GitHubリポジトリのsettings→GitHub Pagesで、gh-pagesブランチの公開を有効化します。
• これで、https://<ユーザーアカウント名>.github.io/<リポジトリ名>/にアプリが公開されます。
  • URLを変える方法はありますが、ここでは割愛し、デフォルトで生成されるURLを使います。

HTMLが外部のJSを読み込めるようにする

• HTMLが外部のJSを読みこむ際には、そのJSを相対参照で指定する必要があります。
• 元のReactアプリをそのままビルドすると絶対パスになってしまい、JSが読み込めません。
  • <script src="/./static/js/2.b06abf86.chunk.js"></script> ではだめで
  • <script src="./static/js/2.b06abf86.chunk.js"></script> と書かなければいけません。
• それを解消するために、package.jsonに以下のように"homepage": "./",を追記します。

{
（前略）
  "main": "src/index.js",
  "homepage": "./", 
  "dependencies": {
    "react": "16.13.1",
（後略）
}

動作確認

必要な設定が全て終わったので、動作を確認してみます。

• deploy-to-pages.ymlとpackage.jsonの変更をmasterブランチにプッシュします。

• 自動的にdeploy-to-pages.ymlに記述したパイプラインが走り出します。

  • それぞれのステップが、deploy-to-pages.ymlのname:属性で定義したものに対応しています。

• 正常に終了すると、gh-pagesブランチが生成され、そこにyarn buildの成果物が格納されます。

• しばらく待ってhttps://<ユーザーアカウント名>.github.io/<リポジトリ名>/にアクセスすると、Reactアプリの画面が表示されます。
  

• 試しにソースコードの一部を変更して、フォースと共にあらんことを祈ってみます。

  • Codesandbox上はこのようにプレビューされ、
  • プッシュすると、再びパイプラインが走り、

• Pagesにも自動的に変更が反映されます。