Gatsby製のサイトをAmplify Consoleでホスティングすると、特定のページのURLをブラウザに打ち込んだ際にTOPページにリダイレクトされてしまう

Gatsby 製のサイト(このサイト)を Amplify Console でホスティングする際にハマったのでメモ。

何が問題だったかというと、特定のページ(https://whnyab.com/amplify-ssr-cicd)にブラウザから直接アクセスしても全て TOP ページ(https://whnyab.com/)にリダイレクトされてしまう状態だった。全てのアクセスが TOP ページにアクセスされてしまうため、特定の記事を SNS 等でシェアすることができなくなっていた。しかもローカル環境では再現しなかったので気がつくまでに結構時間が立っていた。

解決策

初めは Gatsby のルーティングの設定を疑っていたが、どうやら Amplify Console のリダイレクトの設定が問題のようだった。

Amplify Console ではマネジメントコンソールから Web ページのリダイレクトの設定を細かく設定できる。SPA のサイトをホスティングする際は、多くの場合でデフォルトの設定で問題ないのだが、Gatsby のサイトをホスティングする場合はリダイレクト設定を以下のように修正する必要がある。

// (before)
[
  {
    "source": "/<*>",
    "target": "/index.html",
    "status": "404-200",
    "condition": null
  },
  {
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
    "target": "/index.html",
    "status": "200",
    "condition": null
  }
]

// (after)
[
  {
    "source": "/<*>",
    "target": "/index.html",
    "status": "404-200",
    "condition": null
  }
]

設定箇所はこちら。

Amplify Console の Issueで同じ事象でハマっている人がいて助かった。

Gatsby を Amplify Console にホスティングしようとすると必ずこの問題に直面するはずなんだけど、参考になる情報が少なくて苦労した。

みんなバリバリ Amplify Console を使いこなしていてそもそも問題にならないのか、Gatsby ユーザが誰も Amplify Console 使ってないのかどっちだろう..