More than 3 years have passed since last update.

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

Last updated at 2020-10-18Posted at 2020-10-18

個人で開発する分には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にパイプラインを定義します。

.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": "./",を追記します。

.json

{
（前略）
  "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にも自動的に変更が反映されます。