Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for shiro seike shiro seike PRO
November 17, 2023
Programming
150
0

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

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

Avatar for shiro seike

shiro seike PRO

November 17, 2023

More Decks by shiro seike

See All by shiro seike
Why Continue AWS Community Builders
Avatar for shiro seike seike460
PRO
0
65
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
Avatar for shiro seike seike460
PRO
0
180
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
260
AI-DLC 入門 〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”
Avatar for shiro seike seike460
PRO
0
1.1k
今さら聞けないサーバーレスのいいところ 〜運用から解放される世界を目指して〜 / The Benefits of Serverless You Might Be Too Embarrassed to Ask About Now — Aiming for a World Free from Operational Burdens
Avatar for shiro seike seike460
PRO
0
100
AWS Lambda Durable Functions のユースケースを探る / Exploring Use Cases for AWS Lambda Durable Functions
Avatar for shiro seike seike460
PRO
0
89
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
500
Team-First Serverless Platform Engineering Approach to PHP Applications with Laravel and Bref
Avatar for shiro seike seike460
PRO
1
150
地方だからできる!コミュニティ参加と登壇を続ける意義 / “It’s Possible Because We’re in a Regional Area!” The Significance of Continuing to Participate in and Speak at Community Events
Avatar for shiro seike seike460
PRO
0
26

Other Decks in Programming

See All in Programming
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
630
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
260
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
410
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
560
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
230
新規プロダクトを高速で生み出すハーネスエンジニアリング
Avatar for Ryohei Ikegami seanchas116
19
7.8k
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
140
3Dシーンの圧縮
Avatar for Fadis fadis
1
560
Oxlintのカスタムルールの現況
Avatar for syumai syumai
5
940
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
Avatar for shogogg shogogg
0
180
ビジネスモデルから紐解く、AI+型駆動開発
Avatar for Hiroki Omote hirokiomote
2
5.1k
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
120

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
180
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
190
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
140
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
140
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
200
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.3k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
470
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
Designing for Performance
Avatar for Lara Hogan lara
611
70k

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

  16. 16

  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

  29. 03

  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/