Zenn
🚀

Astro + CloudflarePagesで画像が読み込めずハマった

2022/11/07に公開
React
TypeScript
Cloudflare
error
Astro
tech

概要

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