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

by goro ohba

Slide 1

Slide 1 text

ゼロから始めるAWS AppSync導入の軌跡と振り返り〜課題も添えて〜 A-1 @ AWS Dev Day Online Japan 2021 AlphaDrive / NewsPicks 大場吾郎

Slide 2

Slide 2 text

大場吾郎 Goro Ohba ● 新卒でERPパッケージベンダー ● 2018年イノベーションテックカンパニー ● 2020年3月アルファドライブにジョイン ○ 最近は主にフロント開発 ○ AWS CDK、ChatOps使って仕組み作り 2 自己紹介株式会社アルファドライブ / 株式会社ニューズピックステックリード

Slide 3

Slide 3 text

3 サービス NewsPicks NewsPicks Enterprise

Slide 4

Slide 4 text

NewsPicks Academia 4 サービス MOOC Enterprise NewsPicks Learning に変更 11/15 予定

Slide 5

Slide 5 text

※現在稼働中 MOOC EnterpriseにGraphQLの導入 REST APIのGETに対しQueryを段階導入 5 今回やったこと MOOC Enterprise

Slide 6

Slide 6 text

NewsPicksの技術的負債の解消のための資産蓄積・技術検証今回焦点を当てたのは以下の問題 ● APIがフロントで使わないデータを返却している ● WEB、iOS、Androidそれぞれで最適なAPIを作るは大変 ● 画面で必要なデータを取得するために複数のAPIを実行 ● 画面で必要なデータを一度に取得するために複雑な処理を書いたAPIをつくる 6 何故やったのか

Slide 7

Slide 7 text

7 とあるAWS SAの発表にて Nope！ Tori@trics “技術的負債とステークホルダと説明責任と / The Debt”. 2021-03-12. https://speakerdeck.com/toricls/the-debt（参照2021-06-28）

Slide 8

Slide 8 text

8 とあるAWS SAの発表にて Tori@trics “技術的負債とステークホルダと説明責任と / The Debt”. 2021-03-12. https://speakerdeck.com/toricls/the-debt（参照2021-06-28）

Slide 9

Slide 9 text

GraphQLアーキテクチャ選択 9

Slide 10

Slide 10 text

Apollo Server AWS AppSync 環境手動で構築フルマネージドサーバー管理必要不要パフォーマンスレイテンシチューニングサービス依存負荷耐性チューニング耐性強クォータ、Pre-warming コスト Fargateなど構築方法によるクエリ操作、データ転送、AWS Lambdaなどリクエスト数、データ量、接続時間に依存 10 アーキテクチャ比較

Slide 11

Slide 11 text

Slide 12

Slide 12 text

本番リリースまでにはサービス要件により困難がありましたが乗り越えると快適やっぱりフルマネージドは便利！ ● GraphQLの本番環境での検証が短期間でできた ● フロントエンジニアでも簡単にできた × 1ヶ月 12 AWS AppSync よかったこと&感想

Slide 13

Slide 13 text

ということで、始めていきます 13

Slide 14

Slide 14 text

1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題 14

Slide 15

Slide 15 text

15 サービスの構成動画関連API

Slide 16

Slide 16 text

リクエスト ● 40,000 / Day ● 80 / min 16 サービスの構成動画関連API

Slide 17

Slide 17 text

17 AWS AppSync

Slide 18

Slide 18 text

Slide 19

Slide 19 text

19 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題

Slide 20

Slide 20 text

20 サービスの構成動画関連API

Slide 21

Slide 21 text

・HTTP リゾルバーを設定・マッピングテンプレートはVTLを使う。 21 AWS AppSync の設定 HTTP

Slide 22

Slide 22 text

🎉 ここまでの検証を1日でできた！ 22

Slide 23

Slide 23 text

🤔 レイテンシどのくらいなんだろう 23

Slide 24

Slide 24 text

24 パフォーマンス計測1 API Speed (sec) クライアント AWS AppSync 0.11 0.06 ※ Response data 0.5KB程度のシンプルなAPIで計測

Slide 25

Slide 25 text

25 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題

Slide 26

Slide 26 text

26 ちょっと予習

Slide 27

Slide 27 text

Edge Locationsで高速・軽量にコード実行が可能！ 2021/5 Release！ 27 CloudFront Functions

Slide 28

Slide 28 text

Amazon CloudFrontのイベント 28 Viewer Request Viewer Response Origin Request Origin Response CloudFront Functions Lambda@Edge Lambda@Edge

Slide 29

Slide 29 text

req/resのヘッダー操作など前処理/後処理が簡単・軽量に！ CloudFront Functionsの役割 29

Slide 30

Slide 30 text

30 CloudFront Functions behavior

Slide 31

Slide 31 text

31 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題

Slide 32

Slide 32 text

32 1. Cookieを利用している 2. パブリックアクセスするAPIが存在 3. ステージング環境でのテストを行えるようにするサービスの要件

Slide 33

Slide 33 text

必要なこと 1-1. AWS AppSyncへのカスタムドメイン設定 1-2. CORS設定 1-3. AWS AppSyncからAPIサーバーにCookieのforward 33 1. Cookieを利用している CookieをAPIサーバーまで送る

Slide 34

Slide 34 text

問題 - AWS AppSyncにはカスタムドメインが設定できない 34 1-1. AWS AppSyncへのカスタムドメイン設定

Slide 35

Slide 35 text

問題 - AWS AppSyncにはカスタムドメインが設定できない解決策 - CloudFrontを導入する 35 1-1. AWS AppSyncへのカスタムドメイン設定 xxxxx.newspicks.com

Slide 36

Slide 36 text

①フロント側にcredentialsの設定してCookieを送る ②Viewer Responseで以下を設定する ● access-control-allow-origin ● access-control-allow-credentials 36 1-2. CORS設定 Viewer Response ① ② ②

Slide 37

Slide 37 text

問題 - AWS AppSync上ではCookieにアクセスできないのでforwardできない 37 1-3. AWS AppSyncからAPIサーバーにCookieのforward

Slide 38

Slide 38 text

解決策 ①Viewer RequestでCookieをカスタムヘッダーに退避 ex. x-custom-cookie ②AWS AppSyncからAPIに送る時にカスタムヘッダーからCookieにforward 38 1-3. AWS AppSyncからAPIサーバーにCookieのforward Viewer Request ① ②

Slide 39

Slide 39 text

39 2. パブリックアクセスするAPIが存在トップ画面は未ログイン時もAPIからデータを取得して表示 → AWS AppSyncの認証どうしよう🤔

Slide 40

Slide 40 text

● API_KEY 認証 ● AWS_IAM 認証 ● OPENID_CONNECT 認証 ● AMAZON_COGNITO_USER_POOLS 認証 40 認証方法を選択ここの認証

Slide 41

Slide 41 text

● API_KEY 認証 →○ ● AWS_IAM 認証 →× CloudFront挟んでると使えない ● OPENID_CONNECT 認証 →× パブリックAPIへの対応が難しい、導入コストが高い ● AMAZON_COGNITO_USER_POOLS 認証 →× NewsPicks全体に入れるとクォータに引っかかる可能性がある 41 認証方法を選択ここの認証

Slide 42

Slide 42 text

● デフォルト期限が1週間 ● 期限の設定可能は365日後まで ● 削除ボタンを押すと警告なく削除される、、 ● API KEYをユーザー側に配信すると何かあった時に復旧がつらい 42 API KEYを選んだ時の注意点

Slide 43

Slide 43 text

● API KEYをユーザー側に配信すると何かあった時に復旧がつらい → Viewer RequestでAPI KEYを差し込む対応 43 API KEYを選んだ時の注意点 Viewer Request API KEY

Slide 44

Slide 44 text

課題 HTTPリゾルバーがパブリックアクセスのためプライベートなネットワークにアクセスできない × 44 3. ステージング環境でのテストを行えるようにする HTTP

Slide 45

Slide 45 text

本番 🤔 本番と同じ構成でもう一つ作ってトラフィックを分けてテストする、、、？ 45 3. ステージング環境でのテストを行えるようにするやりたいこと - 本番環境と同じ環境・コードでテストしてリリース HTTP HTTP 本番（AWS AppSyncテスト用）

Slide 46

Slide 46 text

解決策 - HTTPをやめてLambda Resolverを利用するやりたいこと - 本番環境と同じ環境・コードでテストしてリリース × 46 3. ステージング環境でのテストを行えるようにする HTTP

Slide 47

Slide 47 text

47 構成図

Slide 48

Slide 48 text

48 🤔 レイテンシどのくらいなんだろう

Slide 49

Slide 49 text

49 パフォーマンス計測2 0.19 0.11 0.11 0.06 ※ Response data 0.5KB程度のシンプルなAPIで計測 API Speed (sec) クライアント CloudFront Lambda Resolver AWS AppSync

Slide 50

Slide 50 text

🤔 CloudFront入れたけど遅延ないのなんでだっけ？ 50

Slide 51

Slide 51 text

AWS AppSyncはもともとCloudFrontを通しているのでカスタムドメインのためにCloudFrontを入れても影響はほぼなかった 51 パフォーマンス計測2

Slide 52

Slide 52 text

● ステージング環境のセキュリティ ● CloudFront、AWS AppSync間の通信制限 WAF 52 セキュリティ

Slide 53

Slide 53 text

53 構成図

Slide 54

Slide 54 text

ローカル開発・コード管理 54

Slide 55

Slide 55 text

55 ローカル開発・コード管理 AWS CDK Serverless Framework コード TypeScript、Pythonなど yaml デプロイ CloudFormation CloudFormation ローカル開発 SAM CLI プラグイン

Slide 56

Slide 56 text

serverless.ymlファイルの一部 ● Lambda ResolverをTypeScriptで管理 ● ローカルでAWS AppSync、Lambdaをテスト ● 環境別に設定ファイルを分割 56 ローカル開発・コード管理シミュレーター

Slide 57

Slide 57 text

57 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題

Slide 58

Slide 58 text

58 Chatbot Lambda CodeBuild Slack Notiﬁcation SNS デプロイフロー構築 Chatbot Invoke Serverless Framework AWS CDKで構築 ※Chatbotは別スタック or 手動で管理

Slide 59

Slide 59 text

59 デプロイフロー構築

Slide 60

Slide 60 text

60 1. サービスの構成 2. 入門編：AWS AppSyncの導入 3. 実践編：サービスの要件に合わせて構築 4. デプロイフロー構築 5. まとめ、残った課題

Slide 61

Slide 61 text

AWS AppSyncよかったこと ● インフラ詳しくなくても短期間で構築・検証できた気をつけたいこと ● レイテンシは 0.05 sec(AWS Appsync) + 0.08 sec(Lambda Resolver) ● Cookieを使いたい場合はちょっと手間がかかる ● アクセス数・スパイクアクセスを考慮してクォータを確認し、必要があれば戦略を立てる ● Lambdaを使う場合はコスト、負荷の確認が必要 61 まとめ

Slide 62

Slide 62 text

ResolverをVTLで書くのつらい 62 残った課題パフォーマンスがもう少し改善されると嬉しい Lambda使わなくてもVPNで保護されたネットワークにアクセスしたい API KEYの運用は続けたくない

Slide 63

Slide 63 text

63 ISSUEの対応に期待

Slide 64

Slide 64 text

Lambda authorization for AWS AppSync GraphQL APIs 64 New feature 2021/07/30

Slide 65

Slide 65 text

株式会社アルファドライブ 65 We are hiring! 株式会社ニューズピックス

Slide 66

Slide 66 text

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