Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,255 views

Published on

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

Published in: Engineering

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

  1. 1. SEO対策したサイトを API Gateway+Lambdaで作ってみた話 株式会社カラダメディカ 平田 貴大
  2. 2. 自己紹介 氏名:平田 貴大 経歴:2011〜2015 エムティーアイ ヘルスケア系アプリ開発やWeb開発  2015〜 カラダメディカ出向 データ可視化やDevOps推進、 新規事業立ち上げなど エンジニア〜POまで 趣味:ビリヤード なんでも楽しいことに取り組みたい。 ※こう見えて2児の父です 使っている技術
  3. 3. 「CaraCoro」 https://caracoro.jp 2016/09リリース ユーザーの質問に 医師が回答するQ&A がベースのメディアサイト ※某サイトと違って 弊社では現役医師が 回答しております
  4. 4. 今日伝えたいこと
  5. 5. SEO対策したサイトを API Gateway+Lambdaで作ってみた話
  6. 6. SEO対策したサイトを API Gateway+Lambdaで作ってみた話 でのアーキテクチャ変遷と実体験
  7. 7. 開発環境 ・Serverless Framework 1.4  0系から最近移行しました ・node.js 4.3 ・Typescript 1系 ・アーキテクチャ  ・後でお話しします
  8. 8. ちなみに Serverless Framework 0系→1系への移行のポイント
  9. 9. プロキシ統合
  10. 10. プロキシ統合
  11. 11. プロキシ統合
  12. 12. 環境の切り替え
  13. 13. 環境の切り替え API Gateway Lambda 移行前 prod/rc/dev 1つのみ aliasで切り替え 移行後 prod/rc/dev prod/rc/dev
  14. 14. ちなみに テスト方法とかデプロイ方法とか テストはserverless--offlineとか使ってみてるけど微妙に歯がゆい感じ。。。 デプロイはsls deploy --stage dev とServerlessそのまま ※あまり参考にならなくてすみません
  15. 15. 本題
  16. 16. 最初に考えた アーキテクチャ
  17. 17. HTMLは静的にして クラインアントのajaxで 動的にデータとってくれば いいっしょ
  18. 18. アーキテクチャ初代 サーバーレスでよくありそうなお手本 html,css,js,imageはS3で サイト配信 動的コンテンツの取得 のみAPIで実現 クライアントはvue.jsを使用
  19. 19. しかし問題が!
  20. 20. 動的にURLを処理できない
  21. 21. 動的にURLを処理できない /qa/1234 のリクエストに対して、/qa/index.htmlをS3から返却し、 ajaxを使って1234の記事をAPIから取得したい。。。 でもcloudfront + S3 でそんなすべはない
  22. 22. さらに
  23. 23. 404返せない
  24. 24. 404の挙動を404ステータスコードで返せない /qa/1234 のリクエストに対して、/qa/index.htmlをS3から返却し、 ajaxを使って1234の記事をAPIから取得する 1234の記事がnot foundだとしても、htmlを200で返却してしまっている
  25. 25. どうしたものか
  26. 26. そうだ アーキテクチャ 変えよう
  27. 27. API Gatewayで HTML返せばいいじゃん
  28. 28. 新アーキテクチャ パスによって Cloudfrontが振り分け /apiはコンテンツ取得 のためにApi Gatewayへ /cssや/scriptや/image →S3へ振り分け それ以外のパス →API gateway→lambdaがS3から htmlを取得して返す(その際に404でないかはチェック)
  29. 29. しかし、また問題が!
  30. 30. クローラーめ。。。
  31. 31. どうしたものか
  32. 32. そうだ サーバーサイド レンダリングに 変えよう
  33. 33. 新新アーキテクチャ htmlをすべてLambda内に ファイルとして配置 vue-server使ってレンダリング API Gatewayのcatch-allに早く対応しないと。。。
  34. 34. 問題はまだある!
  35. 35. パフォーマンス悪い。。。
  36. 36. たまにTimeout
  37. 37. パフォーマンス悪い ENI作成処理で初回起動が遅い問題 参考:西谷さんの記事 →http://qiita.com/Keisuke69/items/1d84684f0511a062e968 Lambdaのポーリングを実施 実際15分間隔のポーリングではダメで5分間隔にしてやっとほぼほぼ解消された (完璧ではない)
  38. 38. といっても超えられない レイテンシの壁
  39. 39. レイテンシ Cloudfront + API Gatewayで300ms×2に近いレイテンシ API Gatewayのcatch-allに早く対応して前段のCloudfront取り除かないと。。。 でもキャッシュがあると10msで表示されるしな。。。 でも一応、数百msは保てている →SEO対策としてはもっと頑張りたい
  40. 40. まとめ
  41. 41. まとめ メリット  アーキテクチャの組み替えでいろんな要件を満たせるのは楽しい  AWSのサービスで色々できるようになってきていて可能な要件は増えている  SEO的にも問題ないサイトは作れる デメリット  気をつけないとピタゴラスイッチ化しかねない  パフォーマンス的な制約があるのでキャッシュなどにおいて  もっと良い設計が必要になる
  42. 42. ご清聴ありがとうございました

×