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

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

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

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

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

前提

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

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

GitHub Docs

 

1 user

Configuring a publishing source for your GitHub Pages site - GitHub Docs

https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

If you use the default publishing source for your GitHub Pages site, your site will publish automatically. You can also choose to publish your site from a different branch or folder.

要約すると、

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アプリの為の設定

create-react-app.dev

Deployment | Create React App

https://create-react-app.dev/docs/deployment/#building-for-relative-paths

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents o...

build結果の出力先を変更

configを設定可能とする

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

create-react-app.dev

Available Scripts | Create React App

https://create-react-app.dev/docs/available-scripts/#npm-run-eject

In the project directory, you can run:

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

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 を指定しています。

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

teratail[テラテイル]

 

2 users

GitHub Pages で README.md が index.html より優先されない方法｜teratail

https://teratail.com/questions/269256

前提・実現したいことGitHub Pages にて、 README.md が index.html より優先されない方法はありますか？ 試したこと元々、README.mdが優先されることを気に障っていましたが、docsのディレクトリに移す

参考

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

Qiita

 

3 users

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

https://qiita.com/yakimeron/items/7a4f8d9e70a4a2b1b96b

概要React は環境構築が非常に面倒なイメージがありますが、つい最近 Facebook が作った create-react-app を使うと一瞬で環境構築が出来ます。詳しくは下記の記事が参考になります。Facebook...