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
AWS Amplifyを始めよう / Getting Started with AWS Amp...
Search
shiro seike
PRO
November 17, 2023
Programming
0
83
AWS Amplifyを始めよう / Getting Started with AWS Amplify
フロントエンドカンファレンス沖縄2023前夜祭リジェクトコン
https://front-okinawa.connpass.com/event/299741/
shiro seike
PRO
November 17, 2023
Tweet
Share
More Decks by shiro seike
See All by shiro seike
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
86
(再)ひとり技術広報からの脱却 / Re:Breaking away from one-man technical public relations
seike460
PRO
1
130
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
840
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
250
AWS reInvent 2024サービスアップデートデモ / AWS reInvent 2024 Service Update Demo
seike460
PRO
0
41
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
610
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
1.2k
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
380
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
640
Other Decks in Programming
See All in Programming
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
230
Linux && Docker 研修/Linux && Docker training
forrep
23
4.3k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
260
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
470
Conform を推す - Advocating for Conform
mizoguchicoji
1
190
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
660
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
170
最近のVS Codeで気になるニュース 2025/01
74th
1
250
テストをしないQAエンジニアは何をしているか?
nealle
0
110
Rubyでつくるパケットキャプチャツール
ydah
1
670
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
670
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Statistics for Hackers
jakevdp
797
220k
A Tale of Four Properties
chriscoyier
158
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Agile that works and the tools we love
rasmusluckow
328
21k
Being A Developer After 40
akosma
89
590k
Site-Speed That Sticks
csswizardry
3
320
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Transcript
AWS Amplify 2023 2 0 23 . 11 . 17
@seike 4 60 1
自己 @seike 46 0 - - @seike 46 0 -
AWS Community Builder Serverless - Fusic - / 門 - / - - PHP Japan - - - 大 工 子工 055538A - 生 B 2 2
3 日 15:40 日 AWS Amplify
Agenda 1 .AWS Amplify 2 . 一 3 . 4
01 AWS Amplify
AWS Amplify AWS Amplify Amazon Web Services っ API
(GraphQL) っ React Angular Vue iOS Android っ SPA 自 6
AWS Amplify AWS Amplify っ 高 っ AWS Amplify
っ AWS 7
AWS Authentication Amazon Cognito 用 API (GraphQL) AWS
AppSync API (REST) Amazon API Gateway Storage Amazon S 3 Functions AWS Lambda Server-Side Rendering Amazon CloudFront 用 SSR Utilities Amazon CloudWatch 8
02 一
React AWS 用 URL https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/ 10
面 11 GitHub Build 面 API (GraphQL) Storage
create-react-app React React AWS Amplify 12 $ npx create-react-app amplifyapp
Happy hacking! $ cd amplifyapp $ npm start
Git AWS Amplify Git Git AWS Amplify 13
AWS Amplify AWS Amplify -> -> GitHub GitHub 14
build AWS Amplify React Build Build 15
16
URL 赤 URL 17
-> Get started 18
AWS Amplify GitHub Push AWS Amplify AWS Amplify Pull 行
aws-exports.js 入 19
amplify pull 子 20
21 $ npm install aws-amplify @aws-amplify/ui-react npm install AWS Amplify
用 22 $ npm install aws-amplify @aws-amplify/ui-react $ amplify add
auth npm install AWS Amplify amplify add auth 用
amplify push Amazon Cognito AWS Lambda aws-exports.js 23 $ amplify
push y
aws-exports.js 24
用 用 src/index.js 生 aws-exports.js Amplify.configure 用 25
面 src/App.js 示 面 -> withAuthenticator AWS Amplify 面 26
面 面 示 src/App.js 示 27
Point
03
AWS Amplify バ プ 30 AWS Amplify 用 - Authentication
- API (GraphQL) - API (REST) - Storage - Functions
DB Stripe 31 AWS Amplify Authentication API (REST) 用
AWS Amplify
Thank You We are Hiring ! https://recruit.fusic.co.jp/