はじめに

まず自己紹介

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 で二重管理みたいになってる。。。
私自身がもっと勉強が必要だと反省するところです。