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
61
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
Avatar for shiro seike seike460
PRO
0
170
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
250
AI-DLC 入門 〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”
Avatar for shiro seike seike460
PRO
0
890
今さら聞けないサーバーレスのいいところ 〜運用から解放される世界を目指して〜 / 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
95
AWS Lambda Durable Functions のユースケースを探る / Exploring Use Cases for AWS Lambda Durable Functions
Avatar for shiro seike seike460
PRO
0
85
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
470
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
24

Other Decks in Programming

See All in Programming
要はバランスからの卒業 #yumemi_grow
Avatar for Takuma Kajikawa kajitack
0
160
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
770
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
280
GoogleCloudとterraform完全に理解した
Avatar for Terisuke terisuke
1
200
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
940
実用！Hono RPC2026
Avatar for yodaka yodaka
2
310
過去のレビュー知見をSkillsで資産化した話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
1.9k
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
23
12k
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
2
1.8k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
440
継続的な負荷検証を目指して
Avatar for Kazuhiko Yamashita pyama86
3
1.2k
Agentic UI in the Frontend: Architectures with Open Standards @JAX 2026 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
110

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
290
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.1k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
220
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
1.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.7k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
49
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
210

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/