無料!Reactで作ったサイトやアプリを公開・自動更新する方法【Github Pages】

こんにちは!かたつむり(@Katatumuri_nyan)です!
最近、Reactでコードのデモサイトを作ったのですが、せっかくなのでそちらをデプロイ(公開)してみました♪

  • Reactで作ったサイトの公開の仕方が分からない
  • コードを編集したら、自動的にサイトも更新してほしい
  • できれば無料で公開したい

こんな風に思っていたら、読んでみる価値あるかもです(*´ω`)

この記事では、Reactで作ったサイト・アプリをデプロイ(公開)・自動更新する方法を紹介します!

GitHubというサービスのGitHub PagesGitHub Actionsという機能を使います。
いずれも無料プランの範囲内でできるので、ぜひ試してみてください♪

それでは、詳しく説明していきます!

やりたいこと

  • GitHubでmainブランチにmergeした時にReactサイトが公開・自動更新されるようにしたい

今回行う方法は、既にReactサイトをGitHUb Pagesに公開している方でも使えます!

環境

  • ソースコードをGitHubで管理
  • GitHubに公開リポジトリがある
  • DockerでNode.jsの環境構築
  • create-react-appでReactアプリのひな形作成
  • サブディレクトリにReactのコードがある

※GitHubに登録済み・Reactで作ったサイト・アプリのリポジトリがあるものとして説明していきます!
※無料で公開するにはリポジトリの公開設定をpublicにしておいてください

ローカルのディレクトリ(ファイル)構造

DirectoryStructure
ローカルのrootにはreact-appなどのReactのディレクトリがあります!

GitHubのリポジトリのディレクトリ構造

DirectoryStructure_GitHub

GitHubのrootにはreact-appなどのReactのディレクトリがあります!

Reactで作ったサイトを公開・自動更新する方法の手順

  1. package.jsonの編集
  2. Actionsの設定
  3. workflowの作成
  4. gh-pages.ymlファイルの編集
  5. GitHub Pagesの設定
  6. デプロイ(公開)!

それでは、早速準備を進めていきましょう!

1. package.jsonの編集

まずは、package.jsonにホームページやコマンドの設定を書いていきます。
ここで書いたコマンドをGitHub Actionsで使います。

{
  "name": "my-react-app",
  "version": "0.1.0",
  "homepage": "https://${ユーザ名}.github.io/${リポジトリ}", // ここに追加
  "dependencies": {
    // …省略
  },
  "scripts": {
    "deploy": "npm run build && gh-pages -d build", // ここに追加
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

↑これは、package.jsonの上の方に記載があります!

"homepage": "https://${ユーザ名}.github.io/${リポジトリ}", // ここに追加

https://${ユーザ名}.github.io/${リポジトリ}にはGitHub PagesのURLを入れてください(*´ω`)

"deploy": "npm run build && gh-pages -d build", // ここに追加

↑これはこのまま書いちゃってOKです。

Create React App Deployment

2. Actionsの設定

次に、GitHub Actionsの設定をしていきます!
GitHub Actionsの機能を使って、公開・自動更新機能を作成しちゃいます(*´ω`)

1. workflowの作成

Actionsのタブから新しくworkflowを作成していきます。
GitHubActions

GitHubActions_new

2. ymlファイルの編集

workflowのファイルを作成します!
今回は、gh-pages.ymlって名前にしましたw

yml_ini

↑この中身を↓のコードに書き換えます!

name: github pages

on:
  pull_request:
    branches:
      - main
    types:
      - closed

jobs:
  deploy:
    runs-on: ubuntu-18.04
    env:
       working-directory: ./my-react-app
       SUPER_SECRET: ${{ secrets.SuperSecret }}
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '16'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install gh-pages
        run: npm i gh-pages --save-dev
        working-directory: ${{env.working-directory}}

      - name: Deploy with gh-pages
        working-directory: ${{env.working-directory}}
        run: |
          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
          npm run deploy -- -u "github-actions-bot <support+actions@github.com>"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

コードの説明を簡単にしていきます!

ワークフローに名前をつける

name: github pages # ワークフロー全体の名前

これは単純にワークフローに名前をつけています(*´ω`)
自動公開・更新機能の名前だと思っておいてください

ワークフロー発動条件の設定

on:
  pull_request:
    branches:
      - main

↑これで、mainブランチにプルリクエストがきた時に発動するという意味になります。

    types:
      - closed

↑は、プルリクエストがクローズした時という意味です。
合わせると、プルリクエストが来てクローズした時、に発動するってことになります。

mergeされなかったときもされたときもクローズしたことになるので、mergeの有無に関わらず発動はします。

mergeされたときにだけ発動してほしい時は、条件を書くという方法もあります。
GitHub Actions でプルリクのマージでワークフローを実行する

ワークフローの基本の設定

jobs:
  deploy:
    runs-on: ubuntu-18.04 # ubuntuを使う
    env:
       working-directory: ./my-react-app # my-react-appディレクトリのなか処理を行う
       SUPER_SECRET: ${{ secrets.SuperSecret }} # シークレットキーを使う
    steps:
      - uses: actions/checkout@v2 # ブランチをチェックアウトする

↑ここでワークフローの基本の設定をしています。
working-directory: ./my-react-app./my-react-appの部分は、Reactが入っているディレクトリにご自身で設定してください!

NodeをGitHub上にインストール

- name: Setup Node  # ワークフローの名前
  uses: actions/setup-node@v2 # setup-node@v2を使う設定
  with:
    node-version: '16' # Nodeのバージョン設定

最初に、Setup Nodeというワークフローを走らせます!
NodeをGitHub上にインストールするみたいですねえ~すごいなぁ。

キャッシュを使う設定

- name: Cache dependencies
  uses: actions/cache@v2 # キャッシュを使うよ
  with:
    path: ~/.npm # npmの場所の指定
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} # 'package-lock.json'を設定
    restore-keys: | # キャッシュを見つけるために使われる代理キー
      ${{ runner.os }}-node- 

キャッシュを使う設定をしています。
スピードが上がるんだなぁくらいに思っていますw
依存関係をキャッシュしてワークフローのスピードを上げる

gh-pagesをインストール

- name: Install gh-pages
  run: npm i gh-pages --save-dev # gh-pagesのインストール
  working-directory: ${{env.working-directory}} # gh-pagesをインストールするディレクトリの設定。上の方で設定したmy-react-appディレクトリの場所を呼び出しています。

GitHub上にインストールしたNode.jsにgh-pagesをインストールしていきます。

デプロイ(公開)の設定

- name: Deploy with gh-pages
  working-directory: ${{env.working-directory}} # 以下のコマンドを実行するディレクトリの設定
  run: | # 実行するコマンド(リポジトリの設定・デプロイ)
    git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
    npm run deploy -- -u "github-actions-bot <support+actions@github.com>"
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKENの設定

↑いよいよここでデプロイ(公開)の設定をしていきます。

git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git

↑で、gitリポジトリを設定しています。こう書くと自動で認識してくれます!
GitHub Actionswを使用する場合、必要な工程だそうです。

npm run deploy -- -u "github-actions-bot <support+actions@github.com>"

↑でpackage.jsonに書いた"deploy": "npm run build && gh-pages -d build",が実行されます。

Github ActionのヒントをREADME #368に追加します

gh-pages

2. ymlファイルのコミット

picture 1

ymlファイルの編集ができたら、Start commitのボタンからコミットメッセージを入力してCommit new fileでコミットします。

3. GitHub Pagesの設定

GitHub Pagesを公開する初期設定をしていきます。

picture 2

リポジトリの中のSettingPagesがあると思うので、そこをクリックするとこの画面になります!

picture 3

↑のブランチの設定をgh-pagesにしてSaveしたらOKです✨

デプロイ(公開)!

実際にmainブランチにmergeして、公開を確認してみましょう~!
公開できていればOKです(*´ω`)

GitHub Pagesの反映にちょっと時間がかかるので、1時間くらい待ってみて確認してみてください✨

他にも、参考にした文献を↓の記事で紹介しています。
React*サイトを公開するときの疑問と調べた結果まとめReact*サイトを公開するときの疑問と調べた結果まとめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です