はじめに

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

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

手順

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

公開するReactアプリを作成
Githubに新しいリポジトリを作成する
作成したリポジトリとReactアプリを連携する
Reactアプリをビルドする
コミット＆プッシュをする
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アプリを公開されてみてはいかがでしょうか。

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

はじめに

手順

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

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

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

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

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

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

最後に

参考文献