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
18
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
49
サーバーレスらしさを意識した AWSにおける開発手法 / Development methodologies in AWS that are serverless-like
seike460
PRO
1
56
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
190
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
フルサーバーレスアーキテクチャの運用を重ねた先に見える価値 / 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
87
「サーバーレス」ってなんだろう みんなでワイガヤ談義 / What is "serverless?" Wigaya discussion with everyone
seike460
PRO
0
34
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
130
Other Decks in Programming
See All in Programming
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
370
AppRouter Panel Talk
yosuke_furukawa
PRO
1
510
Let's learn code review
riofujimon
2
630
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
290
Folding Cheat Sheet #4
philipschwarz
PRO
0
110
Powerfully Typed TypeScript
euxn23
2
670
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
390
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
490
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
0
110
Exploring Type-Informed Lint Rules in Rust based Linters
unvalley
2
360
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
140
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
220
Featured
See All Featured
Scaling GitHub
holman
457
140k
Six Lessons from altMBA
skipperchong
22
3k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
Side Projects
sachag
451
41k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
BBQ
matthewcrist
80
8.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
How GitHub (no longer) Works
holman
305
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Product Roadmaps are Hard
iamctodd
45
9.8k
GraphQLとの向き合い方2022年版
quramy
33
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
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/