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
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
260
Security response for open source ecosystems
frasertweedale
0
100
AIエージェント完全に理解した
segavvy
4
260
Keynote - KCD Brazil - Platform Engineering on K8s (portuguese)
salaboy
0
120
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
グループポリシー再確認
murachiakira
0
170
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
160
製造業の会計システムをDDDで開発した話
caddi_eng
3
960
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
410
セマンティックレイヤー入門
ikkimiyazaki
8
3.2k
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
140
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1.2k
Featured
See All Featured
Building an army of robots
kneath
304
45k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Done Done
chrislema
183
16k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Visualization
eitanlees
146
16k
GraphQLとの向き合い方2022年版
quramy
45
14k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
For a Future-Friendly Web
brad_frost
176
9.6k
Fireside Chat
paigeccino
37
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.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