カテゴリー
AWS

ReactをS3のSiteHostingで配信する方法

ReactビルドしてS3バケットに配置すればええだけやん。

と、思うやん?

そら(ちゃんとトップページからアクセスして、リンク全部踏んでったら)そう(ええと思うし、あとSPAとかはね、問題ない)よ。

せやけど、リロードとかさ、するやん?人間だもの。

S3にはindex.htmlしかない訳やから、ReactのルーティングでURL(location)が変更されてる状態でリロードしたら、404になる訳なんよね。例えば、”/giants” みたいなルーティングをReactで実現してたとしても、そらそんなディレクトリない訳やから。

そう言う時の話やね。アパッチとかエンジンエックスやったらリライトルールでなんとかするんやけども、S3のhostingん時はどうすんねんって。

ちょっと調べるといろんな解決方法があって、まず一番簡単なのが、errorオブジェクトをindex.htmlにするって言う。

https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket

最初見た時は何や天才やん。と思ったよね。

これならだいたいindex.htmlにルーティングされるから、意図したReactのルーティングになる。確かに。せやけど。これ、確かに、動き的にはええんやけど、実際は、HTTPステータスが404のまま動いてる感じなんよね。

なんかちょっと気持ち悪いかなって。

次見つけたの。

出たわね。

これもうすごい。ルーティングをハッシュ付きのやつに置き換えてくって言う作戦。確かに、これならindex.htmlで全部処理できるからね。天才アンド天才。すごい。

React側のコードにも手を入れる必要があるので、お手軽さで言えば最初の方なんやけども、こっちは綺麗に解決できる感がある。

なんてすごいんだ……(恍惚

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です