ReactアプリをGithub Pagesにデプロイする方法

はじめに

Github Pagesを用いるとReactアプリを公開することができます。
備忘録も兼ねGithub Pageを使ったReactアプリの公開方法をまとめていきたいと思います。

Github Pagesの詳細につきましては下記公式サイトよりご確認をお願いします。
Github Pages公式サイト

手順

大まかに手順をまとめると以下の通りです。

1. 公開するReactアプリを作成
2. Githubに新しいリポジトリを作成する
3. 作成したリポジトリとReactアプリを連携する
4. Reactアプリをビルドする
5. コミット＆プッシュをする
6. Github Pagesの公開設定をする

1. 公開するReactアプリを作成

公開するReactアプリを作成し、PCに保管します。
ここでは、Dockerを用いてcreate-react-appでプロジェクトを作成する例を記載します。
※Dokcerを用いない場合は、node.jsをインストールし、
npx create-react-app <プロジェクト名>で作成可能です。

任意のディレクトリにDockerfileとdocker-compose.ymlファイルを作成し、
以下の通り記述します。
<プロジェクト名>にはtemplateのようにお好きなプロジェクト名をつけます。
(山括弧は不要)

Dockerfile

# ベースイメージの指定
FROM node:lts
# 作業ディレクトリの指定
WORKDIR /usr/src/app

docker-compose.yml

version: "3.9"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: .
        target: /usr/src
    command: sh -c "cd <プロジェクト名> && npm start"
    ports:
      - 3000:3000
    stdin_open: true

記述が終わりましたら、ビルドを行うため以下のコマンドを実行します。

terminal

$ docker-compose build

ビルドが完了しましたら、以下のコマンドを実行し、プロジェクトを作成します。

terminal

$ docker-compose run --rm app sh -c 'npx create-react-app <プロジェクト名>'

下記のように表示された場合はyを入力＆Enterを押下し、続行します。

terminal

Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y)

2〜3分ほど待ち、Happy hacking!が表示されれば、プロジェクトの作成は完了です。
以下のコマンドを実行し、localhost:3000にアクセスして、
以下画像のように表示されていれば問題ありません。

terminal

$ docker-compose up

2. Githubに新しいリポジトリを作成する

Githubアカウントにサインインして、画面右上の+のアイコンをクリックし、
New repositoryを選択します。
Githubアカウントをお持ちでない方は、こちらよりアカウントを登録します。

Create a new repositoryの画面の Repository name にリポジトリ名を記入し、
画面下部の Create repositoryを選択します。

下図のような画面が表示され、リポジトリが作成できていればOKです。

3. 作成したリポジトリとReactアプリを連携する

Dockerfileとdocker-compose.ymlファイルのディレクトリから
以下のコマンドを実行し、ディレクトリを移動します。
※Dockerを使用せずにcreate-react-app <プロジェクト名>で作成した場合は、
cd <プロジェクト名>でOKです。

terminal

$ cd app/<プロジェクト名>

ディレクトリを移動したら、以下のコマンドを実行し、Githubリポジトリにプッシュします。

terminal

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/ユーザー名/template.git
$ git push -u origin main

4. Reactアプリをビルドする

package.jsonに以下の内容を追記します。
<Githubアカウント名>にはご自身のGithubアカウント名を、<リポジトリ名>には作成したリポジトリの名前を入れます。
(いずれも山括弧は不要)

package.json

{
+ "homepage": "https://<Githubアカウント名>.github.io/<リポジトリ名>/",
  "name": "<プロジェクト名>",
  "version": "<バージョン>",
  "private": true,

// 省略

  "scripts": {
+   "deploy": "rm -rf docs && npm run build && mv build docs",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

追記が完了しましたら以下のコマンドを実行して、
Dockerfileとdocker-compose.ymlファイルがあるディレクトリに移動し、
docker-composeコマンドを実行します。
※Dockerを使用していない場合は、ディレクトリを移動せず単にnpm run deployで問題ありません。

terminal

$ cd ../..
$ docker-compose run --rm app sh -c 'cd <プロジェクト名> && npm run deploy'

5. コミット＆プッシュをする

以下のコマンドを実行し、プロジェクトのディレクトリに移動し、コミット＆プッシュをします。

terminal

$ cd app/<プロジェクト名>
$ git add .
$ git commit -m "build"
$ git push -u origin main

6. Github Pagesの公開設定をする

Settingタブを選択します。

左サイドバーにあるCode and automationの Pages を選択します。

Noneを選択し、公開用ブランチを選択します。

フォルダを選択し、公開用のディレクトリを選択します。

最後にSaveを選択します。

数分程度待つとデプロイされ、公開したWebページのURLが表示されます。
URLにアクセスすると、作成したReactアプリを確認することができると思います。

最後に

以上がGithub Pagesを用いたReactアプリの公開手順となります。
Github PagesでReactアプリを手軽に公開することができ、便利だと感じました。
皆さんもぜひGithub Pagesを使って、作成したReactアプリを公開されてみてはいかがでしょうか。

参考文献