Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CloudFrontを使ってSPAなWebサイトを公開するときに気をつけること
Search
da-hatakeyama
May 22, 2024
Technology
1
2.1k
CloudFrontを使ってSPAなWebサイトを公開するときに気をつけること
JAWS朝会 #57 で登壇した時の資料です
https://jawsug-asa.connpass.com/event/312978/
da-hatakeyama
May 22, 2024
Tweet
Share
More Decks by da-hatakeyama
See All by da-hatakeyama
VPC Block Public Accessを触ってみて気づいた色々な勘所
hatahata021
2
170
VPC Block Public AccessとCloudFrontVPCオリジンによって何が変わるのか?
hatahata021
2
490
WernerVogelsのKeynoteで語られた6つの教訓とOps
hatahata021
2
460
サーバレスを本気で理解したいあなたに贈る 「実践力を鍛えるBootcamp」の紹介
hatahata021
2
250
「AWSの薄い本」の紹介
hatahata021
1
120
ALBの新機能 Automatic Target Weightsとgray failuresについて考えてみる
hatahata021
0
830
re:Invent Workshop「Advanced Multi-AZ Resilience Patterns」をやってみた
hatahata021
1
240
Transfer Family for SFTPを使ってみよう
hatahata021
2
2.3k
VPCについてあらためて考えてみる
hatahata021
1
240
Other Decks in Technology
See All in Technology
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
8
920
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
450
20250326_管理ツールの権限管理で改善したこと
sasata299
1
380
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
140
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
430
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
18k
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
150
数百台のオンプレミスのサーバーをEKSに移行した話
yukiteraoka
0
680
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
Dapr For Java Developers SouJava 25
salaboy
1
130
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
130
Featured
See All Featured
The Language of Interfaces
destraynor
157
24k
GraphQLとの向き合い方2022年版
quramy
45
14k
What's in a price? How to price your products and services
michaelherold
245
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building an army of robots
kneath
304
45k
Building Adaptive Systems
keathley
41
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
How GitHub (no longer) Works
holman
314
140k
Transcript
CloudFrontを使ってSPAなWebサイトを 公開する時に気をつけること JAWS朝会 #57 はたはた
アジェンダ l自己紹介、登壇の背景 lSPA(Single Page Application)とは lSPAのページ遷移について lAWS上でSPA Webサイトを作る時の設定 lCloudFrontディストリビューションのエラーページ設定を追加 lCloudFront
FunctionsもしくはLambda@Edgeでレスポンスを操作
アジェンダ l自己紹介、登壇の背景 lSPA(Single Page Application)とは lSPAのページ遷移について lAWS上でSPA Webサイトを作る時の設定 lCloudFrontディストリビューションのエラーページ設定を追加 lCloudFront
FunctionsもしくはLambda@Edgeでレスポンスを操作
自己紹介 名前: 畠山 大治 業務: AWSを使ったインフラ構築 @アイレット株式会社 趣味: Perfumeを追いかける(ファンクラブ 9年目)
読書、映画・アニメを見る 資格: AWS認定12冠、GC認定ACE 好きなAWSサービス: VPC AWS Community Builders, OpsJAWSコアメンバー はたはた (@hatake_book)
登壇の背景 lアプリチームと一緒にWebサイトを作っていた時に、受けた依頼の内容につい て深掘りしたことがきっかけ CloudFrontに xxxxxx っていう設定をいれてほしい! 承知です! (はて、なんのための設定なんだろう…?) アプリ担当 インフラ担当(私)
アジェンダ l自己紹介、登壇の背景 lSPA(Single Page Application)とは lSPAのページ遷移について lAWS上でSPA Webサイトを作る時の設定 lCloudFrontディストリビューションのエラーページ設定を追加 lCloudFront
FunctionsもしくはLambda@Edgeでレスポンスを操作
SPA(Single Page Application)とは lWebアプリケーションの開発手法の一種 lクライアント側(Webブラウザ)でHTMLを生成し、Webサーバーに対する読 み込みを減らすことができる lGoogle Mapなど、ブラウザ上でヌルヌル動くページとかで使われている 1. 初回アクセス時に
HTMLファイル等を まとめて受け取る
SPA(Single Page Application)とは lWebアプリケーションの開発手法の一種 lクライアント側(Webブラウザ)でHTMLを生成し、Webサーバーに対する読 み込みを減らすことができる lGoogle Mapなど、ブラウザ上でヌルヌル動くページとかで使われている 3. 更新に必要な情報だけを
サーバーに問い合わせる 2. ページ上で変更したい 部分だけを更新
MPA(Multi Page Application)との比較 lMPAもWebアプリケーションの開発手法の一種で、昔から存在する手法 lページ上でボタンやリンクをクリックしたりするたび、サーバーに対して 問い合わせが行われる ユーザーが操作するたびに 画面更新が走る /index.htmlにアクセス /page1/xxxxx.htmlにアクセス
/page2/xxxxx.htmlにアクセス
MPA(Multi Page Application)との比較 lクライアントリッチなWebアプリ を作れる l初回ロード時間が長くなりがち lクライアント側にそれなりの スペックを求める SPA MPA
l読み込み回数が増え、トータルの 読み込み時間が増加する lSEO的にはMPAの方が優位 l開発が比較的シンプル
例:AWS上でSPA Webサイトを作る場合 「ReactベースのシングルページアプリケーションをAmazon S3とCloudFrontにデプロイする」より引用 https://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based- single-page-application-to-amazon-s3-and-cloudfront.html
例:AWS上でSPA Webサイトを作る場合 「ReactベースのシングルページアプリケーションをAmazon S3とCloudFrontにデプロイする」より引用 https://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based- single-page-application-to-amazon-s3-and-cloudfront.html Webアプリケーションの パッケージ等を一式配置する
例:AWS上でSPA Webサイトを作る場合 「ReactベースのシングルページアプリケーションをAmazon S3とCloudFrontにデプロイする」より引用 https://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based- single-page-application-to-amazon-s3-and-cloudfront.html Webアプリケーションで 呼び出すAPIを実装
アジェンダ l自己紹介、登壇の背景 lSPA(Single Page Application)とは lSPAのページ遷移について lAWS上でSPA Webサイトを作る時の設定 lCloudFrontディストリビューションのエラーページ設定を追加 lCloudFront
FunctionsもしくはLambda@Edgeでレスポンスを操作
SPAにおけるページ遷移:ルーティング lSPAでは他のページに飛ぶのではなく、基本的には 一つのページ(Single Page)の上でWebアプリが動く lページ遷移そのものが発生しないのでは? SPAではルーティングという処理によって、擬似的なページ遷移をする
SPAにおけるページ遷移:ルーティング “page1”をクリック “page2”をクリック リンクをクリックすると表示が変わるSPAページを、ローカルで起動してみる “page2”をクリック “page1”をクリック
SPAにおけるページ遷移:ルーティング lSPAなので画面更新は行われないが、 リンクをクリックするとURLの書き換え が行われる l「URLの書き換え」というイベントを トリガーに、画面の書き換えが発生し ている lこのような処理をルーティングという lReact Router,
Vue Routerなどのライ ブラリを使用して実装できる
SPAにおけるページ遷移:問題点 l実際に別のページに接続しているわけではなく、ブラウザ上で擬似的な ページ遷移をしている lルーティングが発生した後にブラウザでリロード(サーバーにアクセス) すると、本来は存在しないページに接続しに行ってしまう l先ほどの例で考えると l/page1と表示されている時にリロード → /page1に対して接続しにいく lただし、/page1は存在しないので
403, 404エラーが発生
アジェンダ l自己紹介、登壇の背景 lSPA(Single Page Application)とは lSPAのページ遷移について lAWS上でSPA Webサイトを作る時の設定 lCloudFrontディストリビューションのエラーページ設定を追加 lCloudFront
FunctionsもしくはLambda@Edgeでレスポンスを操作
AWS上でSPA Webサイトを作る時の設定 l先ほどの例で考えると、方法は大きくわけて2つ lCloudFrontディストリビューションのエラーページ設定を追加 lCloudFront FunctionsもしくはLambda@Edgeでレスポンスを操作
AWS上でSPA Webサイトを作る時の設定① lCloudFrontのエラーページ設定 lエラーレスポンスをカスタマイズ することができる l特定のエラー発生時に、クライアント に返すパスとレスポンスコードを設定 できる CloudFrontディストリビューションのエラーページ設定を追加
AWS上でSPA Webサイトを作る時の設定① CloudFrontディストリビューションのエラーページ設定を追加 lSPA Webサイトを背後に配置する時の推奨設定 l403, 404エラーが発生したら ”https://example.com/” を返すように設定 lレスポンスコードを200で返す
lレスポンスコードの書き換えまで必要かどうかはアプリ実装と照らし合わせて考える
AWS上でSPA Webサイトを作る時の設定② lCloudFrontのエラーページ設定はビヘイビア全てに適用される lCloudFrontの背後に複数のアプリケーションがある場合など、挙動を 細かく制御したい場合には不向き lCloudFront FunctionsもしくはLambda@Edgeを使うことで細かい制御 が可能になる CloudFront FunctionsもしくはLambda@Edgeでレスポンスを操作
CloudFront FunctionsとLambda@Edgeの比較 引用:https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/edge-functions-choosing.html パスとレスポンスコードの変更程度であればCloudFront Functionsで十分そう
まとめ lCloudFrontの背後にSPA Webサイトを配置するときは、 SPAのルーティングに配慮した設定を入れる必要がある l実装方法としては2種類 lCloudFrontディストリビューションのエラーページ設定を追加 lCloudFront FunctionsもしくはLambda@edgeでレスポンスを操作 lパスとレスポンスコードの書き換えであればCloudFront Functions
で十分 lフロントエンド初心者なので間違いとか見つけたら教えてください!!
宣伝 5/29(水) OpsJAWS #29 「ロギング、ログ管理」 オンライン、オフライン(目黒)どちらも募集中です!
参考情報 lSPAのWebサイトをS3×CloudFrontで設定する時はリダイレクト設定!403/404のAccessDeny を解消する l https://soypocket.com/it/aws-cloudfront-s3-403error/ l今さら聞けないSPA(シングルページアプリケーション)とは l https://qiita.com/shinkai_/items/79e539b614ac52e48ca4#%E5%88%9D%E5%9B%9E%E3%83%AD%E 3%83%BC%E3%83%89%E6%99%82%E9%96%93 lSPAってページ遷移するの?
l https://qiita.com/ozaki25/items/41e3af4679c81a204284 l今から始めるReact入門 〜 React Router l https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2 lReactベースのシングルページアプリケーションをAmazon S3とCloudFrontにデプロイする l https://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/deploy-a-react-based- single-page-application-to-amazon-s3-and-cloudfront.html lCloudFront Functions と Lambda@Edge の選択 l https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/edge-functions- choosing.html