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
mokocm
June 24, 2020
Technology
0
6.5k
AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ
mokocm
June 24, 2020
Tweet
Share
More Decks by mokocm
See All by mokocm
1年間モダンなアプリへの移行支援をやってみて分かった、モダナイズの重要性と難しさ
mokocm
1
1.2k
レガシーシステム、モダナイズへの道筋
mokocm
0
1.3k
Application Composerのすすめ
mokocm
0
1k
devio-2022-sapporo-moko.pdf
mokocm
2
74
DeepDive into Modern Development with AWS
mokocm
1
990
IaCで全てが上手くいくと思うなよ_失敗事例のご紹介.pdf
mokocm
0
8.4k
re:Growth infra 2020
mokocm
0
4.6k
入社1年でAWS資格フルコンプして本書いた話
mokocm
0
3.7k
AWS環境でIaCを使い始めて運用するためのメリットデメリットと注意点
mokocm
0
2.7k
Other Decks in Technology
See All in Technology
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.2k
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
3.1k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
460
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2.1k
統計的学習理論読み Chapter 1
kmatsui
4
1k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.7k
コードレビューを支援するAI技術の応用
akkie76
3
190
OpenTelemetry実践 はじめの一歩
taxin
0
330
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
220
LLMの現在
pfn
PRO
8
4.1k
大規模言語モデル開発のための日本語 Instruction データセット作成の取り組み
kunishou
1
180
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Designing with Data
zakiwarfel
94
4.8k
How to Ace a Technical Interview
jacobian
272
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Ruby is Unlike a Banana
tanoku
95
10k
Designing Experiences People Love
moore
135
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
For a Future-Friendly Web
brad_frost
170
8.9k
Automating Front-end Workflow
addyosmani
1353
200k
The Pragmatic Product Professional
lauravandoore
24
5.7k
It's Worth the Effort
3n
180
27k
Unsuck your backbone
ammeep
661
56k
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