【React】React AppをGitHub Pagesでデプロイする(2021年9月)

はじめに

Reactで作成したWebアプリをGitHub Pagesでデプロイする際に結構躓いたので，こうすると出来たよという現時点での情報を備忘録として残す。

環境

• Windows

完成品

https://fk-ln.github.io/react-test/
とりあえずデプロイの手順だけを示すので，使うリポジトリはnpx create-react-appで作成したデフォルトのサンプル。

手順

1. GitHubでリポジトリを作成してmain(master)リポジトリにpush
2. ローカルリポジトリでnpm install gh-pages --save-dev
3. package.jsonを開いて以下を追記(/と/Scripts/の二か所)

{ 
  ~省略~

  "homepage": "https://fk-ln.github.io/tdu-new-school/",
　※GitHubの`Settings`→`Pages`に表示されるURLをコピペ

  ~省略~

 "Scripts": {

    ~省略~

    deploy": "npm run build && gh-pages -d build",
  }

  ~省略~
}

1. npm run buildを実行
2. GitHubのSettings→PagesでBranchをgh-pages，フォルダを/(root)に設定

これで先ほど設定した(package.jsonに書いた)URLにアクセスするとアプリが使えるはず。(反映に数分かかるかも)

gh-pages

gh-pagesというnpmパッケージではソースコードをコンパイルしてbuildフォルダを作成し，それをgh-pagesブランチにpushしてくれる。

躓いた点

1. package.jsonに"homepage": を書いていなかった
   　→どうやらデプロイ先のURLは明示的に示す必要があるっぽい
2. 操作にWindows Powershellを使っていた
   　→npm run buildではGitHubにpushする作業が行われるのでgit bashなどのgitコマンドを使える環境で行う。