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
19
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
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
110
サーバーレスらしさを意識した AWSにおける開発手法 / Development methodologies in AWS that are serverless-like
seike460
PRO
1
58
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
200
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
130
フルサーバーレスアーキテクチャの運用を重ねた先に見える価値 / The value that can be seen beyond the operation of a full serverless architecture
seike460
PRO
0
23
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
2.1k
Backlog API x Generative AI
seike460
PRO
0
90
「サーバーレス」ってなんだろう みんなでワイガヤ談義 / What is "serverless?" Wigaya discussion with everyone
seike460
PRO
0
37
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
140
Other Decks in Programming
See All in Programming
Next.js App Router
quramy
14
2.3k
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.4k
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
TypeScriptから始める VR生活
tamagokakeg
2
140
Deep Dive into React Stream/Serialize
mugi_uno
4
880
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
1.1k
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
勉強会4_アップデートされたAssistantsAPIを試す
milky04
0
230
Criando a Woovi em uma semana
daniloab
0
120
The Final Frontier of Web Development: React Server Components vs Jakarta EE
ivargrimstad
0
200
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Infographics Made Easy
chrislema
238
18k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Atom: Resistance is Futile
akmur
260
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Ruby is Unlike a Banana
tanoku
96
10k
We Have a Design System, Now What?
morganepeng
43
6.8k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
A Tale of Four Properties
chriscoyier
153
22k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
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/