Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for shiro seike shiro seike PRO
November 17, 2023
Programming
190
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
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
790
Seeing Through Serverless: Observability for AWS Lambda with ADOT and CloudWatch Application Signals
Avatar for shiro seike seike460
PRO
1
160
Seeing Through Serverless: ADOT と CloudWatch Application Signals で実現する AWS Lambda のオブザーバビリティ（日本語版）/ Seeing Through Serverless (Japanese Edition)
Avatar for shiro seike seike460
PRO
1
37
モノレポの型は、そのままつながる 〜Hono RPCで型を素通しする開発体験〜 / Monorepo Types Connect As-Is: Passing Types Through with Hono RPC
Avatar for shiro seike seike460
PRO
1
46
OSSのコンセプトを知る / Understanding the Concept Behind an OSS
Avatar for shiro seike seike460
PRO
1
42
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
680
コミュニティの有益性 ~JAWS Days 2026 での体験を通して~ / The Benefits of a Community ~Through My Experience at JAWS Days 2026~
Avatar for shiro seike seike460
PRO
0
490
実行委員長目線で振り返る JAWS DAYS 2026 / JAWS DAYS 2026 from the Chair's Perspective
Avatar for shiro seike seike460
PRO
1
40
SLO から始める SRE / Starting SRE with SLO
Avatar for shiro seike seike460
PRO
1
120

Other Decks in Programming

See All in Programming
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
360
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
2
300
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
920
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2.2k
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
4.9k
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2.9k
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
120
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
150
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
8
5.5k
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
230
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
Avatar for 野瀬田　裕樹 yuukiw00w
0
320
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
190

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.3k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
620
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
360
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.7k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
550

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/