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 Amplify
Search
shiro seike
PRO
November 17, 2023
Programming
0
40
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
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
技術力を高め合う “開けた”企業間コミュニティの形成 / Formation of an "open" inter-company community to enhance technological capabilities
seike460
PRO
1
66
有効な使い方を正しく理解して実装する PHP8.3の最新機能の「ウラ側」 / Understanding and Implementing Effective Usage Correctly The "Uraside" of PHP 8.3's Latest Features
seike460
PRO
1
74
有効な使い方を正しく理解して実装する PHP8.3の最新機能 / Proper understanding and implementation of effective usage Latest features in PHP 8.3
seike460
PRO
2
280
事例から見るサーバーレスの効果 / Serverless Effectiveness as Seen in Case Studies
seike460
PRO
1
91
Secure Serverless Architecture
seike460
PRO
2
560
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
180
サーバーレスらしさを意識した AWSにおける開発手法 / Development methodologies in AWS that are serverless-like
seike460
PRO
1
75
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
3
470
Other Decks in Programming
See All in Programming
CSC307 Lecture 14
javiergs
PRO
0
220
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
小さな開発会社を作った理由
polidog
0
1.9k
Namespace on read
tagomoris
2
370
AHC035解説
terryu16
0
730
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
リハビリmruby
kishima
1
160
Advanced App Shrinking Techniques
cbeyls
2
150
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
The Invisible Customer
myddelton
117
13k
Six Lessons from altMBA
skipperchong
24
3.2k
Adopting Sorbet at Scale
ufuk
71
8.8k
Faster Mobile Websites
deanohume
303
30k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Code Reviewing Like a Champion
maltzj
517
39k
Side Projects
sachag
451
42k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
A Tale of Four Properties
chriscoyier
155
22k
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/