create-react-appで作成したReactアプリをgh-pages無しでGitHub Pagesにデプロイする手順

  • 2022.01.07
  • Git
create-react-appで作成したReactアプリをgh-pages無しでGitHub Pagesにデプロイする手順
     

staticなサイトであれば簡単にデプロイできるGitHub Pagesですが、

create-react-appを使用したアプリをデプロイする際、少してこづったのでメモします。

検索すると、gh-pagesというライブラリを使用したデプロイ方法はたくさん出るのですが、

それを使わずにデプロイする方法が見当たらなかったので、そのような方の助けにもなれば。

前提

GitHub Pagesへのデプロイについて

単純にデプロイするだけであれば、公式のドキュメントを見れば概要は理解できるかと思います。

要約すると、

  1. 公開する任意のブランチを指定
  2. 公開するディレクトリ(/(root) または docs)を指定

となり、これだけで指定ブランチ(およびディレクトリ )のREADME.md、あるいはindex.htmlを表示するサイトが立ち上がります。

関係するライブラリ

今回関係する以下ライブラリについて整理しておきます。

  • gh-pages は、gh-pages というブランチを作成し、 gh-pages ブランチに指定のディレクトリをpushする、というライブラリ
  • create-react-appは、Reactアプリの作成、および開発用簡易サーバーの立ち上げ、コンパイルなどのコマンドのセットアップまで提供するライブラリ

gh-pagesを使わずにデプロイしたい理由

gh-pagesは非常に便利なライブラリで、私自身も使用していた為感謝しているのですが、

以下の理由から、使わずにデプロイしたいと思いました。

  1. mainブランチとgh-pagesブランチで管理内容が異なってしまう
    gh-pagesでデプロイをすると、指定のディレクトリのみgh-pagesブランチにpushされる為、
    mainブランチとgh-pagesブランチで管理内容が異なってしまうことが、少し気持ち悪かった。
    (例えばdevelopで開発し、mainにマージするなどができない。あるいは割とある運用なのでしょうか?)
  2.  mainブランチを公開対象としたかった
    以前は、GitHub Pagesとしてデプロイ対象に指定できるブランチはgh-pagesブランチのみだったようですが、
    前述の通り、最近のアップデートでgh-pages以外のブランチも指定できるようになった為、mainブランチを指定したかった。

本題

前提が整理できた為、

  • create-react-appを使用したReactアプリ
  • ただしgh-pagesは使用しない

という形でデプロイする方法について記載します。

リポジトリを作成

対象リポジトリを作成します。(手順は割愛)

注意としてはfreeユーザーの場合、publicリポジトリのみGitHub Pagesを利用可能な為、

publicとして設定すること。

create-react-appでReactアプリを作成

npx craete-react-app [project] [option(ex.--template typescript)]

npx craete-react-app my-app --template typescript

(以下、my-app を作成したものとして手順を記載)

プロジェクトに移動

 cd my-app 

リモートリポジトリを設定

git remote add origin [remote repogitory url]

package.jsonに homepage プロパティを追加

----
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://[author].github.io/[repo],
  "dependencies": {
----

最後に”/”はつけない事に注意。

ちなみにこの設定はGitHub Pagesの設定ではなく、create-react-appで作成したReactアプリの為の設定

build結果の出力先を変更

configを設定可能とする

create-react-appのデフォルト設定を変更します。

恐らくこの辺りが最重要です。

GitHub Pagesの公開先ディレクトリとして指定可能な [docs] ディレクトリにbuild結果を出力するように設定を変更します。

npm run eject
? Are you sure you want to eject? This action is permanent. › (y/N) y

buildの出力先パスを変更する

config > paths.jsの内容を変更(変更前)

const buildPath = process.env.BUILD_PATH || 'build';

config > paths.jsの内容を変更(変更後)

const buildPath = process.env.BUILD_PATH || 'docs';

アプリをコンパイル

npm run build

ここで docs ディレクトリに結果が出力されていることを確認します。

commit、リポジトリへpush

git add .
git commit
git push origin main

GitHub Pagesの設定

mainブランチ の docsディレクトリ を公開対象として設定します。

その後、GitHub側でデプロイ処理が行われます。

その他

公開ディレクトリを root にしても良いかと思ったのですが、index.htmlとREADME.mdが同階層に存在する場合、
README.mdが優先されるようで(※)、今回は /docs を指定しています。

※公式ソースは見つけられず

参考

create-react-appでbuild先のパスを変更する

Gitカテゴリの最新記事