Slide 1

Slide 1 text

AWS Amplify + CDKを⽤いて 短納期・少⼈数・フルリモートで作る 管理画⾯ SBギフト株式会社 サービスシステム部 ⼊倉元太 Copyright (C) 2020 SB Gift Corp.

Slide 2

Slide 2 text

⾃⼰紹介 Copyright (C) 2020 SB Gift Corp. ⼊倉 元太 SBギフト株式会社 サービスシステム部 (2018年⼊社) Irikura Genta

Slide 3

Slide 3 text

本⽇お話しすること Copyright (C) 2020 SB Gift Corp. • AWS AmplifyとAWS CDK、AppSync以外の個別サービスの詳細 • AWS Amplifyの静的webホスティング以外の機能 • AWS以外の外部サービス • プロジェクトの事例紹介 • AWS Amplifyによるwebサイトホスティング • AWS CDKによるインフラおよびアプリのプロビジョニング • AWS AppSyncの知⾒ 話すこと 話さないこと

Slide 4

Slide 4 text

アジェンダ Copyright (C) 2020 SB Gift Corp. • ⾃社紹介 • クラスメソッド様との開発 • ⽣産性を⾼めたツールと開発⼿法 • プロジェクトの総括と改善点 • 最後に

Slide 5

Slide 5 text

Copyright (C) 2020 SB Gift Corp. ⾃社紹介

Slide 6

Slide 6 text

会社紹介 – SBギフト Copyright (C) 2020 SB Gift Corp. 設⽴ 2006年 9⽉ 代表取締役 藤平 ⼤輔 拠点 福岡・東京 従業員数 20名 (内ITエンジニア3名) コンシューマ向け サービス 法⼈向けサービス (他サービスも提供しております) https://sbg.jp/ https://www.softbankgift.co.jp/

Slide 7

Slide 7 text

会社紹介 – SBギフト Copyright (C) 2020 SB Gift Corp. 設⽴ 2006年 9⽉ 代表取締役 藤平 ⼤輔 拠点 福岡・東京 従業員数 20名 (内ITエンジニア3名) コンシューマ向け サービス 法⼈向けサービス (他サービスも提供しております) https://sbg.jp/ https://www.softbankgift.co.jp/ (内ITエンジニア3名)

Slide 8

Slide 8 text

会社紹介 – SBギフト ITエンジニア3名 Copyright (C) 2020 SB Gift Corp. 先輩 上司 僕 ※画像はクラスメソッド様 事例紹介より引⽤ https://classmethod.jp/cases/sbgift3/ 3⼈で社内システムから社外向けサービスを開発/保守しています。

Slide 9

Slide 9 text

会社紹介 – SBギフト Copyright (C) 2020 SB Gift Corp. 設⽴ 2006年 9⽉ 代表取締役 藤平 ⼤輔 拠点 福岡・東京 従業員数 20名 (内ITエンジニア3名) コンシューマ向け サービス 法⼈向けサービス (他サービスも提供しております) https://sbg.jp/ https://www.softbankgift.co.jp/

Slide 10

Slide 10 text

Webキャンペーンシステム Copyright (C) 2020 SB Gift Corp. サービスイン 2019年 12⽉ AWS 利⽤サービス API Gateway, Lambda, DynamoDB, S3, etc.. シリアルID認証 LINE認証 Twitter認証 抽選 落選 当選 構成 サーバレス サービスイン当初 管理画⾯なし

Slide 11

Slide 11 text

管理画⾯がないという事 Copyright (C) 2020 SB Gift Corp. < 検証環境にデータ登録してください︕ < キャンペーン画⾯の操作を教えてください︕ < 検証環境にアクセス制限はできますか︖ < エラー出たんですけど︕ < 顧客からXXXって要望が出たんだけど︖ < 本番環境にデータ登録してください︕今週中︕ システムの管理で、他業務や想定していた作業に着⼿できなくなる問題が発⽣しました。

Slide 12

Slide 12 text

管理画⾯をどう作るべきか︖ Copyright (C) 2020 SB Gift Corp. Amazon EC2 VPC Elastic Load Balancing 弊社 他サービス管理画⾯ Amazon EC2

Slide 13

Slide 13 text

管理画⾯をどう作るべきか︖ Copyright (C) 2020 SB Gift Corp. Amazon EC2 EC2インスタンスの管理でこれだけある。 これらを3⼈だけで対応するのはかなり厳しい現状がある。 EC2インスタンスをリザーブドインスタンスで運⽤してるがランニングコストが⼤きい。 管理対象 OS ミドルウェア ランタイム アプリケーション

Slide 14

Slide 14 text

抱える課題 Copyright (C) 2020 SB Gift Corp. 素早く管理画⾯を構成したい。 ただランニング費⽤・管理コストは抑えたい。 できる︖

Slide 15

Slide 15 text

抱える課題 Copyright (C) 2020 SB Gift Corp. できます︕ クラスメソッド 和⽥⽒

Slide 16

Slide 16 text

会社紹介 – SBギフトとクラスメソッド Copyright (C) 2020 SB Gift Corp. AWSでの開発実績のあるクラスメソッド様に開発⽀援をいただきました。

Slide 17

Slide 17 text

本⽇お話しすること Copyright (C) 2020 SB Gift Corp. 管理画⾯を作った事例をご紹介 期間 ⼈員 サーバレス フルリモート 2ヶ⽉ 2名

Slide 18

Slide 18 text

Copyright (C) 2020 SB Gift Corp. クラスメソッド様との開発

Slide 19

Slide 19 text

今回のプロジェクトに求めるもの Copyright (C) 2020 SB Gift Corp. 短納期 低ランニングコスト 低管理コスト 実現させるために「作らないこと」が⼤事

Slide 20

Slide 20 text

作る部分を極⼒少なくする Copyright (C) 2020 SB Gift Corp. IaaS Amazon EC2 アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア FaaS AWS Lambda アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア SaaS アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア AWS AppSync ユーザー管理 AWS管理

Slide 21

Slide 21 text

作る部分を極⼒少なくするソリューション Copyright (C) 2020 SB Gift Corp. 短納期 低ランニングコスト 低管理コスト フレームワーク サーバレス FaaS / SaaS AWS Amplify AWS CDK 外部サービス

Slide 22

Slide 22 text

フルリモートでの開発体制 Copyright (C) 2020 SB Gift Corp. クラスメソッド 加藤⽒ フロントエンド作成 SBギフト ⼊倉 バックエンド作成 コミュニケーション 定例MTG 定例議事録/課題管理 コードホスティング

Slide 23

Slide 23 text

作成物 – 管理画⾯ Copyright (C) 2020 SB Gift Corp. フレームワーク React UIフレームワーク Material-UI 認証基盤 Auth0 画⾯数 15 リソースのCRUD完備 CSVアップロード機能あり

Slide 24

Slide 24 text

管理画⾯ - 構成 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

Slide 25

Slide 25 text

フロントエンド 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

Slide 26

Slide 26 text

認証認可 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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

⾮同期ジョブ処理 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Copyright (C) 2020 SB Gift Corp. ⽣産性を⾼めたツールと開発⼿法

Slide 32

Slide 32 text

⽣産性を⾼めたフレームワーク Copyright (C) 2020 SB Gift Corp. AWS Amplify AWS CDK

Slide 33

Slide 33 text

最速webサイトホスティングフレームワーク Copyright (C) 2020 SB Gift Corp. AWS Amplify AWS Amplify(アプリケーションの構築とデプロイ)| AWS https://aws.amazon.com/jp/amplify/

Slide 34

Slide 34 text

AWS サービスによるwebサイトホスティング Copyright (C) 2020 SB Gift Corp. Amazon Simple Storage Service 開発者 GitHub AWS CodePipeline AWS CodeBuild AWS CodeDeploy Amazon CloudFront ユーザー パイプラインを作成し、配信を構築するまで結構な⼿間がかかる パイプライン テスト ビルド デプロイ ホスト CDN

Slide 35

Slide 35 text

AWS Amplifyによるwebサイトホスティング Copyright (C) 2020 SB Gift Corp. 開発者 GitHub ユーザー AWS Amplify AWS AmplifyならGitHubに接続して、ビルドの設定を記述するだけで配信が可能 パイプライン テスト ビルド デプロイ ホスト CDN

Slide 36

Slide 36 text

IaCを実現する最⾼のツール Copyright (C) 2020 SB Gift Corp. AWS CDK AWS クラウド開発キット – アマゾン ウェブ サービス https://aws.amazon.com/jp/cdk/

Slide 37

Slide 37 text

AWSインフラのプロビジョニングツール Copyright (C) 2020 SB Gift Corp. AWS CloudFormation AWS CDK 記述 JSON JSON HCL YAML Typescript Python Java C# AWS CDKならプログラミング⾔語でインフラを記述できる

Slide 38

Slide 38 text

Copyright (C) 2020 SB Gift Corp. 今回のプロジェクトでのAWS CDK利⽤

Slide 39

Slide 39 text

今回のプロジェクトでのAWS CDK利⽤ Copyright (C) 2020 SB Gift Corp. AWS CDK インフラストラクチャ アプリケーション インフラとアプリケーションを同時にデプロイできるようにした DynamoDB S3 Lambda Lambda Layer AppSync SQS

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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, }; } }

Slide 42

Slide 42 text

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; } }

Slide 43

Slide 43 text

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);

Slide 44

Slide 44 text

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にデプロイされる資産

Slide 45

Slide 45 text

Copyright (C) 2020 SB Gift Corp. AWS CDKのCI/CD

Slide 46

Slide 46 text

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パイプラインを作成し、開発効率を向上させた

Slide 47

Slide 47 text

Copyright (C) 2020 SB Gift Corp. 開発を加速させた AWS AppSyncを軸にした開発

Slide 48

Slide 48 text

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スキーマ

Slide 49

Slide 49 text

AWS AppSyncを軸にした開発 Copyright (C) 2020 SB Gift Corp. バックエンド開発者 作成/更新 AppSyncスキーマファイル AWS AppSync デプロイ フロントエンド開発者 スキーマの取得 Queryの実⾏ AWS Lambda React コード⽣成/開発 開発 1 2 1 2 リゾルバー 記述 3 通知 4 フィードバック 4 3

Slide 50

Slide 50 text

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) • 値のサンプル

Slide 51

Slide 51 text

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型ではエポックミリ秒は表現できない

Slide 52

Slide 52 text

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で変換の処理を⾏った。

Slide 53

Slide 53 text

そのほかにやったこと(割愛) Copyright (C) 2020 SB Gift Corp. 1. Route53でアカウントをまたぐドメイン管理 2. AWS Amplifyのコミットフロー 3. フロントエンドからS3へのファイルアップロード 4. S3にアップロードされたCSVの処理

Slide 54

Slide 54 text

Copyright (C) 2020 SB Gift Corp. プロジェクトの総括と改善点

Slide 55

Slide 55 text

プロジェクトに求めていたことは達成できた Copyright (C) 2020 SB Gift Corp. 短納期 AWS Amplify AWS AppSync AWS CDK 低ランニングコスト サーバレス 低管理コスト FaaS Auth0 達成 達成 達成 SaaS

Slide 56

Slide 56 text

振り返り – リモートワーク Copyright (C) 2020 SB Gift Corp. フルリモートで問題なかったか︖ よかった点 改善したい点 密なコミュニケーション インプット/アウトプットの明確化 メールとSlackと課題の切り分け UI関連の指摘 Slackでのコミュニケーション いつまでに何を作るか共有する 社内ガイドラインを作成する 画⾯共有しながら動作の確認

Slide 57

Slide 57 text

振り返り – プロジェクト総括 Copyright (C) 2020 SB Gift Corp. 総括 Lambdaのコールドスタート AWSサービス AppSyncの採⽤ 画⾯から操作してもあまり気にならない 開発フローとマッチした DynamoDBの検索条件 後付けインデックス作成 テーブル管理のテンプレートと インデックスを管理するCDKと別れてしまった その他 React/CDK/LambdaをTypescriptでの統⼀ とても良い サーバレスの監視量 IaaSと⼤差ない 24時間365⽇運⽤ マルチリージョン対応が必要

Slide 58

Slide 58 text

振り返り – 改善点 Copyright (C) 2020 SB Gift Corp. 改善点 エラー通知 AWSサービス AWS X-Ray AWSサービスのアラートの設定を⼊れていな かった。CloudWatchを使い倒していない AWSサービスを統合していくなら導⼊すべき Lambdaのパフォーマンスチューニング メモリと実⾏時間が少なくてCSV読み込みの Lambdaが実⾏時間超過でダウン その他 テストケースの不⾜ 期間の都合上e2eテストを割愛した結果 lambdaの実⾏権限不⾜エラーが発⽣

Slide 59

Slide 59 text

Copyright (C) 2020 SB Gift Corp. 最後に

Slide 60

Slide 60 text

最後に Copyright (C) 2020 SB Gift Corp. 今回のプロジェクトで得た知⾒を基に、 現在運⽤中の⼀部レガシーシステムを フルサーバレスでのリプレイスを計画中 今回のプロジェクトを成功に導いてくれた クラスメソッド株式会社さま、和⽥⽒、加藤⽒に感謝を

Slide 61

Slide 61 text

Copyright (C) 2020 SB Gift Corp.

Slide 62

Slide 62 text

関連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/

Slide 63

Slide 63 text

Copyright (C) 2020 SB Gift Corp.