[Developers.IO 2020 Showcase][Day2]AWS Amplify + CDKを用いて短納期・少人数・フルリモートで作る管理画面

クラスメソッド株式会社様主催「Developers.IO 2020 Showcase」2日目に登壇した弊社発表資料になります。
https://classmethod.jp/m/devio_2020_showcase/

Transcript

1. AWS Amplify + CDKを⽤いて 短納期・少⼈数・フルリモートで作る 管理画⾯ SBギフト株式会社 サービスシステム部 ⼊倉元太 Copyright (C) 2020 SB Gift Corp.
2. ⾃⼰紹介 Copyright (C) 2020 SB Gift Corp. ⼊倉 元太 SBギフト株式会社 サービスシステム部 (2018年⼊社) Irikura Genta
3. 本⽇お話しすること Copyright (C) 2020 SB Gift Corp. • AWS AmplifyとAWS CDK、AppSync以外の個別サービスの詳細 • AWS Amplifyの静的webホスティング以外の機能 • AWS以外の外部サービス • プロジェクトの事例紹介 • AWS Amplifyによるwebサイトホスティング • AWS CDKによるインフラおよびアプリのプロビジョニング • AWS AppSyncの知⾒ 話すこと 話さないこと
4. アジェンダ Copyright (C) 2020 SB Gift Corp. • ⾃社紹介 • クラスメソッド様との開発 • ⽣産性を⾼めたツールと開発⼿法 • プロジェクトの総括と改善点 • 最後に
5. Copyright (C) 2020 SB Gift Corp. ⾃社紹介
6. 会社紹介 – SBギフト Copyright (C) 2020 SB Gift Corp. 設⽴ 2006年 9⽉ 代表取締役 藤平 ⼤輔 拠点 福岡・東京 従業員数 20名 (内ITエンジニア3名) コンシューマ向け サービス 法⼈向けサービス (他サービスも提供しております) https://sbg.jp/ https://www.softbankgift.co.jp/
7. 会社紹介 – SBギフト Copyright (C) 2020 SB Gift Corp. 設⽴ 2006年 9⽉ 代表取締役 藤平 ⼤輔 拠点 福岡・東京 従業員数 20名 (内ITエンジニア3名) コンシューマ向け サービス 法⼈向けサービス (他サービスも提供しております) https://sbg.jp/ https://www.softbankgift.co.jp/ (内ITエンジニア3名)
8. 会社紹介 – SBギフト ITエンジニア3名 Copyright (C) 2020 SB Gift Corp. 先輩 上司 僕 ※画像はクラスメソッド様 事例紹介より引⽤ https://classmethod.jp/cases/sbgift3/ 3⼈で社内システムから社外向けサービスを開発/保守しています。
9. 会社紹介 – SBギフト Copyright (C) 2020 SB Gift Corp. 設⽴ 2006年 9⽉ 代表取締役 藤平 ⼤輔 拠点 福岡・東京 従業員数 20名 (内ITエンジニア3名) コンシューマ向け サービス 法⼈向けサービス (他サービスも提供しております) https://sbg.jp/ https://www.softbankgift.co.jp/
10. Webキャンペーンシステム Copyright (C) 2020 SB Gift Corp. サービスイン 2019年 12⽉ AWS 利⽤サービス API Gateway, Lambda, DynamoDB, S3, etc.. シリアルID認証 LINE認証 Twitter認証 抽選 落選 当選 構成 サーバレス サービスイン当初 管理画⾯なし
11. 管理画⾯がないという事 Copyright (C) 2020 SB Gift Corp. < 検証環境にデータ登録してください︕ < キャンペーン画⾯の操作を教えてください︕ < 検証環境にアクセス制限はできますか︖ < エラー出たんですけど︕ < 顧客からXXXって要望が出たんだけど︖ < 本番環境にデータ登録してください︕今週中︕ システムの管理で、他業務や想定していた作業に着⼿できなくなる問題が発⽣しました。
12. 管理画⾯をどう作るべきか︖ Copyright (C) 2020 SB Gift Corp. Amazon EC2 VPC Elastic Load Balancing 弊社 他サービス管理画⾯ Amazon EC2
13. 管理画⾯をどう作るべきか︖ Copyright (C) 2020 SB Gift Corp. Amazon EC2 EC2インスタンスの管理でこれだけある。 これらを3⼈だけで対応するのはかなり厳しい現状がある。 EC2インスタンスをリザーブドインスタンスで運⽤してるがランニングコストが⼤きい。 管理対象 OS ミドルウェア ランタイム アプリケーション
14. 抱える課題 Copyright (C) 2020 SB Gift Corp. 素早く管理画⾯を構成したい。 ただランニング費⽤・管理コストは抑えたい。 できる︖
15. 抱える課題 Copyright (C) 2020 SB Gift Corp. できます︕ クラスメソッド 和⽥⽒
16. 会社紹介 – SBギフトとクラスメソッド Copyright (C) 2020 SB Gift Corp. AWSでの開発実績のあるクラスメソッド様に開発⽀援をいただきました。
17. 本⽇お話しすること Copyright (C) 2020 SB Gift Corp. 管理画⾯を作った事例をご紹介 期間 ⼈員 サーバレス フルリモート 2ヶ⽉ 2名
18. Copyright (C) 2020 SB Gift Corp. クラスメソッド様との開発
19. 今回のプロジェクトに求めるもの Copyright (C) 2020 SB Gift Corp. 短納期 低ランニングコスト 低管理コスト 実現させるために「作らないこと」が⼤事
20. 作る部分を極⼒少なくする Copyright (C) 2020 SB Gift Corp. IaaS Amazon EC2 アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア FaaS AWS Lambda アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア SaaS アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア AWS AppSync ユーザー管理 AWS管理
21. 作る部分を極⼒少なくするソリューション Copyright (C) 2020 SB Gift Corp. 短納期 低ランニングコスト 低管理コスト フレームワーク サーバレス FaaS / SaaS AWS Amplify AWS CDK 外部サービス
22. フルリモートでの開発体制 Copyright (C) 2020 SB Gift Corp. クラスメソッド 加藤⽒ フロントエンド作成 SBギフト ⼊倉 バックエンド作成 コミュニケーション 定例MTG 定例議事録/課題管理 コードホスティング
23. 作成物 – 管理画⾯ Copyright (C) 2020 SB Gift Corp. フレームワーク React UIフレームワーク Material-UI 認証基盤 Auth0 画⾯数 15 リソースのCRUD完備 CSVアップロード機能あり
24. 管理画⾯ - 構成 Copyright (C) 2020 SB Gift Corp. Amazon Route 53 AWS Amplify AWS AppSync AWS Lambda Amazon Simple Storage Service AWS Lambda AWS Lambda Amazon DynamoDB Amazon Simple Queue Service AWS CDK Auth0 React フロントエンド バックエンド 外部サービス AWS Lambda
25. フロントエンド Copyright (C) 2020 SB Gift Corp. Amazon Route 53 AWS Amplify AWS AppSync AWS Lambda Amazon Simple Storage Service AWS Lambda AWS Lambda Amazon DynamoDB Amazon Simple Queue Service AWS CDK Auth0 React フロントエンド バックエンド 外部サービス AWS Lambda
26. 認証認可 Copyright (C) 2020 SB Gift Corp. Amazon Route 53 AWS Amplify AWS AppSync AWS Lambda Amazon Simple Storage Service AWS Lambda AWS Lambda Amazon DynamoDB Amazon Simple Queue Service AWS CDK Auth0 React フロントエンド バックエンド 外部サービス AWS Lambda
27. CSVアップロード機能 Copyright (C) 2020 SB Gift Corp. Amazon Route 53 AWS Amplify AWS AppSync AWS Lambda Amazon Simple Storage Service AWS Lambda AWS Lambda Amazon DynamoDB Amazon Simple Queue Service AWS CDK Auth0 React フロントエンド バックエンド 外部サービス AWS Lambda
28. ⾮同期ジョブ処理 Copyright (C) 2020 SB Gift Corp. Amazon Route 53 AWS Amplify AWS AppSync AWS Lambda Amazon Simple Storage Service AWS Lambda AWS Lambda Amazon DynamoDB Amazon Simple Queue Service AWS CDK Auth0 React フロントエンド バックエンド 外部サービス AWS Lambda
29. AppSync API Copyright (C) 2020 SB Gift Corp. Amazon Route 53 AWS Amplify AWS AppSync AWS Lambda Amazon Simple Storage Service AWS Lambda AWS Lambda Amazon DynamoDB Amazon Simple Queue Service AWS CDK Auth0 React フロントエンド バックエンド 外部サービス AWS Lambda
30. CDKプロビジョニング範囲 Copyright (C) 2020 SB Gift Corp. Amazon Route 53 AWS Amplify AWS AppSync AWS Lambda Amazon Simple Storage Service AWS Lambda AWS Lambda Amazon DynamoDB Amazon Simple Queue Service AWS CDK Auth0 React フロントエンド バックエンド 外部サービス AWS Lambda
31. Copyright (C) 2020 SB Gift Corp. ⽣産性を⾼めたツールと開発⼿法
32. ⽣産性を⾼めたフレームワーク Copyright (C) 2020 SB Gift Corp. AWS Amplify AWS CDK
33. 最速webサイトホスティングフレームワーク Copyright (C) 2020 SB Gift Corp. AWS Amplify AWS Amplify（アプリケーションの構築とデプロイ）| AWS https://aws.amazon.com/jp/amplify/
34. AWS サービスによるwebサイトホスティング Copyright (C) 2020 SB Gift Corp. Amazon Simple Storage Service 開発者 GitHub AWS CodePipeline AWS CodeBuild AWS CodeDeploy Amazon CloudFront ユーザー パイプラインを作成し、配信を構築するまで結構な⼿間がかかる パイプライン テスト ビルド デプロイ ホスト CDN
35. AWS Amplifyによるwebサイトホスティング Copyright (C) 2020 SB Gift Corp. 開発者 GitHub ユーザー AWS Amplify AWS AmplifyならGitHubに接続して、ビルドの設定を記述するだけで配信が可能 パイプライン テスト ビルド デプロイ ホスト CDN
36. IaCを実現する最⾼のツール Copyright (C) 2020 SB Gift Corp. AWS CDK AWS クラウド開発キット – アマゾン ウェブ サービス https://aws.amazon.com/jp/cdk/
37. AWSインフラのプロビジョニングツール Copyright (C) 2020 SB Gift Corp. AWS CloudFormation AWS CDK 記述 JSON JSON HCL YAML Typescript Python Java C# AWS CDKならプログラミング⾔語でインフラを記述できる
38. Copyright (C) 2020 SB Gift Corp. 今回のプロジェクトでのAWS CDK利⽤
39. 今回のプロジェクトでのAWS CDK利⽤ Copyright (C) 2020 SB Gift Corp. AWS CDK インフラストラクチャ アプリケーション インフラとアプリケーションを同時にデプロイできるようにした DynamoDB S3 Lambda Lambda Layer AppSync SQS
40. AWS CDKによるプロビジョニング Copyright (C) 2020 SB Gift Corp. Stack Storage Construct DB Construct API Construct Lambda Layer Construct Job Construct AWS CloudFormation Template { "Resources": { "BucketDevExampleXXXXXXX": { "Type": "AWS::S3::Bucket", "Properties": { "BucketName": "dev-example-bucket", "CorsConfiguration": { ... cdk synth cdk deploy
41. AWS CDKによるインフラストラクチャのプロビジョニング Copyright (C) 2020 SB Gift Corp. Stack Storage Construct DB Construct API Construct Lambda Layer Construct Job Construct // S3のバケットを作成および参照 const storageCons = new StorageConstruct(this, ʻStorageConstructʼ, props); export class StorageConstruct extends cdk.Construct { defBucket: s3.Bucket; refBucket: s3.IBucket; constructor(scope: cdk.Construct, id: string, props?: StorageConstructProps) { super(scope, id); // 環境を取得(dev/stg/prd) const target = props!.target; // S3バケットを定義 this.defBucket = new s3.Bucket(this, `${target}-def-bucket`, { bucketName: `${target}-def-bucket` }); // S3バケットを参照 const refBucketName = `${target}-ref-bucket ` this.refBucket = s3.Bucket.fromBucketName(this, refBucketName, refBucketName); } public buckets(): Buckets { return { defBucket: this.defBucket, refBucket: this.refBucket, }; } }
42. AWS CDKによるアプリケーションのプロビジョニング Copyright (C) 2020 SB Gift Corp. Stack Storage Construct DB Construct API Construct Lambda Layer Construct Job Construct export class LambdaLayerConstruct extends cdk.Construct { nodeLayer: lambda.LayerVersion; constructor(scope: cdk.Construct, id: string, props?: LambdaLayerStackProps) { super(scope, id); // 環境を取得(dev/stg/prd) const target = props!.target; // Lambda layerを定義 this.nodeLayer = new lambda.LayerVersion(this, `${target}NodeLayer`, { code: lambda.AssetCode.fromAsset(NODE_LAMBDA_LAYER_DIR), compatibleRuntimes: [lambda.Runtime.NODEJS_12_X] }); } public layer(): lambda.LayerVersion { return this.nodeLayer; } }
43. AWS CDKによるアプリケーションのプロビジョニング Copyright (C) 2020 SB Gift Corp. Stack Storage Construct DB Construct API Construct Lambda Layer Construct Job Construct // Lambdaの定義 const exampleLambda = new lambda.Function(this, `${target}ExampleLambda`, { code: lambda.Code.fromAsset('src/lambdaʼ), handler: 'handlers/s3/defBucket/csv-uploaded-event.handlerʼ, layers: [props.layer], // Lambda Layerの設定 runtime: lambda.Runtime.NODEJS_12_X, timeout: Duration.seconds(900), memorySize: 1024, environment: { REGION: REGION, ENV: target, } }); // lambda呼び出し権限付与 exampleLambda.addToRolePolicy(new iam.PolicyStatement({ resources: [`arn:aws:lambda:${REGION}:${ACCOUNT_ID}:function:${target}- other-function`], actions: ['lambda:InvokeFunction'] })); // バケットの読み込み権限 props.buckets.defBucket.grantRead(exampleLambda); // テーブルの読み込み権限 props.tables.sampleTable.grantReadData(exampleLambda);
44. AWS CDKプロジェクトのディレクトリ構成 Copyright (C) 2020 SB Gift Corp. • environment • lambdaなどに設定する環境変数 • lib • constructs • 論理単位で分割されたコンストラクト • process • stack実⾏時にLambda Layerを作成するためのプロセス • stack • constructを作成するstack • src • app-sync • GraphQLのスキーマファイルを格納 • lambda • Lambdaにデプロイされる資産
45. Copyright (C) 2020 SB Gift Corp. AWS CDKのCI/CD
46. AWS CDKのCI/CD Copyright (C) 2020 SB Gift Corp. Account 開発者 push main stg dev feature リント eslint ビルド tsc テスト jest 承認 デプロイ cdk AWS CloudFormation AWS CodePipeline merge cdk bootstrap cdk synth cdk deploy CI/CDパイプラインを作成し、開発効率を向上させた
47. Copyright (C) 2020 SB Gift Corp. 開発を加速させた AWS AppSyncを軸にした開発
48. AWS AppSync Copyright (C) 2020 SB Gift Corp. AWS AppSync（アプリデータをリアルタイムで保存、同期）| AWS https://aws.amazon.com/jp/appsync/ AWS AppSync Amazon RDS AWS Lambda Amazon DynamoDB Amazon Elasticsearch Service リクエストテンプレート データソース HTTPエンドポイント リゾルバー レスポンステンプレート GraphQLのマネージドサービス React AppSyncスキーマ
49. AWS AppSyncを軸にした開発 Copyright (C) 2020 SB Gift Corp. バックエンド開発者 作成/更新 AppSyncスキーマファイル AWS AppSync デプロイ フロントエンド開発者 スキーマの取得 Queryの実⾏ AWS Lambda React コード⽣成/開発 開発 1 2 1 2 リゾルバー 記述 3 通知 4 フィードバック 4 3
50. AppSyncスキーマのコメントは充実させる Copyright (C) 2020 SB Gift Corp. フロントエンドの実装者は業務の知識がある とは限らない。 初⾒の⽅でも分かるようにスキーマを定義す る担当者がコメントを書くこと。 type Campaign { # キャンペーンID # @description ⼀意に識別するキャンペーンID（UUID） # @literal 0 < size # @sample xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx id: ID! # 作成⽇時 # @description 項⽬作成⽇時 # @literal 0 < size # @sample 2020-05-25T00:00:00.000+00:00 createAt: AWSDateTime! } • キーの説明⽂ • 値の形式（size/regex） • 値のサンプル
51. AppSyncのスカラー型注意点 Copyright (C) 2020 SB Gift Corp. type Campaign { # キャンペーンID # @description ⼀意に識別するキャンペーンID（UUID） # @literal 0 < size # @sample xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx id: ID! # 作成⽇時 # @description 項⽬作成⽇時 # @literal 0 < size # @sample 1603110250585 createAt: Int! } DynamoDBに格納されている値がエポック ミリ秒(数値型)だったので、そのままInt型 にしたところAppSyncでエラーに。 GraphQLにはLong型は定義されていないた め、ミリ秒はInt型の最⼤値(2^31 -1)を超 える値は表現できない。 1,603,110,250,585 > 2,147,483,647(int型最⼤値) int型ではエポックミリ秒は表現できない
52. AppSyncのスカラー型注意点 Copyright (C) 2020 SB Gift Corp. [参考] AWS AppSync でのスカラー型 https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/scalars.html type Campaign { # キャンペーンID # @description ⼀意に識別するキャンペーンID（UUID） # @literal 0 < size # @sample xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx id: ID! # 作成⽇時 # @description 項⽬作成⽇時 # @literal 0 < size # @sample 2020-05-25T00:00:00.000+00:00 createAt: AWSDateTime! } AppSyncの後続にあるLambdaでエポックミ リ秒をISO形式に変換して、AppSyncのスカ ラー型をAWSDateTime型に変更しエラーを 解消した。 AppSyncのリゾルバーでも解決できるが、 今回のプロジェクトではAppSyncから必ず Lambdaを経由してDynamoDBへアクセス するので、リゾルバーの記述はLambdaの レスポンスをそのまま返したいため、 Lambdaで変換の処理を⾏った。
53. そのほかにやったこと（割愛） Copyright (C) 2020 SB Gift Corp. 1. Route53でアカウントをまたぐドメイン管理 2. AWS Amplifyのコミットフロー 3. フロントエンドからS3へのファイルアップロード 4. S3にアップロードされたCSVの処理
54. Copyright (C) 2020 SB Gift Corp. プロジェクトの総括と改善点
55. プロジェクトに求めていたことは達成できた Copyright (C) 2020 SB Gift Corp. 短納期 AWS Amplify AWS AppSync AWS CDK 低ランニングコスト サーバレス 低管理コスト FaaS Auth0 達成 達成 達成 SaaS
56. 振り返り – リモートワーク Copyright (C) 2020 SB Gift Corp. フルリモートで問題なかったか︖ よかった点 改善したい点 密なコミュニケーション インプット/アウトプットの明確化 メールとSlackと課題の切り分け UI関連の指摘 Slackでのコミュニケーション いつまでに何を作るか共有する 社内ガイドラインを作成する 画⾯共有しながら動作の確認
57. 振り返り – プロジェクト総括 Copyright (C) 2020 SB Gift Corp. 総括 Lambdaのコールドスタート AWSサービス AppSyncの採⽤ 画⾯から操作してもあまり気にならない 開発フローとマッチした DynamoDBの検索条件 後付けインデックス作成 テーブル管理のテンプレートと インデックスを管理するCDKと別れてしまった その他 React/CDK/LambdaをTypescriptでの統⼀ とても良い サーバレスの監視量 IaaSと⼤差ない 24時間365⽇運⽤ マルチリージョン対応が必要
58. 振り返り – 改善点 Copyright (C) 2020 SB Gift Corp. 改善点 エラー通知 AWSサービス AWS X-Ray AWSサービスのアラートの設定を⼊れていな かった。CloudWatchを使い倒していない AWSサービスを統合していくなら導⼊すべき Lambdaのパフォーマンスチューニング メモリと実⾏時間が少なくてCSV読み込みの Lambdaが実⾏時間超過でダウン その他 テストケースの不⾜ 期間の都合上e2eテストを割愛した結果 lambdaの実⾏権限不⾜エラーが発⽣
59. Copyright (C) 2020 SB Gift Corp. 最後に
60. 最後に Copyright (C) 2020 SB Gift Corp. 今回のプロジェクトで得た知⾒を基に、 現在運⽤中の⼀部レガシーシステムを フルサーバレスでのリプレイスを計画中 今回のプロジェクトを成功に導いてくれた クラスメソッド株式会社さま、和⽥⽒、加藤⽒に感謝を
61. Copyright (C) 2020 SB Gift Corp.
62. 関連Developers.IO記事 Copyright (C) 2020 SB Gift Corp. AWS CDK を使って node_modules を AWS Lambda Layers にデプロイするサンプル https://dev.classmethod.jp/articles/aws-cdk-node-modules-lambda-layer/ フロントエンドエンジニアに捧げるAWS Amplify Console https://dev.classmethod.jp/articles/aws-amplify-console-guide-lines-for-frontend-engineer/ Auth0で保護されたAWS AppSync(GraphQL)をReactからApollo Clientで利⽤する⽅法をチュートリアルとしてまとめた https://dev.classmethod.jp/articles/react-appsync-auth0-tutorial/
63. Copyright (C) 2020 SB Gift Corp.