Suche senden
Hochladen
SPA時代のOGPとの戦い方
•
3 gefällt mir
•
32,068 views
Yoichi Toyota
Folgen
JavaScriptが解釈できないクローラーが正しくogpタグを読めるようにするために、どのようなアーキテクチャでSPAのサイトを構築すればいいかというお話
Weniger lesen
Mehr lesen
Software
Melden
Teilen
Melden
Teilen
1 von 23
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
RESTfulとは
RESTfulとは
星影 月夜
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
WPF開発での陥りやすい罠
WPF開発での陥りやすい罠
Sho Okada
Empfohlen
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
RESTfulとは
RESTfulとは
星影 月夜
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
WPF開発での陥りやすい罠
WPF開発での陥りやすい罠
Sho Okada
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Tadahiro Ishisaka
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
Kenjiro Kubota
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
Yoshifumi Kawai
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
FirebaseとSPAでOGPに動的対応
FirebaseとSPAでOGPに動的対応
Seiya Koga
今さら聞けないDiとspring
今さら聞けないDiとspring
土岐 孝平
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
Yahoo!デベロッパーネットワーク
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
naoki koyama
中・大規模でLaravelを導入するTips
中・大規模でLaravelを導入するTips
Kenjiro Kubota
SPAのルーティングの話
SPAのルーティングの話
ushiboy
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
BIGLOBE Inc.
Map
Map
kikairoya
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Yoji Kanno
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
PythonによるWebスクレイピング入門
PythonによるWebスクレイピング入門
Hironori Sekine
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
Weitere ähnliche Inhalte
Was ist angesagt?
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Tadahiro Ishisaka
Rest ful api設計入門
Rest ful api設計入門
Monstar Lab Inc.
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
Kenjiro Kubota
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
Yoshifumi Kawai
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
FirebaseとSPAでOGPに動的対応
FirebaseとSPAでOGPに動的対応
Seiya Koga
今さら聞けないDiとspring
今さら聞けないDiとspring
土岐 孝平
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
Yahoo!デベロッパーネットワーク
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
naoki koyama
中・大規模でLaravelを導入するTips
中・大規模でLaravelを導入するTips
Kenjiro Kubota
SPAのルーティングの話
SPAのルーティングの話
ushiboy
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
BIGLOBE Inc.
Map
Map
kikairoya
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Yoji Kanno
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
Was ist angesagt?
(20)
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
関数型・オブジェクト指向宗教戦争に疲れたなたに送るGo言語入門
Rest ful api設計入門
Rest ful api設計入門
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
C#の強み、或いは何故PHPから乗り換えるのか
C#の強み、或いは何故PHPから乗り換えるのか
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
FirebaseとSPAでOGPに動的対応
FirebaseとSPAでOGPに動的対応
今さら聞けないDiとspring
今さら聞けないDiとspring
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
中・大規模でLaravelを導入するTips
中・大規模でLaravelを導入するTips
SPAのルーティングの話
SPAのルーティングの話
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
Map
Map
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Ähnlich wie SPA時代のOGPとの戦い方
PythonによるWebスクレイピング入門
PythonによるWebスクレイピング入門
Hironori Sekine
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
appengine ja night #25 Google App Engine for PHP
appengine ja night #25 Google App Engine for PHP
Ryo Yamasaki
SPA勉強会
SPA勉強会
Daisuke Onoe
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
Ryuji Egashira
タグ管理のススメ
タグ管理のススメ
Makoto Shimizu
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
Takeshi Akutsu
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
QCon2009 Tokyo - Ruby on Railsで変わるエンタープライズ開発の現場
QCon2009 Tokyo - Ruby on Railsで変わるエンタープライズ開発の現場
Yasuko Ohba
Rubyによるクローラー開発
Rubyによるクローラー開発
しくみ製作所
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
VOYAGE GROUP
Cake Php開発事例
Cake Php開発事例
柴田 篤志
Spring.project
Spring.project
広平 田村
Tokyowebmining5 yokkuns
Tokyowebmining5 yokkuns
Yohei Sato
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
Web development fundamental_v2
Web development fundamental_v2
Takuya Kumagai
データベース勉強会 In 広島 mongodb
データベース勉強会 In 広島 mongodb
Ryuji Tamagawa
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
Ähnlich wie SPA時代のOGPとの戦い方
(20)
PythonによるWebスクレイピング入門
PythonによるWebスクレイピング入門
JavaScript 研修
JavaScript 研修
appengine ja night #25 Google App Engine for PHP
appengine ja night #25 Google App Engine for PHP
SPA勉強会
SPA勉強会
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
タグ管理のススメ
タグ管理のススメ
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
Web制作勉強会 #2
Web制作勉強会 #2
QCon2009 Tokyo - Ruby on Railsで変わるエンタープライズ開発の現場
QCon2009 Tokyo - Ruby on Railsで変わるエンタープライズ開発の現場
Rubyによるクローラー開発
Rubyによるクローラー開発
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
Cake Php開発事例
Cake Php開発事例
Spring.project
Spring.project
Tokyowebmining5 yokkuns
Tokyowebmining5 yokkuns
HTML5 アプリ開発
HTML5 アプリ開発
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Web development fundamental_v2
Web development fundamental_v2
データベース勉強会 In 広島 mongodb
データベース勉強会 In 広島 mongodb
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Mehr von Yoichi Toyota
超フランクにスクラムの大事なことの話をする
超フランクにスクラムの大事なことの話をする
Yoichi Toyota
ジャワカレーをおいしく作る最後の一押し
ジャワカレーをおいしく作る最後の一押し
Yoichi Toyota
ライブラリを作る思考回路
ライブラリを作る思考回路
Yoichi Toyota
DynamoDB設計のちょっとした技
DynamoDB設計のちょっとした技
Yoichi Toyota
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
Yoichi Toyota
オブジェクト指向についてあまり知られていないこと
オブジェクト指向についてあまり知られていないこと
Yoichi Toyota
Ruby is comming ractor編
Ruby is comming ractor編
Yoichi Toyota
array.map(&:key)ってなんやねん
array.map(&:key)ってなんやねん
Yoichi Toyota
はじめてのPull Request
はじめてのPull Request
Yoichi Toyota
Railsの開発環境作るぞ
Railsの開発環境作るぞ
Yoichi Toyota
jqで極めるシェル芸の話
jqで極めるシェル芸の話
Yoichi Toyota
足し算をつくろう
足し算をつくろう
Yoichi Toyota
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
Yoichi Toyota
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
Yoichi Toyota
サーバーレスアプリケーションの作り方
サーバーレスアプリケーションの作り方
Yoichi Toyota
AWS WAFでらくらくファイアーウォール生活
AWS WAFでらくらくファイアーウォール生活
Yoichi Toyota
Docker in production
Docker in production
Yoichi Toyota
How to fight against “full scratch disease”
How to fight against “full scratch disease”
Yoichi Toyota
Amazon lexを触ってみた
Amazon lexを触ってみた
Yoichi Toyota
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Yoichi Toyota
Mehr von Yoichi Toyota
(20)
超フランクにスクラムの大事なことの話をする
超フランクにスクラムの大事なことの話をする
ジャワカレーをおいしく作る最後の一押し
ジャワカレーをおいしく作る最後の一押し
ライブラリを作る思考回路
ライブラリを作る思考回路
DynamoDB設計のちょっとした技
DynamoDB設計のちょっとした技
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
オブジェクト指向についてあまり知られていないこと
オブジェクト指向についてあまり知られていないこと
Ruby is comming ractor編
Ruby is comming ractor編
array.map(&:key)ってなんやねん
array.map(&:key)ってなんやねん
はじめてのPull Request
はじめてのPull Request
Railsの開発環境作るぞ
Railsの開発環境作るぞ
jqで極めるシェル芸の話
jqで極めるシェル芸の話
足し算をつくろう
足し算をつくろう
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
サーバーレスアプリケーションの作り方
サーバーレスアプリケーションの作り方
AWS WAFでらくらくファイアーウォール生活
AWS WAFでらくらくファイアーウォール生活
Docker in production
Docker in production
How to fight against “full scratch disease”
How to fight against “full scratch disease”
Amazon lexを触ってみた
Amazon lexを触ってみた
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
SPA時代のOGPとの戦い方
1.
SPA時代のOGPとの戦い方 株式会社エクストーン 豊田陽一
2.
今日のお話 • SPAにおけるOGP対応の問題点 • AWSでの解決方法 •
実現に至るまでの紆余曲折
3.
SPAにおける OGP対応の 問題点
4.
SPA (SINGLE PAGE APPLICATION) • 単一のWebページで構成されたWebアプリケーショ ン • URL自体はただのパラメータとして扱われる •
その名前のファイルが存在するわけではな い • 静的なHTML + JavaScriptで実現される • React, Vue.js, AngularJS, etc.
5.
OGP (OPEN GRAPH PROTOCOL) • Webページのメタデータを表現するプロトコル • HTML内のmetaタグにより記述する •
<meta property=“og:title” content=“サイ トタイトル” /> • 様々なSNS上でサイトの情報を取り扱うために 利用される
6.
SNSサイト のOGPの 読み方 • 基本的にはサイトがクローラーによってアクセスす る • TwitterにサイトのURLを投稿する •
TwitterのクローラーがサイトのURLにアクセス する • クローラーが取得したページのogpタグを読む • ogpタグの内容を展開する
7.
SPAにおける OGP対応の 問題点 • JavaScriptが動かないとHTMLが描画されない • ブラウザがJavaScriptを実行することで動的に OGPタグを描画している •
各SNSサイトのクローラーがJavaScriptに対応 しているか? • Googlebotは対応している • Twitter, Facebookは動かない • だいたいOGPタグって、TwitterとFacebook向けの ために書くよね…
8.
一般的な解決策 • SSR (Server-Side
Rendering) • Webアプリケーションのサーバー側でJavaScriptを実行し、HTMLの描 画を行う • Node.jsを利用したUniversal JavaScript • クライアントとサーバー側で同じコードで実行できる • JavaScriptが実行できなくても、OGPタグが描画されたHTMLを取得で きる
9.
SSRの問題点 • アプリケーションサーバーが必要 • SPAの利点である、シンプルな構成が失われる •
静的HTML & JavaScript + バックエンドの API • S3とかに置けなくなっちゃう • クローラーがJavaScript解釈出来るようになった ら… • いらなくなるよね… • メンテナンス大変だよね… • とはいえ、現状ではTwitter, Facebookへの対応が 必要
10.
AWSでの 解決方法
11.
基本的な 考え方 • CloudFront +
S3で構成されているサイトを想定 • クローラーからのリクエストに描画済みのHTMLを 返す • Headless ChromeをLambdaで動かすことで実 現 • 描画されたHTMLはS3に保存する • 次回以降は保存してあるHTMLを返す
12.
AWSの登場人物 S3 • Webホスティ ングが可能な ファイルスト レージサービ ス CloudFront • コンテンツ配 信サービス (CDN) •
パスのパター ンによって、オ リジンを複数 設定可能 Lambda • JavaScript等 で記述された 関数を実行で きるサービス • 実行のトリ ガーに様々な イベントを設 定可能 API Gateway • API用のエンド ポイントを作 成 • 実際の処理は Lambda等で 行う Lambda@Edge • CloudFrontの エッジサー バーで実行可 能な制限付き Lambda
13.
LAMBDA@EDGEについて • CloudFrontへのアクセスをトリガーに起動できる Lambda • エッジロケーションで実行される •
以下の4つをトリガーに実行可能 • CloudFrontがビューワーからリクエストを受信した後 • CloudFrontがリクエストをオリジンサーバーに転送する前 • CloudFrontがオリジンからレスポンスを受信した後 • CloudFrontがビューワーにレスポンスを転送する前
14.
最初のアイデア • Headless ChromeをLambda@Edgeで動かして、描画済みのHTMLを S3に保存しよう! Edge
location Edge location Edge location Lambda@Edge Function リクエストされたファイルが無ければ、 URLをHeadless Chromeで読み込み、 Lambda上でHTMLを描画する。 描画結果をS3に保存する。 リクエストされたファイルがあれば、それを返す HTML with Rendered OGP
15.
ダメでした • 駄目だった理由 • Headless
Chromeのサイズ • https://www.npmjs.com/package/@serv erless-chrome/lambda • Lambdaで動作するよう、50MB以内にお さまるように作られている • Lambda@Edgeの制限その1 • プログラム全体の容量は1MBまで! • はいらない!
16.
次のアイデア • Headless Chrome自体はLambda@Edgeで動かすのをやめる •
API化し、通常のLambda上で動かす • Lambda@EdgeからはAPIを呼び出すだけにとどめる Edge location Edge location Lambda@Edge Function リクエストされたファイルが無ければ、 HTML描画用のAPIにリクエストを送り、描画済みHTMLを取得する。 描画結果をS3に保存する。 リクエストされたファイルがあれば、それを返す HTML with Rendered OGP Lambda Function Headless Chromeによる HTML描画
17.
ダメでした • 駄目だった理由 • 実行時間 •
Chrome起動→URL接続→ロード・描画までの 時間 • 10秒くらい • Lambda@Edgeの制限その2 • タイムアウト時間の上限 • ビューワーリクエストをトリガーにして動 かす場合、上限は5秒まで • 待てない!
18.
さらに次のアイデア • オリジンリクエストでLambda@Edgeを動かそう • タイムアウト時間の制限は30秒まで緩和される Edge
location Edge location Lambda@Edge Function リクエストされたファイルが無ければ、 HTML描画用のAPIにリクエストを送り、描画済みHTMLを取得する。 描画結果をS3に保存する。 リクエストされたファイルがあれば、それを返す HTML with Rendered OGP Lambda Function Headless Chromeによる HTML描画
19.
惜しかった • 惜しかった理由 • User-Agent •
クローラーからのアクセスの時のみ実行した い • オリジンリクエストではUser-Agentが取得で きない • User-Agentをオリジンに転送する設定に すれば一応実現可能 • キャッシュ効率悪すぎるので非推奨
20.
さらなる 一手 • User-Agentではなく、URLでHTMLの描画の判断を 行う • ビューワーリクエストで、User-Agentの判定を する •
クローラーからのアクセスの場合、 *.static.htmlにアクセスする • オリジンリクエストで、描画APIを呼び出す • *.static.htmlへのリクエストの場合のみ、 描画APIを呼び出す • それ以外は何もしない
21.
最終的な構成図 Edge location Edge location Lambda@Edge Function URLが***.static.htmlの場合に限り、以下の処理を実行する。 リクエストされたファイルが無ければ、 HTML描画用のAPIにリクエストを送り、描画済みHTMLを取得する。 描画結果をS3に保存する。 リクエストされたファイルがあれば、それを返す HTML
with Rendered OGP Lambda Function Headless Chromeによる HTML描画 Lambda@Edge Function User-Agentがクローラーの場合、 元のURLに.static.htmlを付与したリクエストを行う。
22.
出来た! ブラウザからのアクセス • ビューワーリクエスト側のLambda@Edgeは何もしな い • オリジンリクエスト側のLambda@Edgeも何もしない •
リクエストURLが.static.htmlで終わってないため クローラーからのアクセス • ビューワーリクエスト側のLambda@Edgeでリクエス トURLを加工 • ex) /news/20181116.html -> /news/20181116.html.static.html • オリジンリクエスト側のLambda@Edge • S3にファイルの存在確認 • あればそのファイルを返す • 無ければHTML描画APIを呼び出し、結果をS3に保存
23.
まとめ • SPAのOGP対応は結構大変 • 頑張ればSSRなしでも実現可能 •
ちゃんとインフラはサーバーレス構成を維持できている • Lambda@Edge便利 • *.static.htmlはSPAのソースコード置き場と別のbucketにした方がいいかも
Jetzt herunterladen