gatsbyで作ったサイトのiconが404になる場合の対応

2022-06-21

原因

gatsby-plugin-manifestを使っていて、https://example.com/icons/icon-144x144.pngにアクセスしたとき、404 エラーになってしまう。 この場合、apache のセキュリティ対策設定で icons へのアクセスをブロックしてい可能性が高い。 icons ディレクトリはデフォルトページが ON のときに、Apache のデフォルト画像だけでなく、 READEME ファイルなども入っていて見えてしまう。 見えてほしくないファイルまで見えてしまうので、これを防止しているのだと思われる。

回避方法として

レンタルサーバの場合、apache の設定を変更できないことが多いので、次のようにgatsby-config.jsを修正して icons ディレクトリへの icon ファイル出力をやめて対応する。

{
"resolve": `gatsby-plugin-manifest`,
"options": {
"icon": `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
// iconsを追加してこの例のようにfaviconsディレクトリへiconファイルを出力するようにする
"icons": [
{
"src": "favicons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}
]
}
}

Profile picture
なにか書いてみようか。
© 2022, mokuzine.net