SEO対策したサイトをAPI Gateway+LambdaのServerless構成で作ってみた話です。実体験ベースの話です。

1. SEO対策したサイトを
API Gateway+Lambdaで作ってみた話
株式会社カラダメディカ 平田 貴大

2. 自己紹介
氏名：平田 貴大
経歴：2011〜2015 エムティーアイ
ヘルスケア系アプリ開発やWeb開発
2015〜 カラダメディカ出向
データ可視化やDevOps推進、
新規事業立ち上げなど
エンジニア〜POまで
趣味：ビリヤード
なんでも楽しいことに取り組みたい。
※こう見えて2児の父です
使っている技術

3. 「CaraCoro」
https://caracoro.jp
2016/09リリース
ユーザーの質問に
医師が回答するQ&A
がベースのメディアサイト
※某サイトと違って
弊社では現役医師が
回答しております

4. 今日伝えたいこと

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

6. SEO対策したサイトを
API Gateway+Lambdaで作ってみた話
でのアーキテクチャ変遷と実体験

7. 開発環境
・Serverless Framework 1.4
0系から最近移行しました
・node.js 4.3
・Typescript 1系
・アーキテクチャ
・後でお話しします

8. ちなみに
Serverless Framework
0系→1系への移行のポイント

9. プロキシ統合

10. プロキシ統合

11. プロキシ統合

12. 環境の切り替え

13. 環境の切り替え
API Gateway Lambda
移行前 prod/rc/dev 1つのみ aliasで切り替え
移行後 prod/rc/dev prod/rc/dev

14. ちなみに
テスト方法とかデプロイ方法とか
テストはserverless--offlineとか使ってみてるけど微妙に歯がゆい感じ。。。
デプロイはsls deploy --stage dev とServerlessそのまま
※あまり参考にならなくてすみません

15. 本題

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

17. HTMLは静的にして
クラインアントのajaxで
動的にデータとってくれば
いいっしょ

18. アーキテクチャ初代
サーバーレスでよくありそうなお手本
html,css,js,imageはS3で
サイト配信
動的コンテンツの取得
のみAPIで実現
クライアントはvue.jsを使用

19. しかし問題が！

20. 動的にURLを処理できない

21. 動的にURLを処理できない
/qa/1234
のリクエストに対して、/qa/index.htmlをS3から返却し、
ajaxを使って1234の記事をAPIから取得したい。。。
でもcloudfront + S3 でそんなすべはない

22. さらに

23. 404返せない

24. 404の挙動を404ステータスコードで返せない
/qa/1234
のリクエストに対して、/qa/index.htmlをS3から返却し、
ajaxを使って1234の記事をAPIから取得する
1234の記事がnot foundだとしても、htmlを200で返却してしまっている

25. どうしたものか

26. そうだ
アーキテクチャ
変えよう

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

28. 新アーキテクチャ
パスによって
Cloudfrontが振り分け
/apiはコンテンツ取得
のためにApi Gatewayへ
/cssや/scriptや/image
→S3へ振り分け
それ以外のパス
→API gateway→lambdaがS3から
htmlを取得して返す(その際に404でないかはチェック)

29. しかし、また問題が！

31. クローラーめ。。。

32. どうしたものか

33. そうだ
サーバーサイド
レンダリングに
変えよう

34. 新新アーキテクチャ
htmlをすべてLambda内に
ファイルとして配置
vue-server使ってレンダリング
API Gatewayのcatch-allに早く対応しないと。。。

35. 問題はまだある！

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

37. たまにTimeout

38. パフォーマンス悪い
ENI作成処理で初回起動が遅い問題
参考：西谷さんの記事
→http://qiita.com/Keisuke69/items/1d84684f0511a062e968
Lambdaのポーリングを実施
実際15分間隔のポーリングではダメで5分間隔にしてやっとほぼほぼ解消された
（完璧ではない）

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

40. レイテンシ
Cloudfront + API Gatewayで300ms×2に近いレイテンシ
API Gatewayのcatch-allに早く対応して前段のCloudfront取り除かないと。。。
でもキャッシュがあると10msで表示されるしな。。。
でも一応、数百msは保てている
→SEO対策としてはもっと頑張りたい

41. まとめ

42. まとめ
メリット
アーキテクチャの組み替えでいろんな要件を満たせるのは楽しい
AWSのサービスで色々できるようになってきていて可能な要件は増えている
SEO的にも問題ないサイトは作れる
デメリット
気をつけないとピタゴラスイッチ化しかねない
パフォーマンス的な制約があるのでキャッシュなどにおいて
もっと良い設計が必要になる

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