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
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
240
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
150
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
100
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
240
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
Proxmox VE超入門 〜 無料で作れるご自宅仮想化プラットフォームブックマークする
devops_vtj
0
120
日本MySQLユーザ会ができるまで / making MyNA
tmtms
1
350
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
390
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Why Go?
xpmatteo
0
130
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
140
Featured
See All Featured
Fireside Chat
paigeccino
37
3.3k
Become a Pro
speakerdeck
PRO
27
5.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Practical Orchestrator
shlominoach
187
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing for Performance
lara
606
69k
A better future with KSS
kneath
238
17k
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