「【React+TypeScript】Netflixのクローンを作るチュートリアル」github pagesへのデプロイでつまづいた

github pagesへのデプロイで、ちょっとつまづいたので備忘録

環境:React,Typescriptをviteで構築。
Vscodeエディタ

参考元

【React+TypeScript】Netflixのクローンを作るチュートリアル

Vite+ReactのプロジェクトをGitHub Pagesにデプロイする

つまづいた点

npm run build

してもひたすらエラーメッセージ。
エラー内容は割愛。（根本が間違っていたので）

原因と解決

原因

もともと「JS_practice」というフォルダ内で、勉強する項目ごとにフォルダ分けしていた。
↓こんな感じ

JS_practice
├ Netflix-clone_App
├ Memo_App
├ hogehoge_APP

で、github pagesにデプロイするには、それ専用のリポジトリを作らないといけない。（ローカルも）
githubで「Netflix-clone」というリポジトリを作成しローカルにクローン。

「よし！じゃあ”JS_practice/Netflix-clone_App”の中身をそのままローカルにぶち込めばいけるな」

これが間違い。これだと下記のようになる。

ローカルリポジトリ

Netflix-clone
├ Netflix-clone_Appの中身のファイルもろもろ
├ Netflix-clone_Appの中身のファイルもろもろ
├ Netflix-clone_Appの中身のファイルもろもろ
├ Netflix-clone_Appの中身のファイルもろもろ
.
.
.

この状態で
npm run build
するとエラーが出たのである。

解決

親フォルダを作成したらいけた

ローカルリポジトリ


Netflix-clone
├Netflix-clone(親フォルダ　名前はなんでもOK?)
 ├ Netflix-clone_Appの中身のファイルもろもろ
 ├ Netflix-clone_Appの中身のファイルもろもろ
 ├ Netflix-clone_Appの中身のファイルもろもろ
 ├ Netflix-clone_Appの中身のファイルもろもろ
.
.
.

無事デプロイできました

npm run build
npm run deploy

まとめ

まあおそらく、tsconfig.jsonあたりのなにかの参照パスの関係だと思う。
もっと精進しないといけないなと思いました。まる