ReactアプリをGitHub Pagesで公開する方法

ここしばらくReactの勉強をしており、その際に作成したReactアプリをGitHub Pagesで公開をしてみました。 その公開までの方法をまとめていきたいと思います。

1. GitHubリポジトリを作成

まず、公開したいReactアプリを格納するGitHubリポジトリを作成します。
このとき、リポジトリは「public」(公開)としてください。

2. パッケージのインストール

gh-pagesというnpmパッケージをインストールします。
gh-pagesは、ReactアプリをGitHub Pagesにデプロイするために必要なパッケージです。

公開するReactアプリのpakage.jsonが存在するフォルダ下で、下記のコマンドを実行します。

npm install gh-pages --save-dev

3. package.jsonの編集

公開するReactアプリの、package.jsonファイルにフィールドを追加します。

homepageフィールドの追加

"homepage": "https://[リポジトリを作成したGitHubのユーザー名].github.io/[作成したリポジトリ名]/"

scriptsフィールドに追加

各種スクリプトを記述しているscriptsフィールドにデプロイ用のスクリプトを追加します。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    // 下記を追加
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

4. deployスクリプトを利用してReactアプリのビルドとデプロイを実施

公開するReactアプリのpakage.jsonが存在するフォルダ下で、下記のコマンドを実行します。
コマンドを実行すると、Reactアプリのビルドとデプロイが行われます。

npm run deploy

実行が成功すると、Publishedと表示されます。

5. GitHubリポジトリの設定

デプロイが完了したら、作成したリポジトリにgh-pagesブランチが作成されています。 このブランチを使用し、GitHub PagesでReactアプリが表示できるようにリポジトリの設定をします。

作成したGitHubリポジトリにアクセスして、"Settings" > "Pages"に移動します。

リポジトリ画面

Settings画面

"Source"をDeploy from a branchとして、"Branch"にgh-pagesブランチを選択して"Save"ボタンを押して設定します。

Pages画面

6. 公開されたReactアプリを確認

反映に少し時間がかかりますが、5の設定をしたあとしばらくしてから、3で設定したhomepageフィールドのURL(https://[リポジトリを作成したGitHubのユーザー名].github.io/[作成したリポジトリ名]/)に接続すると、Reactアプリが表示されます！

まとめ

以上がReactアプリをGitHub Pagesで公開する方法でした。

参考