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

フロントエンドカンファレンス沖縄2023前夜祭リジェクトコン
https://front-okinawa.connpass.com/event/299741/

Transcript

1. AWS Amplify 2023 2 0 23 . 11 . 17 @seike 4 60 1
2. 自己 @seike 46 0 - - @seike 46 0 - AWS Community Builder Serverless - Fusic - / 門 - / - - PHP Japan - - - 大 工 子工 055538A - 生 B 2 2
3. 3 日 15:40 日 AWS Amplify
4. Agenda 1 .AWS Amplify 2 . 一 3 . 4
5. 01 AWS Amplify
6. AWS Amplify AWS Amplify Amazon Web Services っ 　 API (GraphQL) っ 　 React Angular Vue iOS Android っ 　 SPA 自 6
7. AWS Amplify AWS Amplify っ 　高 っ 　 AWS Amplify っ 　 AWS 7
8. 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
9. 02 一
10. React AWS 用 URL https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/ 10
11. 面 11 GitHub Build 面 API (GraphQL) Storage
12. create-react-app React React AWS Amplify 12 $ npx create-react-app amplifyapp Happy hacking! $ cd amplifyapp $ npm start
13. Git AWS Amplify Git Git AWS Amplify 13
14. AWS Amplify AWS Amplify -> -> GitHub GitHub 14
15. build AWS Amplify React Build Build 　 15
17. URL 赤 URL 17
18. -> Get started 18
19. AWS Amplify GitHub Push AWS Amplify AWS Amplify Pull 行 aws-exports.js 入 19
20. amplify pull 子 20
21. 21 $ npm install aws-amplify @aws-amplify/ui-react npm install AWS Amplify
22. 用 22 $ npm install aws-amplify @aws-amplify/ui-react $ amplify add auth npm install AWS Amplify amplify add auth 用
23. amplify push Amazon Cognito AWS Lambda aws-exports.js 23 $ amplify push y
24. aws-exports.js 24
25. 用 用 src/index.js 生 aws-exports.js Amplify.configure 用 25
26. 面 src/App.js 示 面 -> withAuthenticator AWS Amplify 面 26
27. 面 面 示 src/App.js 示 27
28. Point
30. AWS Amplify バ プ 30 AWS Amplify 用 - Authentication - API (GraphQL) - API (REST) - Storage - Functions
31. DB Stripe 31 AWS Amplify Authentication API (REST) 用
32. AWS Amplify
33. Thank You We are Hiring ! https://recruit.fusic.co.jp/