前回はこちらのサイトを gatsbyjs で書き替えた時のことを書きました。前回はあまり余裕がなく、とりあえず gatsbyjs でサイトを作って見れるようにするのを第一目標において作ったため、いくつか改善したい箇所が出てきました。

更新内容

今回のアップデートで加えたのは以下の２点です。

• javascript -> TypeScript に書き換えたい
• stylesheet も tailwindcss を利用したい

また、javascript の記述がバラバラだったこともあり、husky を利用して commit 時に自動で format するようにもしました。

デプロイ後動作を確認していたところ、/about ページを表示する際に一瞬 404 ページが出た後に about ページを表示しており、それが原因で css が崩れていました。詳しく確認したところ、/about にアクセスした時に/about/index.html を返せていないのが原因でした。 s3 バケットのどこからのアクセスでも getObject を許可し、静的サイトホスティングを設定してサブディレクトリへのアクセス時もデフォルトで/index.html を見にいくようにしました。その後、cloudfront で s3 のウェブサイトホスティングのドメインへ見にいくように変更したことで/about ページへのアクセスも/index.html を返すようになったのできれいに見れるようになりました。

詰まったところ

ページのパスにアクセスしたところ、ページはあるはずなのに 404 を返す

gatsby のサイトをビルドして s3 にデプロイ後、cloudfront の cache をパージして一通りページを確認していた時に、トップページから/about などのページへの遷移時には 404 エラーにはな離ませんでしたが、直接ページの URL を叩いたところ css が崩れて表示されました。原因を探ったところ、ページへのリンクを直接アクセスすると 404 を返し、その後その 404 ページのデータを元に正しいページのデータが返されるようになっていました。

解決 s3 バケットの設定で静的ウェブサイトのホスティングをオンにする

原因をより深ぼって見たところ、普通の s3 バケットの設定の場合、静的ウェブサイトのホスティング設定をしないとディレクトリアクセス時に自動で/index.html を返すようにならないということが原因でした。 実際自分の s3 バケットを確かめたところ、s3 の静的ウェブサイトのホスティングがオフになっており、オンにして試したところ 404 レスポンスはなくなるようになりました。おかげで css の崩れも同時に治りました。