firebaseでindex.html 以外のファイルが反映されない

Question

前提・実現したいこと

YouTubeで勉強して、初めてポートフォリオを作成しました。
Firebaseでポートフォリオをデプロイしようとしています。
そこで、firebaseにおいてindex.html以外のファイルのデプロイ方法が知りたいです。

####現状
index.htmlのみデプロイされており、他のファイル（.jpg / .css）がサイトに反映されない。ローカルではきちんと見れる。

デプロイ参考にした記事

• Firebaseの始め方
• FirebaseでWebサイトを無料でサクッと公開してみる
• Firebaseでサイトを公開する方法を初心者目線で解説します！ - Qiita

発生している問題・エラーメッセージ

.
├── firebase.json
└── public
    ├── 404.html
    ├── img
    │   ├── IMG_4324.jpg
    │   ├── dev-219413-unsplash.jpg
    │   └── thumb_soon.jpg
    ├── index.html
    └── style.css

VScodeでコビーした絶対パス
<link rel="stylesheet" href="/Users/USER/Desktop/LeoPort/public/style.css"/>

IMG_4324.jpg:1 Failed to load resource: the server responded with a status of 404 ()
thumb_soon.jpg:1 Failed to load resource: the server responded with a status of 404 ()
style.css:1 Failed to load resource: the server responded with a status of 404 ()
thumb_soon.jpg:1 Failed to load resource: the server responded with a status of 404 ()
/favicon.ico:1 Failed to load resource: the server responded with a status of 404 ()
style.css:1 Failed to load resource: the server responded with a status of 404 ()

試したこと

おそらくパスがおかしいと思うのですが、VScodeで絶対パスをコピーしただけです。
firebaseにおいてindex.html以外のファイルのデプロイ方法が知りたいです。

他に試したこと

• 画像タグのパスの確認（絶対パスのコビぺ ）
• styleseet のパスの確認（絶対パスのコビぺ ）
• キャッシュの削除（１週間分）
• プロジェクトの作り直し
• firebaseのアップデート？？

google cloud functions - Firebase hosting cannot find my CSS - Stack Overflow

• ファイアウォールのオフ

HTML - FirebaseでDeploy 後にcssが無効になった｜teratail

• 過去に作成された３つのファイルの削除（firebase.json & firebaserc & gitignore）その後、初期化 firebase init
• デプロイしたいディレクトリよりも上の層でfirebase.jsonが無いか確認

補足情報（FW/ツールのバージョンなど）

環境

macOS Mojave 10.14.5
node 12.5.0
npm 6.9.0
Firebase 7.0.2

「情報が少ない」と感じた方はどのような情報が必要か教えていただきたいです。
よろしくお願いいたします

Answer 1

絶対パスで指定した場合、ローカルPC上でのファイルを参照することはできますが、Hostingにデプロイすると絶対パスでは参照できなくなります。(パスが変わる)

そのため、index.htmlからcss/jsを読み込む際は相対パスで指定してあげてください。

<link rel="stylesheet" href="/Users/USER/Desktop/LeoPort/public/style.css"/>
ではなく
<link rel="stylesheet" href="./style.css"/>
みたいに

Comments

[yonchome]

誤ってごめんしてしまいました。
失礼しました。