website hostingでSPAのリダイレクトをする話

website hostingでSPAのリダイレクトをする話 Takuma Kobayashi, Finatext © 2024 Finatext Holdings Ltd.

自己紹介 ● 小林拓磨（X: @takuma5884rbb） ● 2023 (株)Finatext 入社 ● ソフトウェア・AWSエンジニア ○ Go・AWSを用いた証券取引サービスの開発・運用 ○ Terraformを用いたIaC ○ 新卒エンジニア採用 ● 2024 Japan AWS Jr. Champions ● 趣味 ○ 料理 ○ ランニング © 2024 Finatext Holdings Ltd. 1

website hostingでSPAのリダイレクトをする話 © 2024 Finatext Holdings Ltd. 2

おわび それほんまにStorageか？というツッコミはご容赦ください © 2024 Finatext Holdings Ltd. 3

要件 ● 新サービスの開始に伴って、LPからアプリページへの動線があるが、 サービスインまではメンテナンスページを表示したい ● サービスイン時にサービスTOPにリダイレクトしたい サービスイン前 サービスイン後 LPサイト サービスTOP LPサイト サービスTOP メンテナンス画面 アプリHOME メンテナンス画面 アプリHOME © 2024 Finatext Holdings Ltd. 4

問題点 ● アプリはSPAによる実装 ● アプリHOMEをドキュメントルートにしたいので、サービスTOPにはパスを切っている LPサイト サービスTOP https://app.example.com/top メンテナンス画面 アプリHOME https://app.example.com © 2024 Finatext Holdings Ltd. 5

• https://app.example.com/top
• https://app.example.com

S3のwebsite hosting AWS Cloud © 2024 Finatext Holdings Ltd. 6

S3のwebsite hosting/SPAを考えるときに考慮すべきS3の仕様 ● リクエストしたオブジェクトがない（かつListBucketがallowされていない）場合、 403エラーになる ○ アクセス権限がなくて不可視になっているのか、本当にオブジェクトがないのかを 外部から判定できないようにするため？ https://repost.aws/ja/knowledge-center/s3-troubleshoot-403 © 2024 Finatext Holdings Ltd. 7

• https://repost.aws/ja/knowledge-center/s3-troubleshoot-403

S3のwebsite hosting/リダイレクトの設定 CloudFrontのエラーハンドリングでルーティングを完成させる © 2024 Finatext Holdings Ltd. 8

S3のwebsite hosting/リダイレクトの設定 ドキュメントルートにアクセス ドキュメントルート以外にアクセス index.htmlにアクセス 適当なパスにアクセス 403を返す index.htmlを返す index.htmlにリダイレクト index.htmlを返す © 2024 Finatext Holdings Ltd. 9

website hostingを使う場合、HTTPしか使用できない ● S3の仕様 ● プロトコルの変換でコストかかって いる点は注意 © 2024 Finatext Holdings Ltd. 10

Origin Access Control(OAC)でエラー > IllegalOriginAccessConfiguration: Illegal configuration: The origin type and OAC origin type differ. website hostingだとOACは設定できない コンソールだとそもそも欄が出てこない（Terraformとかだと投げられちゃう） © 2024 Finatext Holdings Ltd. 11

いざ設定！ © 2024 Finatext Holdings Ltd. 12

ダメだった設定 これだとドキュメントルートに飛んでしまう © 2024 Finatext Holdings Ltd. 13

要件 ● 新サービスの開始に伴って、LPからアプリページへの動線があるが、 サービスインまではメンテナンスページを表示したい ● サービスイン時にサービスTOPにリダイレクトしたい サービスイン前 LPサイト サービスイン後 サービスTOP LPサイト サービスTOP メンテナンス画面 アプリHOME こっちに飛んでしまう メンテナンス画面 アプリHOME © 2024 Finatext Holdings Ltd. 14

要件 ● 新サービスの開始に伴って、LPからアプリページへの動線があるが、 サービスインまではメンテナンスページを表示したい ● サービスイン時にサービスTOPにリダイレクトしたい サービスイン前 サービスイン後 0 0 : 5 AM LPサイト サービスTOP LPサイト サービスTOP メンテナンス画面 アプリHOME メンテナンス画面 アプリHOME © 2024 Finatext Holdings Ltd. 15

上手くいった設定 © 2024 Finatext Holdings Ltd. 16

index_document ● リクエストがウェブサイトのルートまたはサブフォルダに対して行われた場合に Amazon S3 によって返されるウェブページ ● ここでルート以下のパス部分を指定して、それを返してもらう必要がある...？ © 2024 Finatext Holdings Ltd. 17

一件落着！ © 2024 Finatext Holdings Ltd. 18

要件 ● 新サービスの開始に伴って、LPからアプリページへの動線があるが、 サービスインまではメンテナンスページを表示したい ● サービスイン時にサービスTOPにリダイレクトしたい サービスイン前 サービスイン後 LPサイト サービスTOP LPサイト サービスTOP メンテナンス画面 アプリHOME メンテナンス画面 アプリHOME © 2024 Finatext Holdings Ltd. 19

と、思ったが...... © 2024 Finatext Holdings Ltd. 20

実はこれでよかった これだとドキュメントルートに飛んでしまう→結局CloudFrontのエラーハンドリングがあ るので、index documentはなんでもよかった（ファイルがなければドキュメントルートに 飛ぶので） © 2024 Finatext Holdings Ltd. 21

実はこれでよかった これだとドキュメントルートに飛んでしまう→結局CloudFrontのエラーハンドリングがあ るので、index documentはなんでもよかった（ファイルがなければドキュメントルートに 飛ぶので） これだとapp.example.com//new になってしまい、 存在しないパスを指した果てに ドキュメントルートに飛ばされていた © 2024 Finatext Holdings Ltd. 22

• http://app.example.com//new

落とし穴 ● 作りたてのCloudFrontを通してS3にアクセスすると、403が返ってくることがある ○ 裏側のDNS周りの設定が反映されるのにタイムラグがあるのかも、要調査 ● 正しい設定ができているけど、反映に時間がかかっていて、間違っていると捉えてし まった？ © 2024 Finatext Holdings Ltd. 23

まとめ ● 意外と同じハマり方をした人がネットの海にいなかった ○ いたらもうちょい早く出会いたかった... ● 追い込まれると人は覚醒する ● うまくいかないといろいろがちゃがちゃやってしまいがちだが、対象実験を丁寧にやっ て原因切り分けするのが大事 ○ 手順を残しながら作業することの大切さがわかった ● 当時は余裕がなくても、後から振り返って知見を得ることにも意味がある！ © 2024 Finatext Holdings Ltd. 24