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
0
130

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
Tweet

More Decks by shiro seike

See All by shiro seike
歴史から学ぶ「Why PHP？」 PHPを書く理由を改めて理解する / Learning from History: “Why PHP?” Rediscovering the Reasons for Writing PHP
Avatar for shiro seike seike460
PRO
0
340
Team-First Serverless Platform Engineering Approach to PHP Applications with Laravel and Bref
Avatar for shiro seike seike460
PRO
0
52
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
980
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
480
地方のPHPerもクラウドを使う理由 ~コストの最適化とチームに向き合う~ / Why even local PHPers use the cloud ~optimize costs and face the team
Avatar for shiro seike seike460
PRO
0
92
OpenTelemetryで始めるベンダーフリーなobservability / Vendor-free observability starting with OpenTelemetry
Avatar for shiro seike seike460
PRO
0
240
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
Avatar for shiro seike seike460
PRO
2
1.3k
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
Avatar for shiro seike seike460
PRO
2
1k
Amazon Q Developer Proで効率化するAPI開発入門
Avatar for shiro seike seike460
PRO
0
500

Other Decks in Programming

See All in Programming
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
980
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
7
3.4k
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
660
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
7
8.3k
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
590
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
510
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
540
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
270

Featured

See All Featured
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
71
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
210
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
120

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/