Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Developers.IO 2020 Showcase][Day2]AWS Amplify ...

SBGift
November 02, 2020

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

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

SBGift

November 02, 2020
Tweet

Other Decks in Technology

Transcript

  1. ⾃⼰紹介 Copyright (C) 2020 SB Gift Corp. ⼊倉 元太 SBギフト株式会社

    サービスシステム部 (2018年⼊社) Irikura Genta
  2. 本⽇お話しすること Copyright (C) 2020 SB Gift Corp. • AWS AmplifyとAWS

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

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

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

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

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

    2006年 9⽉ 代表取締役 藤平 ⼤輔 拠点 福岡・東京 従業員数 20名 (内ITエンジニア3名) コンシューマ向け サービス 法⼈向けサービス (他サービスも提供しております) https://sbg.jp/ https://www.softbankgift.co.jp/
  8. Webキャンペーンシステム Copyright (C) 2020 SB Gift Corp. サービスイン 2019年 12⽉

    AWS 利⽤サービス API Gateway, Lambda, DynamoDB, S3, etc.. シリアルID認証 LINE認証 Twitter認証 抽選 落選 当選 構成 サーバレス サービスイン当初 管理画⾯なし
  9. 管理画⾯がないという事 Copyright (C) 2020 SB Gift Corp. < 検証環境にデータ登録してください︕ <

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

    Elastic Load Balancing 弊社 他サービス管理画⾯ Amazon EC2
  11. 管理画⾯をどう作るべきか︖ Copyright (C) 2020 SB Gift Corp. Amazon EC2 EC2インスタンスの管理でこれだけある。

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

    アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア FaaS AWS Lambda アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア SaaS アプリケーション ランタイム ミドルウェア OS 仮想化基盤 ハードウェア AWS AppSync ユーザー管理 AWS管理
  13. フルリモートでの開発体制 Copyright (C) 2020 SB Gift Corp. クラスメソッド 加藤⽒ フロントエンド作成

    SBギフト ⼊倉 バックエンド作成 コミュニケーション 定例MTG 定例議事録/課題管理 コードホスティング
  14. 作成物 – 管理画⾯ Copyright (C) 2020 SB Gift Corp. フレームワーク

    React UIフレームワーク Material-UI 認証基盤 Auth0 画⾯数 15 リソースのCRUD完備 CSVアップロード機能あり
  15. 管理画⾯ - 構成 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
  16. フロントエンド 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
  17. 認証認可 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
  18. 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
  19. ⾮同期ジョブ処理 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
  20. 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
  21. 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
  22. 最速webサイトホスティングフレームワーク Copyright (C) 2020 SB Gift Corp. AWS Amplify AWS

    Amplify(アプリケーションの構築とデプロイ)| AWS https://aws.amazon.com/jp/amplify/
  23. AWS サービスによるwebサイトホスティング Copyright (C) 2020 SB Gift Corp. Amazon Simple

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

    ユーザー AWS Amplify AWS AmplifyならGitHubに接続して、ビルドの設定を記述するだけで配信が可能 パイプライン テスト ビルド デプロイ ホスト CDN
  25. IaCを実現する最⾼のツール Copyright (C) 2020 SB Gift Corp. AWS CDK AWS

    クラウド開発キット – アマゾン ウェブ サービス https://aws.amazon.com/jp/cdk/
  26. AWSインフラのプロビジョニングツール Copyright (C) 2020 SB Gift Corp. AWS CloudFormation AWS

    CDK 記述 JSON JSON HCL YAML Typescript Python Java C# AWS CDKならプログラミング⾔語でインフラを記述できる
  27. 今回のプロジェクトでのAWS CDK利⽤ Copyright (C) 2020 SB Gift Corp. AWS CDK

    インフラストラクチャ アプリケーション インフラとアプリケーションを同時にデプロイできるようにした DynamoDB S3 Lambda Lambda Layer AppSync SQS
  28. 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
  29. 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, }; } }
  30. 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; } }
  31. 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);
  32. 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にデプロイされる資産
  33. 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パイプラインを作成し、開発効率を向上させた
  34. 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スキーマ
  35. AWS AppSyncを軸にした開発 Copyright (C) 2020 SB Gift Corp. バックエンド開発者 作成/更新

    AppSyncスキーマファイル AWS AppSync デプロイ フロントエンド開発者 スキーマの取得 Queryの実⾏ AWS Lambda React コード⽣成/開発 開発 1 2 1 2 リゾルバー 記述 3 通知 4 フィードバック 4 3
  36. 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) • 値のサンプル
  37. 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型ではエポックミリ秒は表現できない
  38. 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で変換の処理を⾏った。
  39. そのほかにやったこと(割愛) Copyright (C) 2020 SB Gift Corp. 1. Route53でアカウントをまたぐドメイン管理 2.

    AWS Amplifyのコミットフロー 3. フロントエンドからS3へのファイルアップロード 4. S3にアップロードされたCSVの処理
  40. プロジェクトに求めていたことは達成できた Copyright (C) 2020 SB Gift Corp. 短納期 AWS Amplify

    AWS AppSync AWS CDK 低ランニングコスト サーバレス 低管理コスト FaaS Auth0 達成 達成 達成 SaaS
  41. 振り返り – リモートワーク Copyright (C) 2020 SB Gift Corp. フルリモートで問題なかったか︖

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

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

    エラー通知 AWSサービス AWS X-Ray AWSサービスのアラートの設定を⼊れていな かった。CloudWatchを使い倒していない AWSサービスを統合していくなら導⼊すべき Lambdaのパフォーマンスチューニング メモリと実⾏時間が少なくてCSV読み込みの Lambdaが実⾏時間超過でダウン その他 テストケースの不⾜ 期間の都合上e2eテストを割愛した結果 lambdaの実⾏権限不⾜エラーが発⽣
  44. 最後に Copyright (C) 2020 SB Gift Corp. 今回のプロジェクトで得た知⾒を基に、 現在運⽤中の⼀部レガシーシステムを フルサーバレスでのリプレイスを計画中

    今回のプロジェクトを成功に導いてくれた クラスメソッド株式会社さま、和⽥⽒、加藤⽒に感謝を
  45. 関連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/