【React】【メモ】Reactのアプリをgithub-pagesにデプロイする

Reactで作成したアプリを手軽な環境にデプロイする方法のメモ。

環境

% node -v
v10.1.0

% yarn -v
1.6.0

公式ドキュメント

• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#github-pages
• 基本的に公式ドキュメントどおりにやればOK

gh-pagesをインストール

yarn add gh-pages --dev

package.jsonにデプロイ先のURLを指定する

"homepage": "https://<user_name>.github.io",

• github上のSettings > GitHub Pagesに表示されているURLをそのまま設定する

package.jsonに「redeploy」「deploy」コマンドを追加

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

• 「predeploy」コマンドは任意の場所にreactのアプリをコンパイルする
  • 上記は、create-react-appで作成されたアプリのためデフォルトのbuildコマンドでビルドしている
• 「deploy」コマンドの-dはビルド先のディレクトリ(index.htmlがある場所)を指定する

デプロイ

yarn deploy

• デプロイに成功すると「gh-pages」というブランチがgithub上にできる
  • ブランチを切り替えるとビルドディレクトリ配下のファイルがtopディレクトリに配置されている

github pagesの公開ブランチ設定を「gh-pages」に変更する

• github上からSettings > GitHub Pagesに行き、「Source」を「gh-pages」に変更しsave
• 数分後に設定したURLに表示されていることが確認できればOK

再デプロイ

yarn deploy again