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

622 Views

September 26, 24

スライド概要

https://storage-jaws.connpass.com/event/328111/
にて発表しました。

profile-image

ソフトウェアエンジニア

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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