はじめに
まず自己紹介
React を中心に勉強中で、能力はほとんど初心者です。
プログラミングスクールを卒業し、自分で復習がてら、アプリケーションを作成しているところです。
この記事をきっかけ
ローカルでは動くアプリケーションを作ったので、それを公開したい！
しかしどうも、インフラ周りに苦手意識があり、構築に時間がかかってしまいました。また、少々、公開するまでの行程にややこしさを感じました。このため、自分の備忘のためにも記事を書こうと思いました。
当然ながら、先達様方の記事に助けて頂きました。
前提
- 作成したアプリケーションはReactで作成(create-react-app)したものです。
- プロジェクトは、GitHubにプッシュ済です。
- GitHub へのデプロイと公開設定
- README.md ではなくて index.html を表示させる
- ※注意ポイントに、
網掛けを施しています。
私が行った手順(NG)
私の試行錯誤となります(お恥ずかしい)。最終結果は 「まとめ」 まで。
アプリケーションについて
React で作成した簡易なものです。
README.md に、自分の行った改修などを都度更新して、プッシュしていました。
GitHub Pages 公開！
GitHub : 公開したいリポジトリ > (上メニュー)Settings > (左メニュー)Pages
スクールでGitHubの公開をしたことを覚えていました。
Source で、初期値 "None" から、公開したい Branch を選びました。
また、隣のディレクトリは "(root)" を選びました。
package.json 追記！
↓設定を追記しました。
{
...(略)...
"homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
...(略)...
"scripts": {
...(略)...
"rm": "rm -rf docs",
"mv": "mv build docs",
"git": "git add . && git commit && git push origin main",
"deploy": "yarn run rm && yarn run build && yarn run mv && yarn run git"
}
}
git commitが注意ポイントです。
package.json への設定はものの見事に忘れていました。下記を参照いたしました。
これで、コマンドで yarn deploy を実行して、デプロイを行います。
！エラー！ Command failed with exit code 1
↓実行結果のエラー記載部分
$ mv build docs
$ git add . && git commit'' && git push origin main
Aborting commit due to empty commit message.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Aborting commit due to empty commit message.
= 空のコミットメッセージのためにコミットを中止します。
ならばメッセージをつけようと、package.json を修正。
- "git": "git add . && git commit && git push origin main",
+ "git": "git add . && git commit -m 'deploy' && git push origin main",
これでエラーはなくなり、プッシュまで正常に動きました。
GitHub Pages で発行されたURLにアクセス！
アクセスするURLは、↓になります。
- package.json で追記した "homepage"
"homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
- GitHub の Pages 設定画面の上部 "Your site is published at" のリンク
ところが・・・
README.md の内容が表示されるばかりです。
幾つかの記事で調べ回った結果、表示される優先度があるようです。
index.html と README.md がルートにあった場合、README.md が優先されるようです。
勉強になります。。
・・・まあ、私はそれ以前の問題で表示ができていませんでしたがね・・・
というのも、
プロジェクトをはじめに作成する際、create-react-app のボイラープレートを利用しました。
この時、publicフォルダが作成され、index.html はここに配置されます。
そして、GitHub Pages の設定の時に、参照するフォルダ先を "(root)" にしていました。
・・・はい。ルートではありません！
対応
-
GitHub Pages の設定画面で、"/docs" を選択。
-
ドキュメントディレクトリに /docs があること、/docs に index.html があることを確認
-
再び、GitHub Pages の URL にアクセス
-
表示したいアプリケーションが出ました！
まとめ
- プロジェクトが作成されている
- GitHub にプッシュ済
のプロジェクトを GitHub Pages から公開するとき
🌟 package.json に追記する
{
...(略)...
"homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
...(略)...
"scripts": {
...(略)...
"rm": "rm -rf docs",
"mv": "mv build docs",
"git": "git add . && git commit -m 'deploy' && git push origin main",
"deploy": "yarn run rm && yarn run build && yarn run mv && yarn run git"
}
}
🌟 GitHub の Pages の設定を行う
GitHub : 公開したいリポジトリ > (上メニュー)Settings > (左メニュー)Pages
- Branch を公開したい先に変更
- Branch の隣のディレクトリを "/docs" に変更
＊ローカルで、ドキュメントディレクトリに /docs と、/docs/index.html があることを確認
これで公開が行えました。
さいごに
公開はできましたが、ベストプラクティスではないと思います。（⇦
特に、index.html 周りはもやもやしてます。/public と /docs で二重管理みたいになってる。。。
私自身がもっと勉強が必要だと反省するところです。