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
580
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
サーバレスを本気で理解したいあなたに贈る 「実践力を鍛えるBootcamp」の紹介
hatahata021
2
100
「AWSの薄い本」の紹介
hatahata021
1
47
ALBの新機能 Automatic Target Weightsとgray failuresについて考えてみる
hatahata021
0
570
re:Invent Workshop「Advanced Multi-AZ Resilience Patterns」をやってみた
hatahata021
1
170
Transfer Family for SFTPを使ってみよう
hatahata021
2
1.1k
VPCについてあらためて考えてみる
hatahata021
1
160
はじめてのCloudflare
hatahata021
1
96
AWS認定全冠するまでのおすすめの順番
hatahata021
12
9.3k
DX接続タイプの違いが説明できるようになろう
hatahata021
0
2.5k
Other Decks in Technology
See All in Technology
デジタル化・DX推進あるある
y150saya
0
220
Dojo 20240830 COBOL to Java on Z
ichikawayasuhisa
0
240
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
130
LLM を現場で評価する
asei
4
680
分野に潜むツールの紹介
pojiro
1
330
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
4
680
中規模・ミドルTier開発組織におけるDevRelの戦略と実行と成果 - DevRel Guild Conference Mini -
leveragestech
2
260
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
650
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
2
560
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
110
バックログを導入し やっぱやめた話
ota42y
0
170
Featured
See All Featured
How GitHub (no longer) Works
holman
309
140k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Being A Developer After 40
akosma
82
580k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
How to name files
jennybc
75
97k
The Language of Interfaces
destraynor
153
23k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Into the Great Unknown - MozCon
thekraken
28
1.4k
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