AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ

Slide 1

Slide 1 text

AmplifyとAppSyncでモダンでイケてる Webサービスを爆速で⽴ち上げようぜクラスメソッド株式会社 AWS事業本部コンサルティング部 moko (@mokocm ) 2020/06/23 15:00〜15:45

Slide 2

Slide 2 text

2 ⾃⼰紹介もこクラスメソッド株式会社 AWS事業本部コンサルティング部ソリューションアーキテクト 2020 APN AWS Top Engineers 現職: Terraform/CDKでAWS環境の構築前職: ECサイトのSREっぽい事得意: アプリとインフラの中間、TypeScript 好きなAWSサービス: ECS/CDK/Amplify Twitter/GitHub: mokocm

Slide 3

Slide 3 text

3 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 4

Slide 4 text

4 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る・Amplify+AppSyncを使って爆速で開発をする例・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 5

Slide 5 text

5 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 6

Slide 6 text

6 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る・Amplify/AppSyncを使ってプロダクトを作った話 →実際に使うとどんな感じになるのかを知る・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 7

Slide 7 text

7 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る・Amplify/AppSyncを使ってプロダクトを作った話 →実際に使うとどんな感じの構成になるのかを知る・Amazon流の「Working Backwards」を使った企画 →開発者も企画について興味を持つようになる・まとめ

Slide 8

Slide 8 text

8 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 9

Slide 9 text

9 AWS Amplifyとは︖ “モバイルアプリケーションとウェブアプリケーションを最速で構築する⽅法” Webやモバイルのデプロイ、ホスティングが出来る、プラットフォーム →開発者がインフラを意識せずにプロダクトを爆速でリリース出来る →Web, iOS, Android, React Nativeに対応 →Amplify CLIを利⽤して簡単にプロジェクトを始められる

Slide 10

Slide 10 text

10 Amplifyで出来ること・フロントエンドのホスティング(Amplify Console) ・CI/CD(CodeCommit/GitHubなどと連携) ・AWS X-Ray、Amazon Pinpoint、AppSyncとの連携・コードの⽣成、AWSリソースの作成(Amplify CLI) ・Amplify Library(フロントエンドのライブラリー) ・Cognitoと連携したユーザー管理、権限管理開発者は集中してプロダクト開発が出来る Amazon Pinpoint AWS X-Ray AWS CodeCommit AWS AppSync Amazon Pinpoint AWS Amplify

Slide 11

Slide 11 text

11 GraphQLとは︖ REST APIの置き換えになりつつある、クエリー⾔語、ランタイム # メリット各種APIを定義することなく、ほしいデータを直接取得出来る 1. スキーマを定義 2. GraphQLサーバー(Resolver)を実装 3. ほしいデータに合わせたクエリーを書いて、リクエスト 4. GraphQLサーバー(Resolver)がデータを返却

Slide 12

Slide 12 text

12 GraphQLとは︖

Slide 13

Slide 13 text

13 GraphQLとは︖

Slide 14

Slide 14 text

14 GraphQLとは︖

Slide 15

Slide 15 text

15 AWS AppSyncとは︖ “グローバルスケールで、1 つ以上のデータソースからの適切なデータを使⽤してアプリケーションを強化” ・”マネージドGraphQL” ・ VTLでGraphQL Resolverを実装出来る(⾃動⽣成も可能) ・「AWSのサービスと連携したGraphQLを実⾏可能」・データソースはDynamoDB, Lambda, Elasticsearch, Aurora Serverless, HTTPエンドポイントをサポート。・Amplifyとの連携が超オススメ。

Slide 16

Slide 16 text

16 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 17

Slide 17 text

17 導⼊⾯倒なんでしょ…?

Slide 18

Slide 18 text

18 実際にプロジェクトを作ってみる # React Applicationを作成 $ npx create-react-app amplify-example-typescript --typescript # 作成されたディレクトリに移動 $ cd amplify-example-typescript # インストール $ npm i -g @aws-amplify/cli # Amplify 初期設定 $ amplify init

Slide 19

Slide 19 text

19 実際にプロジェクトを作ってみる基本的にはデフォルト値でOK

Slide 20

Slide 20 text

20 CI/CD導⼊、めんどくさくないですか︖

Slide 21

Slide 21 text

21 実際にプロジェクトを作ってみる | GitHub連携 $ git remote add origin git@github.com:mokocm/amplify-example-typescript.git $ git add . $ git commit –m ”added amplify” $ git push

Slide 22

Slide 22 text

22 実際にプロジェクトを作ってみるビルド設定の構成は最初から良い感じにしてくれるので触らなくてOK

Slide 23

Slide 23 text

23 実際にプロジェクトを作ってみる GitHubのPushをHookにビルド、デプロイまでを⼀括で実⾏︕

Slide 24

Slide 24 text

24 実際にプロジェクトを作ってみる所要時間、5分〜10分くらい

Slide 25

Slide 25 text

25 バックエンドAPIの開発、連携⼤変じゃないですか︖

Slide 26

Slide 26 text

26 Amplify + AppSyncを始める

Slide 27

Slide 27 text

27 Amplify + AppSync スキーマを書くとQuery/Mutation/Subscriptionが自動生成される！

Slide 28

Slide 28 text

28 Amplify + AppSync まるでSDKを使うようにデータを取得可能！

Slide 29

Slide 29 text

29 登録、ログイン画⾯、認証⼤変じゃないですか︖

Slide 30

Slide 30 text

30 Amplify + Cognito Cognitoを使ったユーザー登録、ログイン、画面出し分け超簡単！ const Login: React.FC = () => { const state = useContext(LoginContext); useEffect(() => { state.setLogin(true); }, []); return ; }; export default withAuthenticator(Login);

Slide 31

Slide 31 text

31 インフラの管理、⾯倒じゃないですか︖

Slide 32

Slide 32 text

32 フルサーバーレス︕ リソースはCloudFormationで管理基本的にスケーリングを気にしなくてOK

Slide 33

Slide 33 text

33 でもお⾼いんでしょう…︖

Slide 34

Slide 34 text

34 従量課⾦ちょっとした物だと開発段階で3$くらい全てサーバーレスなので規模に合わせて料金もスケール！ 2020年6⽉23⽇現在

Slide 35

Slide 35 text

35 まとめ・導⼊⾯倒なんでしょ...? / CI/CD導⼊、めんどくさくないですか︖ めっちゃ簡単・バックエンドAPIの開発、連携、⼤変じゃないですか︖ AppSyncを使えばスキーマを定義するだけでSDKを叩くようにデータをとれる・登録、ログイン画⾯、認証⼤変じゃないですか︖ UIまで⽤意されているのでめっちゃ簡単・インフラの管理、⾯倒じゃないですか︖ IaC管理、スケーリングも特に気にしなくてOK ・でもお⾼いんでしょう…︖ 従量課⾦で⽂字通りのスモールスタートが出来る

Slide 36

Slide 36 text

36 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 37

Slide 37 text

37 ANGEL Dojo - builders.flash https://aws.amazon.com/jp/builders-flash/202005/amplify-working-backwards/

Slide 38

Slide 38 text

38 開発期間・企画〜開発期間2ヶ⽉、最初の1ヶ⽉は企画・ 1週間のうち実稼働時間が10時間程度・⼈数5⼈(うち開発経験ありが2名)

Slide 39

Slide 39 text

39 作った物中途半端で終わらせない。問題とミニブログで技術を学ぶエンジニア向け学習サービス

Slide 40

Slide 40 text

40 Loop I/Oでやる3つのこと

Slide 41

Slide 41 text

41 作った物 | 問題⼀覧

Slide 42

Slide 42 text

42 作った物 | 問題画⾯

Slide 43

Slide 43 text

43 作った物 | ブログ投稿

Slide 44

Slide 44 text

44 作った物 | ブログ⼀覧

Slide 45

Slide 45 text

45 使った技術、ツール Amplify / AppSync(GraphQL) / React / TypeScript データソースはDynamoDB Git/GitHub ソースコード管理、プロジェクト管理 Slack/Google Meet/Discord/Amazon Chime コミュニケーション ※東京4⼈、札幌1⼈

Slide 46

Slide 46 text

46 アーキテクチャ Amplifyのメリット ● 爆速で開発をスタート ● バックエンドの実装がCLIで一発 ● 10回/週デプロイ ● ログインの実装も超簡単

Slide 47

Slide 47 text

47 スキーマ

Slide 48

Slide 48 text

48 graphqlOperation | データ投⼊例

Slide 49

Slide 49 text

49 graphqlOperation | データ投⼊例

Slide 50

Slide 50 text

50 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 51

Slide 51 text

51 セッションタイトル AmplifyとAppSyncでモダンでイケてる Webサービスを爆速で⽴ち上げようぜ

Slide 52

Slide 52 text

52 セッションタイトル AmplifyとAppSyncでモダンでイケてる（︖） Webサービスを爆速で⽴ち上げようぜ

Slide 53

Slide 53 text

53 Working Backwards ・Amazon流のイノベーションの考え⽅ “お客様は誰ですか︖”からはじまる5つの質問プロダクトを開発する前にプレスリリースを作成して作る物を明確化。・お客様は誰ですか︖ ・お客様が抱える課題や改善点は明確ですか︖ ・お客様が受けるメリットは明確ですか︖ ・お客様のニーズやウォンツをどのように知りましたか︖ ・お客様の体験が描けていますか︖

Slide 54

Slide 54 text

54 Working Backwards https://dev.classmethod.jp/articles/aws-summit-osaka-2019-amzn-culture/

Slide 55

Slide 55 text

55 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例・Amplify/AppSyncを使ってプロダクトを作った話・Amazon流の「Working Backwards」を使った企画・まとめ

Slide 56

Slide 56 text

56 まとめ・Amplify+AppSyncを使うと本当に爆速で開発を進めれる・CI/CDなどもマネコンから連携するだけ、API追加も簡単。・サーバーレスで従量課⾦なので、スモールスタートが出来る・ローンチ前に無駄なコストが掛からないので、スタートアップ企業などでもおすすめ・開発者はインフラの⾯倒を⾒ずに、開発に集中出来る・Working Backwardsを使って視点を変えて考えてみましょう︕