Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ
Search
mokonist
June 24, 2020
Technology
0
6.8k
AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ
mokonist
June 24, 2020
Tweet
Share
More Decks by mokonist
See All by mokonist
devio-2024-Introduction-golang-backend
mokocm
7
3.9k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
640
1年間モダンなアプリへの移行支援をやってみて分かった、モダナイズの重要性と難しさ
mokocm
1
1.4k
レガシーシステム、モダナイズへの道筋
mokocm
0
1.4k
Application Composerのすすめ
mokocm
0
1.2k
devio-2022-sapporo-moko.pdf
mokocm
2
91
DeepDive into Modern Development with AWS
mokocm
1
1.1k
IaCで全てが上手くいくと思うなよ_失敗事例のご紹介.pdf
mokocm
0
9.3k
re:Growth infra 2020
mokocm
0
4.7k
Other Decks in Technology
See All in Technology
The Role of Developer Relations in AI Product Success.
giftojabu1
0
130
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
190
強いチームと開発生産性
onk
PRO
35
11k
Lexical Analysis
shigashiyama
1
150
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
Platform Engineering for Software Developers and Architects
syntasso
1
520
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
Engineer Career Talk
lycorp_recruit_jp
0
190
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
RailsConf 2023
tenderlove
29
900
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
How STYLIGHT went responsive
nonsquared
95
5.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Faster Mobile Websites
deanohume
305
30k
Building Adaptive Systems
keathley
38
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
It's Worth the Effort
3n
183
27k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Transcript
AmplifyとAppSyncでモダンでイケてる Webサービスを爆速で⽴ち上げようぜ クラスメソッド株式会社 AWS事業本部 コンサルティング部 moko (@mokocm ) 2020/06/23 15:00〜15:45
2 ⾃⼰紹介 もこ クラスメソッド株式会社 AWS事業本部 コンサルティング部ソリューションアーキテクト 2020 APN AWS Top
Engineers 現職: Terraform/CDKでAWS環境の構築 前職: ECサイトのSREっぽい事 得意: アプリとインフラの中間、TypeScript 好きなAWSサービス: ECS/CDK/Amplify Twitter/GitHub: mokocm
3 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
4 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
5 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画
・まとめ
6 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る ・Amplify/AppSyncを使ってプロダクトを作った話 →実際に使うとどんな感じになるのかを知る ・Amazon流の「Working
Backwards」を使った企画 ・まとめ
7 本⽇持って帰って欲しいこと #devio2020 ・Amplify/AppSyncとは︖ →Amplify/AppSyncとは何かを知る ・Amplify+AppSyncを使って爆速で開発をする例 →⼆つを組み合わせると爆速でいろいろ出来る事を知る ・Amplify/AppSyncを使ってプロダクトを作った話 →実際に使うとどんな感じの構成になるのかを知る ・Amazon流の「Working
Backwards」を使った企画 →開発者も企画について興味を持つようになる ・まとめ
8 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
9 AWS Amplifyとは︖ “モバイルアプリケーションとウェブアプリケーションを最速で構築する⽅法” Webやモバイルのデプロイ、ホスティングが出来る、プラットフォーム →開発者がインフラを意識せずにプロダクトを爆速でリリース出来る →Web, iOS, Android, React
Nativeに対応 →Amplify CLIを利⽤して簡単にプロジェクトを始められる
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 GraphQLとは︖ REST APIの置き換えになりつつある、クエリー⾔語、ランタイム # メリット 各種APIを定義することなく、ほしいデータを直接取得出来る 1. スキーマを定義 2.
GraphQLサーバー(Resolver)を実装 3. ほしいデータに合わせたクエリーを書いて、リクエスト 4. GraphQLサーバー(Resolver)がデータを返却
12 GraphQLとは︖
13 GraphQLとは︖
14 GraphQLとは︖
15 AWS AppSyncとは︖ “グローバルスケールで、1 つ以上のデータソースからの 適切なデータを使⽤してアプリケーションを強化” ・”マネージドGraphQL” ・ VTLでGraphQL Resolverを実装出来る(⾃動⽣成も可能)
・「AWSのサービスと連携したGraphQLを実⾏可能」 ・ データソースはDynamoDB, Lambda, Elasticsearch, Aurora Serverless, HTTPエンドポイントをサポート。 ・Amplifyとの連携が超オススメ。
16 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
17 導⼊⾯倒なんでしょ…?
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 実際にプロジェクトを作ってみる 基本的にはデフォルト値でOK
20 CI/CD導⼊、めんどくさくないですか︖
21 実際にプロジェクトを作ってみる | GitHub連携 $ git remote add origin
[email protected]
:mokocm/amplify-example-typescript.git
$ git add . $ git commit –m ”added amplify” $ git push
22 実際にプロジェクトを作ってみる ビルド設定の構成は最初から良い感じにしてくれるので触らなくてOK
23 実際にプロジェクトを作ってみる GitHubのPushをHookにビルド、デプロイまでを⼀括で実⾏︕
24 実際にプロジェクトを作ってみる 所要時間、5分〜10分くらい
25 バックエンドAPIの開発、連携 ⼤変じゃないですか︖
26 Amplify + AppSyncを始める
27 Amplify + AppSync スキーマを書くとQuery/Mutation/Subscriptionが自動生成される!
28 Amplify + AppSync まるでSDKを使うようにデータを取得可能!
29 登録、ログイン画⾯、認証 ⼤変じゃないですか︖
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 インフラの管理、⾯倒じゃないですか︖
32 フルサーバーレス︕ リソースはCloudFormationで管理 基本的にスケーリングを気にしなくてOK
33 でもお⾼いんでしょう…︖
34 従量課⾦ ちょっとした物だと 開発段階で3$くらい 全てサーバーレスなので 規模に合わせて 料金もスケール! 2020年6⽉23⽇現在
35 まとめ ・導⼊⾯倒なんでしょ...? / CI/CD導⼊、めんどくさくないですか︖ めっちゃ簡単 ・バックエンドAPIの開発、連携、⼤変じゃないですか︖ AppSyncを使えばスキーマを定義するだけでSDKを叩くように データをとれる ・登録、ログイン画⾯、認証⼤変じゃないですか︖
UIまで⽤意されているのでめっちゃ簡単 ・インフラの管理、⾯倒じゃないですか︖ IaC管理、スケーリングも特に気にしなくてOK ・でもお⾼いんでしょう…︖ 従量課⾦で⽂字通りのスモールスタートが出来る
36 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
37 ANGEL Dojo - builders.flash https://aws.amazon.com/jp/builders-flash/202005/amplify-working-backwards/
38 開発期間 ・企画〜開発期間2ヶ⽉、最初の1ヶ⽉は企画 ・ 1週間のうち実稼働時間が10時間程度 ・⼈数5⼈(うち開発経験ありが2名)
39 作った物 中途半端で終わらせない。 問題とミニブログで技術を学ぶエンジニア向け学習サービス
40 Loop I/Oでやる3つのこと
41 作った物 | 問題⼀覧
42 作った物 | 問題画⾯
43 作った物 | ブログ投稿
44 作った物 | ブログ⼀覧
45 使った技術、ツール Amplify / AppSync(GraphQL) / React / TypeScript データソースはDynamoDB
Git/GitHub ソースコード管理、プロジェクト管理 Slack/Google Meet/Discord/Amazon Chime コミュニケーション ※東京4⼈、札幌1⼈
46 アーキテクチャ Amplifyのメリット • 爆速で開発をスタート • バックエンドの実装がCLIで一発 • 10回/週デプロイ •
ログインの実装も超簡単
47 スキーマ
48 graphqlOperation | データ投⼊例
49 graphqlOperation | データ投⼊例
50 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
51 セッションタイトル AmplifyとAppSyncでモダンでイケてる Webサービスを爆速で⽴ち上げようぜ
52 セッションタイトル AmplifyとAppSyncでモダンでイケてる(︖) Webサービスを爆速で⽴ち上げようぜ
53 Working Backwards ・Amazon流のイノベーションの考え⽅ “お客様は誰ですか︖”からはじまる5つの質問 プロダクトを開発する前にプレスリリースを作成して作る物を明確化。 ・お客様は誰ですか︖ ・お客様が抱える課題や改善点は明確ですか︖ ・お客様が受けるメリットは明確ですか︖ ・お客様のニーズやウォンツをどのように知りましたか︖
・お客様の体験が描けていますか︖
54 Working Backwards https://dev.classmethod.jp/articles/aws-summit-osaka-2019-amzn-culture/
55 本⽇話すこと #devio2020 ・Amplify/AppSyncとは︖ ・Amplify+AppSyncを使って爆速で開発をする例 ・Amplify/AppSyncを使ってプロダクトを作った話 ・Amazon流の「Working Backwards」を使った企画 ・まとめ
56 まとめ ・Amplify+AppSyncを使うと本当に爆速で開発を進めれる ・CI/CDなどもマネコンから連携するだけ、API追加も簡単。 ・サーバーレスで従量課⾦なので、スモールスタートが出来る ・ローンチ前に無駄なコストが掛からないので、 スタートアップ企業などでもおすすめ ・開発者はインフラの⾯倒を⾒ずに、開発に集中出来る ・Working Backwardsを使って視点を変えて考えてみましょう︕
57