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
140
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
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
200
AI-DLC 入門 〜AIコーディングの本質は「コード」ではなく「構造」〜 / Introduction to AI-DLC: The Essence of AI Coding Is Not “Code” but “Structure”
Avatar for shiro seike seike460
PRO
0
140
今さら聞けないサーバーレスのいいところ 〜運用から解放される世界を目指して〜 / 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
11
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
420
Team-First Serverless Platform Engineering Approach to PHP Applications with Laravel and Bref
Avatar for shiro seike seike460
PRO
1
68
地方で実現！ 九州、福岡近郊のAWS活用事例 / Success Stories from the Regions! AWS Use Cases in Kyushu and the Fukuoka Area
Avatar for shiro seike seike460
PRO
0
10
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
1k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
500
地方のPHPerもクラウドを使う理由 ~コストの最適化とチームに向き合う~ / Why even local PHPers use the cloud ~optimize costs and face the team
Avatar for shiro seike seike460
PRO
0
110

Other Decks in Programming

See All in Programming
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
210
最初からAWS CDKで技術検証してもいいんじゃない？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
4
180
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
530
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
150
Understanding Apache Lucene - More than just full-text search
Avatar for Alexander Reelsen spinscale
0
150
AI Assistants for Your Angular Solutions @Angular Graz, March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Fundamentals of Software Engineering In the Age of AI
Avatar for Dan Vega therealdanvega
2
310
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
660
LM Linkで(非力な！)ノートPCでローカルLLM
Avatar for 瀬尾佳隆 seosoft
0
290
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
360
ロボットのための工場に灯りは要らない
Avatar for watany watany
12
3.3k
Smarter Angular mit Transformers.js & Prompt API
Avatar for Christian Liebel christianliebel
PRO
1
110

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
180
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
160
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
800
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.2k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
260
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M

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/