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
7k
AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ
mokonist
June 24, 2020
Tweet
Share
More Decks by mokonist
See All by mokonist
devio-2024-Introduction-golang-backend
mokocm
7
4.5k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
950
1年間モダンなアプリへの移行支援をやってみて分かった、モダナイズの重要性と難しさ
mokocm
1
1.5k
レガシーシステム、モダナイズへの道筋
mokocm
0
1.6k
Application Composerのすすめ
mokocm
0
1.4k
devio-2022-sapporo-moko.pdf
mokocm
2
140
DeepDive into Modern Development with AWS
mokocm
1
1.3k
IaCで全てが上手くいくと思うなよ_失敗事例のご紹介.pdf
mokocm
0
9.6k
re:Growth infra 2020
mokocm
0
4.8k
Other Decks in Technology
See All in Technology
KMP の Swift export
kokihirokawa
0
350
許しとアジャイル
jnuank
1
140
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
380
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
310
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
130
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
130
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
150
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
120
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
250
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
5
920
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
GitHub's CSS Performance
jonrohan
1032
470k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
BBQ
matthewcrist
89
9.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Raft: Consensus for Rubyists
vanstee
139
7.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Side Projects
sachag
455
43k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
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