622 Views
September 26, 24
スライド概要
https://storage-jaws.connpass.com/event/328111/
にて発表しました。
ソフトウェアエンジニア
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
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
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
落とし穴 ● 作りたてのCloudFrontを通してS3にアクセスすると、403が返ってくることがある ○ 裏側のDNS周りの設定が反映されるのにタイムラグがあるのかも、要調査 ● 正しい設定ができているけど、反映に時間がかかっていて、間違っていると捉えてし まった? © 2024 Finatext Holdings Ltd. 23
まとめ ● 意外と同じハマり方をした人がネットの海にいなかった ○ いたらもうちょい早く出会いたかった... ● 追い込まれると人は覚醒する ● うまくいかないといろいろがちゃがちゃやってしまいがちだが、対象実験を丁寧にやっ て原因切り分けするのが大事 ○ 手順を残しながら作業することの大切さがわかった ● 当時は余裕がなくても、後から振り返って知見を得ることにも意味がある! © 2024 Finatext Holdings Ltd. 24