ReactプロジェクトをGithub Pagesでデプロイ

目的

Reactでポートフォリオを作ったのでGithub Pagesで簡単にデプロイしたい

環境

macOS Ventura 13.4
npm 10.4.0
node v20.11.1

*gh-pagesというnpmパッケージも存在しますが, 今回は使用していません. こっちを使えばもう少し簡単にできた気がするので今度実験してみます.

下準備

Githubアカウントを作成
Github上でリポジトリを作成

Reactのプロジェクト作成

npx create-react-app <フォルダ名>を実行
cd <フォルダ名>で該当フォルダに移動

Github上のリモートリポジトリとローカルのリポジトリを連携

git remote add origin git@github.com:<githubのユーザー名>/<リモートリポジトリ名>.gitを使用して, Github上のリモートリポジトリとローカルのリポジトリを連携します.

Package.jsonを編集

"dependencies": {
    //省略
    "homepage": "https://<githubのユーザー名>.github.io/<githubのリモートリポジトリ名/"
},
  "scripts": {
    //省略
    "rm": "rm -rf docs",
    "mv": "mv build docs",
    "deploy": "npm run rm && npm run build && npm run mv"
  },

上のように記述することで簡単にデプロイができるようになります. Githubへのpushを自動化するのは好みだと思います. 私は個別でpushしていますが, 不都合があればご教示下さい.

Github Pagesの有効化

Github Pagesの設定をしていきます.

左カラムのメニューからPagesを選択し, SourceをDeploy from a branch, Branchをmain/docsに切り替えてSaveを押します.

Reactプロジェクトの編集

ここでは触れませんがsrcの中のファイルを編集して, 必要なウェブサイトを作成して下さい.

実際にデプロイする

npm run deployを実行すればビルドをしてくれるので, それをGithubにpushすればOK....というわけではなさそうです.

自動生成されたreactのプロジェクトのデプロイだけしたい！という場合なら↑のコマンドだけでOKなのですが, それだけで済む場合ってあまりないので....

実際, pushしたあとに生成されたURLに訪れてみても, 真っ白なページが出るだけで何もありません. ローカル環境ではnpm startでしっかり表示されるのに...？

URLで表示される真っ白なページを検証ツールで見てみると404エラーを吐いています. そもそもファイルが見つけられていないから表示できていないようです.

docs/index.htmlを編集する

deployをした際に生成されたdocs/index.htmlを見てみると, いろいろなファイルを呼び出していることがわかります. しかし生成されたパスを見てみると, それらすべて絶対パスになっているので, Github Pagesでは認識してくれないのです....(ユーザー名.github.ioのレポジトリで作成できるGithub Pagesでは, この問題は発生しないらしいです. 参考: https://neos21.net/blog/2019/09/18-02.html)

なのでやるべきこととしては, 該当パスをすべてindex.htmlからの相対パスに書き換えてあげればOKです.

<link rel="icon" href="/<フォルダ名>/logo.svg" />
は, このように修正↓
<link rel="icon" href="<フォルダ名>/logo.svg" />

(あとなぜか私の環境だとstylesheetも読み込めていなかったのでそこの記述はすべて消しました. )

すべて修正できたら, deployコマンドは実行せずにGithubにpushし, Github Actionがうまく実行されていればOKです.

Appendix: 画像が表示されない

URLで文字は表示されるようになったのに, 画像が表示されない.... という問題に苦しめられたのでメモ書きです.

調べてみると, Publicにsrc/assets/imgフォルダを移せば上手くいく場合があると書いてあったので移してみましたが撃沈. パスの指定に問題があるとまではわかるのですが, どうしても解決できず... (もっとドキュメントを読むべきです)

強引な解決方法ですが, Githubに画像をPushし, そのリンクをコピーしプロジェクト内に埋め込むことで解決しました. 表面上は動いていますがまだこちらは未解決なのでもう少し努力をしたいと思います.

参考

https://qiita.com/tat_mae084/items/745761eee6cd1d42949d

はやぶろ

俺やで