---
title: website hostingでSPAのリダイレクトをする話
tags: 
author: [小林拓磨](https://docswell.com/user/norit4ma)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELPYDKQ7R.jpg?width=480
description: https://storage-jaws.connpass.com/event/328111/ にて発表しました。
published: September 26, 24
canonical: https://docswell.com/s/norit4ma/Z6VGM9-s3-website-hosting-redirect
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELPYDKQ7R.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JM4NP8K7W.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJRWD15679.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXP1YKD7X.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EKD235DJD.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73R4GKPJ5.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DYQ1337G.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJP6LQ4PE8.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EV3Q5XV7Q.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57G3W6V1JL.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQ5346NJP.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ491Q4371.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1KGP4ZJG.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWDK2X6J2.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZGZD6RE3.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6YZ1217V.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5GW42LJ4.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/9E2YQV43ER.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/D7YGW3M87M.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/VENG9VW9J8.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/Y79W26X373.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/G78N5Z2LJD.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/L7LPYD2QJR.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4EM4NP9KJW.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PERWD1G6J9.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/P7XP1YXDJX.jpg)