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
GraphQLとスキーマファーストで切り開く ライドシェアの未来
ku0522a
0
490
リクルート新人研修2024 テキスト生成AI活用
recruitengineers
PRO
10
420
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
4
680
[RSJ24] Object Retrieval in Large-Scale Indoor Environments Using Dense Text with a Multi-Modal Large Language Model
keio_smilab
PRO
0
220
Discover Your Tailored Platform Strategy with Real-World Practice
hhiroshell
1
130
OCI コスト管理
ocise
1
110
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
1
750
標準最高!標準はださくないぞ! at fukuoka.ts #1
yoiwamoto
0
150
Namespace, Now and Then
tagomoris
0
170
Dive Deep in Cloud Run: Automatic Base Image update
aoto
PRO
0
900
中規模・ミドルTier開発組織におけるDevRelの戦略と実行と成果 - DevRel Guild Conference Mini -
leveragestech
2
260
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
We Have a Design System, Now What?
morganepeng
48
7.1k
Embracing the Ebb and Flow
colly
83
4.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
2k
How GitHub (no longer) Works
holman
309
140k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Done Done
chrislema
180
16k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
33
1.7k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Mobile First: as difficult as doing things right
swwweet
220
8.8k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
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