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

Transcript

1. AmplifyとAppSyncでモダンでイケてる Webサービスを爆速で⽴ち上げようぜ クラスメソッド株式会社 AWS事業本部 コンサルティング部 moko (@mokocm ) 2020/06/23 15:00〜15:45
2. 2 ⾃⼰紹介 もこ クラスメソッド株式会社 AWS事業本部 コンサルティング部ソリューションアーキテクト 2020 APN AWS Top Engineers 現職: Terraform/CDKでAWS環境の構築 前職: ECサイトのSREっぽい事 得意: アプリとインフラの中間、TypeScript 好きなAWSサービス: ECS/CDK/Amplify Twitter/GitHub: mokocm
3. 3 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
4. 4 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
5. 5 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
6. 6 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る ・Amplify/AppSyncを使ってプロダクトを作った話 →実際に使うとどんな感じになるのかを知る ・Amazon流の「Working Backwards」を使った企画 ・まとめ
7. 7 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る ・Amplify/AppSyncを使ってプロダクトを作った話 →実際に使うとどんな感じの構成になるのかを知る ・Amazon流の「Working Backwards」を使った企画 →開発者も企画について興味を持つようになる ・まとめ
8. 8 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
9. 9 AWS Amplifyとは︖ “モバイルアプリケーションとウェブアプリケーションを最速で構築する⽅法” Webやモバイルのデプロイ、ホスティングが出来る、プラットフォーム →開発者がインフラを意識せずにプロダクトを爆速でリリース出来る →Web, iOS, Android, React Nativeに対応 →Amplify CLIを利⽤して簡単にプロジェクトを始められる
10. 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
11. 11 GraphQLとは︖ REST APIの置き換えになりつつある、クエリー⾔語、ランタイム # メリット 各種APIを定義することなく、ほしいデータを直接取得出来る 1. スキーマを定義 2. GraphQLサーバー(Resolver)を実装 3. ほしいデータに合わせたクエリーを書いて、リクエスト 4. GraphQLサーバー(Resolver)がデータを返却
12. 12 GraphQLとは︖
13. 13 GraphQLとは︖
14. 14 GraphQLとは︖
15. 15 AWS AppSyncとは︖ “グローバルスケールで、1 つ以上のデータソースからの 適切なデータを使⽤してアプリケーションを強化” ・”マネージドGraphQL” ・ VTLでGraphQL Resolverを実装出来る(⾃動⽣成も可能) ・「AWSのサービスと連携したGraphQLを実⾏可能」 ・ データソースはDynamoDB, Lambda, Elasticsearch, Aurora Serverless, HTTPエンドポイントをサポート。 ・Amplifyとの連携が超オススメ。
16. 16 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
17. 17 導⼊⾯倒なんでしょ…?
18. 18 実際にプロジェクトを作ってみる # React Applicationを作成 $ npx create-react-app amplify-example-typescript --typescript # 作成されたディレクトリに移動 $ cd amplify-example-typescript # インストール $ npm i -g @aws-amplify/cli # Amplify 初期設定 $ amplify init
19. 19 実際にプロジェクトを作ってみる 基本的にはデフォルト値でOK
20. 20 CI/CD導⼊、めんどくさくないですか︖
21. 21 実際にプロジェクトを作ってみる | GitHub連携 $ git remote add origin git@github.com:mokocm/amplify-example-typescript.git $ git add . $ git commit –m ”added amplify” $ git push
22. 22 実際にプロジェクトを作ってみる ビルド設定の構成は最初から良い感じにしてくれるので触らなくてOK
23. 23 実際にプロジェクトを作ってみる GitHubのPushをHookにビルド、デプロイまでを⼀括で実⾏︕
24. 24 実際にプロジェクトを作ってみる 所要時間、5分〜10分くらい
25. 25 バックエンドAPIの開発、連携 ⼤変じゃないですか︖
26. 26 Amplify + AppSyncを始める
27. 27 Amplify + AppSync スキーマを書くとQuery/Mutation/Subscriptionが自動生成される！
28. 28 Amplify + AppSync まるでSDKを使うようにデータを取得可能！
29. 29 登録、ログイン画⾯、認証 ⼤変じゃないですか︖
30. 30 Amplify + Cognito Cognitoを使ったユーザー登録、ログイン、画面出し分け超簡単！ const Login: React.FC = () => { const state = useContext(LoginContext); useEffect(() => { state.setLogin(true); }, []); return <Redirect to="/dashboard" />; }; export default withAuthenticator(Login);
31. 31 インフラの管理、⾯倒じゃないですか︖
32. 32 フルサーバーレス︕ リソースはCloudFormationで管理 基本的にスケーリングを気にしなくてOK
33. 33 でもお⾼いんでしょう…︖
34. 34 従量課⾦ ちょっとした物だと 開発段階で3$くらい 全てサーバーレスなので 規模に合わせて 料金もスケール！ 2020年6⽉23⽇現在
35. 35 まとめ ・導⼊⾯倒なんでしょ...? / CI/CD導⼊、めんどくさくないですか︖ めっちゃ簡単 ・バックエンドAPIの開発、連携、⼤変じゃないですか︖ AppSyncを使えばスキーマを定義するだけでSDKを叩くように データをとれる ・登録、ログイン画⾯、認証⼤変じゃないですか︖ UIまで⽤意されているのでめっちゃ簡単 ・インフラの管理、⾯倒じゃないですか︖ IaC管理、スケーリングも特に気にしなくてOK ・でもお⾼いんでしょう…︖ 従量課⾦で⽂字通りのスモールスタートが出来る
36. 36 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
37. 37 ANGEL Dojo - builders.flash https://aws.amazon.com/jp/builders-flash/202005/amplify-working-backwards/
38. 38 開発期間 ・企画〜開発期間2ヶ⽉、最初の1ヶ⽉は企画 ・ 1週間のうち実稼働時間が10時間程度 ・⼈数5⼈(うち開発経験ありが2名)
39. 39 作った物 中途半端で終わらせない。 問題とミニブログで技術を学ぶエンジニア向け学習サービス
40. 40 Loop I/Oでやる3つのこと
41. 41 作った物 | 問題⼀覧
42. 42 作った物 | 問題画⾯
43. 43 作った物 | ブログ投稿
44. 44 作った物 | ブログ⼀覧
45. 45 使った技術、ツール Amplify / AppSync(GraphQL) / React / TypeScript データソースはDynamoDB Git/GitHub ソースコード管理、プロジェクト管理 Slack/Google Meet/Discord/Amazon Chime コミュニケーション ※東京4⼈、札幌1⼈
46. 46 アーキテクチャ Amplifyのメリット • 爆速で開発をスタート • バックエンドの実装がCLIで一発 • 10回/週デプロイ • ログインの実装も超簡単
47. 47 スキーマ
48. 48 graphqlOperation | データ投⼊例
49. 49 graphqlOperation | データ投⼊例
50. 50 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
51. 51 セッションタイトル AmplifyとAppSyncでモダンでイケてる Webサービスを爆速で⽴ち上げようぜ
52. 52 セッションタイトル AmplifyとAppSyncでモダンでイケてる（︖） Webサービスを爆速で⽴ち上げようぜ
53. 53 Working Backwards ・Amazon流のイノベーションの考え⽅ “お客様は誰ですか︖”からはじまる5つの質問 プロダクトを開発する前にプレスリリースを作成して作る物を明確化。 ・お客様は誰ですか︖ ・お客様が抱える課題や改善点は明確ですか︖ ・お客様が受けるメリットは明確ですか︖ ・お客様のニーズやウォンツをどのように知りましたか︖ ・お客様の体験が描けていますか︖
54. 54 Working Backwards https://dev.classmethod.jp/articles/aws-summit-osaka-2019-amzn-culture/
55. 55 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
56. 56 まとめ ・Amplify+AppSyncを使うと本当に爆速で開発を進めれる ・CI/CDなどもマネコンから連携するだけ、API追加も簡単。 ・サーバーレスで従量課⾦なので、スモールスタートが出来る ・ローンチ前に無駄なコストが掛からないので、 スタートアップ企業などでもおすすめ ・開発者はインフラの⾯倒を⾒ずに、開発に集中出来る ・Working Backwardsを使って視点を変えて考えてみましょう︕