はじめに
タイトル通り、GitHub Pagesを使用してReactアプリをデプロイしようとしたら上手くいきませんでした。
原因を一言で言うと、Gitのリポジトリのルートディレクトリの直下に docs ディレクトリがないせいです。
詳しい原因と対応策について書いていきます。
手順
基本的に以下の記事を参考にさせていただきました。
ただし、以下のような相違点がありました。
- Dockerを使っていないこと
- 作業ディレクトリが、既存のリポジトリのルートディレクトリの孫ディレクトリである
1点目は問題ないです。
問題は2点目です。何が悪いのか、具体的に手順を書いていきます。
以下は誤った手順です。
この通り実行しても上手くデプロイできませんのでご注意ください。
0. 前提
Gitのstudyリポジトリを git_root_dir ディレクトリに紐づけています。
git_root_dir/
1. Reactアプリを作成
git_root_dir ディレクトリ直下に React ディレクトリを作成し、移動します。
$ mkdir React
$ cd React
Reactアプリを作成します。
$ npx create-react-app react-practice
この時点でのディレクトリ構成は以下の通りです。
git_root_dir/
└ React/
└ react-practice/
動作確認のため、Reactアプリを起動します。
$ npm run start
ブラウザで http://localhost:3000/ にアクセスすると、無事に動作しています。
2. package.jsonの修正
ビルドのために package.json に設定を追加します。
{
+ "homepage": "https://<GitHubアカウント名>.github.io/<リポジトリ名>/",
"name": "<Reactアプリ名>",
"version": "0.1.0",
"private": true,
// 中略
"scripts": {
+ "deploy": "rm -rf docs && npm run build && mv build docs",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
// 後略
}
3. ビルド
react-practice ディレクトリで以下のコマンドを実行します。
$ npm run deploy
react-practice ディレクトリ直下に公開用の docs ディレクトリができます。
4. add, commit, push
デプロイするためにGitにpushします。
$ git add .
$ git commit -m "<コミットメッセージ>"
$ git push
5. GitHub Pagesの設定
GitHubのstudyリポジトリのページを開き、Settingを開きます。
Pagesを選択します。
Branchを選んだ後、Select folderで /docs を選択し、Saveを押します。
成功していたら...
デプロイが正常に完了していれば、数分経つとVisit siteからデプロイしたアプリへと遷移でき、正常に表示されます。
失敗、そして原因
が、今回は失敗しました。
Actionsから詳細を見ていきます。
失敗したデプロイ結果をクリックします。
エラーメッセージを見ます。
見にくいですが、エラーメッセージの最後に以下のように表示されています。
Error: No such file or directory @ dir_chdir - /github/workspace/docs
Select folderで /docsを指定したけど、docsディレクトリがないので怒られています。
前述した通り、studyリポジトリのルートディレクトリは git_root_dir になっています。
git_root_dir/
└ React/
└ react-practice/
└ docs/ ← ここにdocsがある
なので、デプロイするときに git_root_dir ディレクトリの直下に docs ディレクトリを置く必要があり、現状はそうなっていないのでエラーになってしまいます。。
試行錯誤
docs ディレクトリの位置は動かしたくなかったので、なんとかgit_root_dir/React/react-practice/を基準にしてdocsを認識させられないかと、packeage.jsonを以下のように変更してみたのですが、同じエラーメッセージが出てしまい、効果はありませんでした。。
{
+ "homepage": "https://<GitHubアカウント名>.github.io/<リポジトリ名>/git_root_dir/React/react-practice/",
// 後略
}
対応策
ルートディレクトリの直下に docs ディレクトリを配置できない/したくない場合、gh-pagesというパッケージを使用するデプロイ方法を採ります。
こちらはディレクトリの配置場所に関わらずデプロイが可能です。
手順は以下を参照させていただきました。
終わりに
今回は結局 gh-pages パッケージを利用する方法でデプロイしました。
もし他に何か良い対応策がありましたら、コメント欄で教えていただけますと幸いです！
参考