SEO対策したサイトをAPI Gateway+Lambdaで作ってみた話

株式会社カラダメディカ 平田 貴大

自己紹介

氏名：平田 貴大

経歴：2011〜2015 エムティーアイ

ヘルスケア系アプリ開発やWeb開発

　2015〜 カラダメディカ出向

データ可視化やDevOps推進、

新規事業立ち上げなど

エンジニア〜POまで

趣味：ビリヤード

なんでも楽しいことに取り組みたい。

※こう見えて2児の父です

使っている技術

「CaraCoro」https://caracoro.jp

2016/09リリース

ユーザーの質問に

医師が回答するQ&Aがベースのメディアサイト

※某サイトと違って弊社では現役医師が回答しております

今日伝えたいこと

SEO対策したサイトをAPI Gateway+Lambdaで作ってみた話

SEO対策したサイトをAPI Gateway+Lambdaで作ってみた話

でのアーキテクチャ変遷と実体験

開発環境・Serverless Framework 1.4　0系から最近移行しました

・node.js 4.3

・Typescript 1系

・アーキテクチャ

　・後でお話しします

ちなみに

Serverless Framework 0系→1系への移行のポイント

プロキシ統合

プロキシ統合

プロキシ統合

環境の切り替え

環境の切り替え

API Gateway Lambda

移行前 prod/rc/dev 1つのみ aliasで切り替え

移行後 prod/rc/dev prod/rc/dev

ちなみに

テスト方法とかデプロイ方法とか

テストはserverless--offlineとか使ってみてるけど微妙に歯がゆい感じ。。。

デプロイはsls deploy --stage dev とServerlessそのまま

※あまり参考にならなくてすみません

本題

最初に考えたアーキテクチャ

HTMLは静的にしてクラインアントのajaxで

動的にデータとってくればいいっしょ

アーキテクチャ初代

サーバーレスでよくありそうなお手本

html,css,js,imageはS3でサイト配信

動的コンテンツの取得

のみAPIで実現

クライアントはvue.jsを使用

しかし問題が！

動的にURLを処理できない

動的にURLを処理できない

/qa/1234のリクエストに対して、/qa/index.htmlをS3から返却し、

ajaxを使って1234の記事をAPIから取得したい。。。

でもcloudfront + S3　でそんなすべはない

さらに

404返せない

404の挙動を404ステータスコードで返せない

/qa/1234のリクエストに対して、/qa/index.htmlをS3から返却し、

ajaxを使って1234の記事をAPIから取得する

1234の記事がnot foundだとしても、htmlを200で返却してしまっている

どうしたものか

そうだアーキテクチャ

変えよう

API GatewayでHTML返せばいいじゃん

新アーキテクチャ

パスによって

Cloudfrontが振り分け

/apiはコンテンツ取得

のためにApi Gatewayへ

/cssや/scriptや/image→S3へ振り分け

それ以外のパス

→API gateway→lambdaがS3から

htmlを取得して返す(その際に404でないかはチェック)

しかし、また問題が！

クローラーめ。。。

どうしたものか

そうだサーバーサイドレンダリングに

変えよう

新新アーキテクチャ

htmlをすべてLambda内に

ファイルとして配置

vue-server使ってレンダリング

API Gatewayのcatch-allに早く対応しないと。。。

問題はまだある！

パフォーマンス悪い。。。

たまにTimeout

パフォーマンス悪い

ENI作成処理で初回起動が遅い問題

参考：西谷さんの記事

→http://qiita.com/Keisuke69/items/1d84684f0511a062e968

Lambdaのポーリングを実施

実際15分間隔のポーリングではダメで5分間隔にしてやっとほぼほぼ解消された

（完璧ではない）

といっても超えられないレイテンシの壁

レイテンシ

Cloudfront + API Gatewayで300ms×2に近いレイテンシ

API Gatewayのcatch-allに早く対応して前段のCloudfront取り除かないと。。。

でもキャッシュがあると10msで表示されるしな。。。

でも一応、数百msは保てている

→SEO対策としてはもっと頑張りたい

まとめ

まとめ

メリット

　アーキテクチャの組み替えでいろんな要件を満たせるのは楽しい

　AWSのサービスで色々できるようになってきていて可能な要件は増えている

　SEO的にも問題ないサイトは作れる

デメリット

　気をつけないとピタゴラスイッチ化しかねない

　パフォーマンス的な制約があるのでキャッシュなどにおいて

　もっと良い設計が必要になる

ご清聴ありがとうございました