AWS Amplifyを始めよう / Getting Started with AWS Amplify

by shiro seike

Embed

Start on current slide

Slide 1

Slide 1 text

AWS Amplify 2023 2 0 23 . 11 . 17 @seike 4 60 1

Slide 2

Slide 2 text

自己 @seike 46 0 - - @seike 46 0 - AWS Community Builder Serverless - Fusic - / 門 - / - - PHP Japan - - - 大工子工 055538A - 生 B 2 2

Slide 3

Slide 3 text

3 日 15:40 日 AWS Amplify

Slide 4

Slide 4 text

Agenda 1 .AWS Amplify 2 . 一 3 . 4

Slide 5

Slide 5 text

01 AWS Amplify

Slide 6

Slide 6 text

AWS Amplify AWS Amplify Amazon Web Services っ　 API (GraphQL) っ　 React Angular Vue iOS Android っ　 SPA 自 6

Slide 7

Slide 7 text

AWS Amplify AWS Amplify っ　高っ　 AWS Amplify っ　 AWS 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

02 一

Slide 10

Slide 10 text

React AWS 用 URL https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/ 10

Slide 11

Slide 11 text

面 11 GitHub Build 面 API (GraphQL) Storage

Slide 12

Slide 12 text

create-react-app React React AWS Amplify 12 $ npx create-react-app amplifyapp Happy hacking! $ cd amplifyapp $ npm start

Slide 13

Slide 13 text

Git AWS Amplify Git Git AWS Amplify 13

Slide 14

Slide 14 text

AWS Amplify AWS Amplify -> -> GitHub GitHub 14

Slide 15

Slide 15 text

build AWS Amplify React Build Build 　 15

Slide 16

Slide 16 text

Slide 17

Slide 17 text

URL 赤 URL 17

Slide 18

Slide 18 text

-> Get started 18

Slide 19

Slide 19 text

AWS Amplify GitHub Push AWS Amplify AWS Amplify Pull 行 aws-exports.js 入 19

Slide 20

Slide 20 text

amplify pull 子 20

Slide 21

Slide 21 text

21 $ npm install aws-amplify @aws-amplify/ui-react npm install AWS Amplify

Slide 22

Slide 22 text

用 22 $ npm install aws-amplify @aws-amplify/ui-react $ amplify add auth npm install AWS Amplify amplify add auth 用

Slide 23

Slide 23 text

amplify push Amazon Cognito AWS Lambda aws-exports.js 23 $ amplify push y

Slide 24

Slide 24 text

aws-exports.js 24

Slide 25

Slide 25 text

用用 src/index.js 生 aws-exports.js Amplify.configure 用 25

Slide 26

Slide 26 text

面 src/App.js 示面 -> withAuthenticator AWS Amplify 面 26

Slide 27

Slide 27 text

面面示 src/App.js 示 27

Slide 28

Slide 28 text

Point

Slide 29

Slide 29 text

Slide 30

Slide 30 text

AWS Amplify バプ 30 AWS Amplify 用 - Authentication - API (GraphQL) - API (REST) - Storage - Functions