🚀
Astro + CloudflarePagesで画像が読み込めずハマった
概要
Astro + Reactでwebページを作成してCloudflare pagesにデプロイしたところ、Topページ以外の画像が読み込めていない
原因
chromeの開発者ツールのnetworkタブで確認したところ、画像の読み込み先がhttps://hogehoge.com/{pagename}/assets/image.webp
になっており、存在しないpathを読み込もうとしている
正しくは下記のようになっていなければいけない
https://hogehoge.com/assets/image.webp
dist/
├── assets/
│ └── image.webp
├── page2/
│ └── index.html
├── page3/
│ └── index.html
└──index.html
Astro側の問題or自分の設定ミスを始めに疑いましたが、どこにも情報が見当たらない + テストでVercelにデプロイしてみたところ正常に画像が取得できているので、これはCloudflare pagesの問題かなという見立て
解決
distディレクトリの中の各ページディレクトリに必要な画像をコピーするコマンドを、shellscriptに書いてビルド時に実行するようにした
- package.json
scripts: {
"build": "astro build && ./build.sh"
}
- build.sh
#!/bin/bash
arr=("page2" "page3")
for dir in "${arr[@]}" ; do
mkdir -p dist/$dir/assets &&
cp dist/assets/image.webp dist/$dir/assets/
done
最終的なdistの中身
dist/
├── assets/
│ └── image.webp
├── page2/
│ ├── assets/
│ │ └── image.webp
│ └── index.html
├── page3/
│ ├── assets/
│ │ └── image.webp
│ └── index.html
└──index.html
※ もし何か解決方法や原因など知っている方、同じ症状が発生した方がいましたらコメントお待ちしております、、、
Discussion