[AWS Dev Day 2021 A-1] ゼロから始めるAWS AppSync導入の軌跡と振り返り 〜課題も添えて〜

AWS Dev Day JAPAN 2021 / 2021-09-28 A-1
[Abstract]
AWS AppSyncを利用してNewsPicksの一部のサービスにGraphQLの導入を行いました。
導入の第一段階として既存のAPIや認証方法は変えずにGraphQLのQueryのみを用い、メリットが高い部分から段階導入しています。
このセッションではAWS CDK・Serverless Framewokを用いた環境構築、ChatOps・CodeBuildを用いたデプロイフローなどAppSync導入で検証したこと、ぶつかった問題とその解決、そして今後の課題と改善を紹介させていただきます。

Transcript

1. ゼロから始めるAWS AppSync導入の軌跡と振り返り 〜課題も添えて〜 A-1 @ AWS Dev Day Online Japan 2021 AlphaDrive / NewsPicks 大場 吾郎
2. 大場 吾郎 Goro Ohba • 新卒でERPパッケージベンダー • 2018年 イノベーションテックカンパニー • 2020年3月アルファドライブにジョイン ◦ 最近は主にフロント開発 ◦ AWS CDK、ChatOps使って仕組み作り 2 自己紹介 株式会社アルファドライブ / 株式会社ニューズピックス テックリード
3. 3 サービス NewsPicks NewsPicks Enterprise
4. NewsPicks Academia 4 サービス MOOC Enterprise NewsPicks Learning に変更 11/15 予定
5. ※現在稼働中 MOOC EnterpriseにGraphQLの導入 REST APIのGETに対しQueryを段階導入 5 今回やったこと MOOC Enterprise
6. NewsPicksの技術的負債の解消のための 資産蓄積・技術検証 今回焦点を当てたのは以下の問題 • APIがフロントで使わないデータを返却している • WEB、iOS、Androidそれぞれで最適なAPIを作るは大変 • 画面で必要なデータを取得するために複数のAPIを実行 • 画面で必要なデータを一度に取得するために複雑な処理を書いたAPIをつくる 6 何故やったのか
7. 7 とあるAWS SAの発表にて Nope！ Tori@trics “技術的負債とステークホルダと説明責任と / The Debt”. 2021-03-12. https://speakerdeck.com/toricls/the-debt（参照2021-06-28）
8. 8 とあるAWS SAの発表にて Tori@trics “技術的負債とステークホルダと説明責任と / The Debt”. 2021-03-12. https://speakerdeck.com/toricls/the-debt（参照2021-06-28）
9. GraphQLアーキテクチャ選択 9
10. Apollo Server AWS AppSync 環境 手動で構築 フルマネージド サーバー管理 必要 不要 パフォーマンス レイテンシ チューニング サービス依存 負荷耐性 チューニング 耐性強 クォータ、Pre-warming コスト Fargateなど構築方法による クエリ操作、データ転送、AWS Lambdaなど リクエスト数、データ量、接続時間に依存 10 アーキテクチャ比較
11. Apollo Server AWS AppSync 環境 手動で構築 フルマネージド サーバー管理 必要 不要 パフォーマンス レイテンシ チューニング サービス依存 負荷耐性 チューニング 耐性強 クォータ、Pre-warming コスト Fargateなど構築方法による クエリ操作、データ転送、AWS Lambdaなど リクエスト数、データ量、接続時間に依存 11 アーキテクチャ比較
12. 本番リリースまでにはサービス要件により困難がありましたが 乗り越えると快適 やっぱりフルマネージドは便利！ • GraphQLの本番環境での検証が短期間でできた • フロントエンジニアでも簡単にできた × 1ヶ月 12 AWS AppSync よかったこと&感想
13. ということで、始めていきます 13
14. 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題 14
15. 15 サービスの構成 動画関連API
16. リクエスト • 40,000 / Day • 80 / min 16 サービスの構成 動画関連API
17. 17 AWS AppSync
18. Apollo Server AWS AppSync 環境 手動で構築 フルマネージド サーバー管理 必要 不要 パフォーマンス レイテンシ チューニング サービス依存 負荷耐性 チューニング 耐性強 クォータ、Pre-warming コスト Fargateなど構築方法による クエリ操作、データ転送、AWS Lambdaなど リクエスト数、データ量、接続時間に依存 18 アーキテクチャ比較
19. 19 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題
20. 20 サービスの構成 動画関連API
21. ・HTTP リゾルバーを設定 ・マッピングテンプレートはVTLを使う。 21 AWS AppSync の設定 HTTP
22. 🎉 ここまでの検証を1日でできた！ 22
23. 🤔 レイテンシどのくらいなんだろう 23
24. 24 パフォーマンス計測1 API Speed (sec) クライアント AWS AppSync 0.11 0.06 ※ Response data 0.5KB程度のシンプルなAPIで計測
25. 25 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題
26. 26 ちょっと予習
27. Edge Locationsで 高速・軽量にコード実行が可能！ 2021/5 Release！ 27 CloudFront Functions
28. Amazon CloudFrontのイベント 28 Viewer Request Viewer Response Origin Request Origin Response CloudFront Functions Lambda@Edge Lambda@Edge
29. req/resのヘッダー操作など 前処理/後処理が簡単・軽量に！ CloudFront Functionsの役割 29
30. 30 CloudFront Functions behavior
31. 31 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題
32. 32 1. Cookieを利用している 2. パブリックアクセスするAPIが存在 3. ステージング環境でのテストを行えるようにする サービスの要件
33. 必要なこと 1-1. AWS AppSyncへのカスタムドメイン設定 1-2. CORS設定 1-3. AWS AppSyncからAPIサーバーにCookieのforward 33 1. Cookieを利用している CookieをAPIサーバーまで送る
34. 問題 - AWS AppSyncにはカスタムドメインが設定できない 34 1-1. AWS AppSyncへのカスタムドメイン設定
35. 問題 - AWS AppSyncにはカスタムドメインが設定できない 解決策 - CloudFrontを導入する 35 1-1. AWS AppSyncへのカスタムドメイン設定 xxxxx.newspicks.com
36. ①フロント側にcredentialsの設定してCookieを送る ②Viewer Responseで以下を設定する • access-control-allow-origin • access-control-allow-credentials 36 1-2. CORS設定 Viewer Response ① ② ②
37. 問題 - AWS AppSync上ではCookieにアクセスできないのでforwardできない 37 1-3. AWS AppSyncからAPIサーバーにCookieのforward
38. 解決策 ①Viewer RequestでCookieをカスタムヘッダーに退避 ex. x-custom-cookie ②AWS AppSyncからAPIに送る時にカスタムヘッダーからCookieにforward 38 1-3. AWS AppSyncからAPIサーバーにCookieのforward Viewer Request ① ②
39. 39 2. パブリックアクセスするAPIが存在 トップ画面は未ログイン時もAPIからデータを取得して表示 → AWS AppSyncの認証どうしよう🤔
40. • API_KEY 認証 • AWS_IAM 認証 • OPENID_CONNECT 認証 • AMAZON_COGNITO_USER_POOLS 認証 40 認証方法を選択 ここの認証
41. • API_KEY 認証 →◦ • AWS_IAM 認証 →× CloudFront挟んでると使えない • OPENID_CONNECT 認証 →× パブリックAPIへの対応が難しい、導入コストが高い • AMAZON_COGNITO_USER_POOLS 認証 →× NewsPicks全体に入れるとクォータに引っかかる可能性がある 41 認証方法を選択 ここの認証
42. • デフォルト期限が1週間 • 期限の設定可能は365日後まで • 削除ボタンを押すと警告なく削除される、、 • API KEYをユーザー側に配信すると何かあった時に復旧がつらい 42 API KEYを選んだ時の注意点
43. • API KEYをユーザー側に配信すると何かあった時に復旧がつらい → Viewer RequestでAPI KEYを差し込む対応 43 API KEYを選んだ時の注意点 Viewer Request API KEY
44. 課題 HTTPリゾルバーがパブリックアクセスのため プライベートなネットワークにアクセスできない × 44 3. ステージング環境でのテストを行えるようにする HTTP
45. 本番 🤔 本番と同じ構成でもう一つ作ってトラフィックを分けてテストする、、、？ 45 3. ステージング環境でのテストを行えるようにする やりたいこと - 本番環境と同じ環境・コードでテストしてリリース HTTP HTTP 本番（AWS AppSyncテスト用）
46. 解決策 - HTTPをやめてLambda Resolverを利用する やりたいこと - 本番環境と同じ環境・コードでテストしてリリース × 46 3. ステージング環境でのテストを行えるようにする HTTP
47. 47 構成図
48. 48 🤔 レイテンシどのくらいなんだろう
49. 49 パフォーマンス計測2 0.19 0.11 0.11 0.06 ※ Response data 0.5KB程度のシンプルなAPIで計測 API Speed (sec) クライアント CloudFront Lambda Resolver AWS AppSync
50. 🤔 CloudFront入れたけど遅延ないのなんでだっけ？ 50
51. AWS AppSyncはもともとCloudFrontを通しているので カスタムドメインのためにCloudFrontを入れても影響はほぼなかった 51 パフォーマンス計測2
52. • ステージング環境のセキュリティ • CloudFront、AWS AppSync間の通信制限 WAF 52 セキュリティ
53. 53 構成図
54. ローカル開発・コード管理 54
55. 55 ローカル開発・コード管理 AWS CDK Serverless Framework コード TypeScript、Pythonなど yaml デプロイ CloudFormation CloudFormation ローカル開発 SAM CLI プラグイン
56. serverless.ymlファイルの一部 • Lambda ResolverをTypeScriptで管理 • ローカルでAWS AppSync、Lambdaをテスト • 環境別に設定ファイルを分割 56 ローカル開発・コード管理 シミュレーター
57. 57 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題
58. 58 Chatbot Lambda CodeBuild Slack Notification SNS デプロイフロー構築 Chatbot Invoke Serverless Framework AWS CDKで構築 ※Chatbotは別スタック or 手動で管理
59. 59 デプロイフロー構築
60. 60 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題
61. AWS AppSyncよかったこと • インフラ詳しくなくても短期間で構築・検証できた 気をつけたいこと • レイテンシは 0.05 sec(AWS Appsync) + 0.08 sec(Lambda Resolver) • Cookieを使いたい場合はちょっと手間がかかる • アクセス数・スパイクアクセスを考慮してクォータを確認し、 必要があれば戦略を立てる • Lambdaを使う場合はコスト、負荷の確認が必要 61 まとめ
62. ResolverをVTLで書くのつらい 62 残った課題 パフォーマンスがもう少し改善されると嬉しい Lambda使わなくてもVPNで保護されたネットワークにアクセスしたい API KEYの運用は続けたくない
63. 63 ISSUEの対応に期待
64. Lambda authorization for AWS AppSync GraphQL APIs 64 New feature 2021/07/30
65. 株式会社アルファドライブ 65 We are hiring! 株式会社ニューズピックス
66. 66 ご清聴ありがとうございました