Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AWS Amplifyを始めよう / Getting Started with AWS Amp...
Search
shiro seike
PRO
November 17, 2023
Programming
0
58
AWS Amplifyを始めよう / Getting Started with AWS Amplify
フロントエンドカンファレンス沖縄2023前夜祭リジェクトコン
https://front-okinawa.connpass.com/event/299741/
shiro seike
PRO
November 17, 2023
Tweet
Share
More Decks by shiro seike
See All by shiro seike
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
270
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
500
いまあるチームにフィットさせる Serverless そして Platform Engineeringへの挑戦 / Serverless Fits the Team You Have and Platform Engineering
seike460
PRO
2
1.2k
いまあるチームにフィットさせる Serverless / Serverless fits in with the team you have now.
seike460
PRO
2
59
地方こそサーバーレス! チームにフィットさせるサーバーレス / Rural areas are serverless! Serverless to Fit Your Team
seike460
PRO
1
14
AWS X-Rayを利用したサーバーレスのパフォーマンス分析 / Serverless performance analysis using AWS X-Ray
seike460
PRO
2
37
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
420
技術力を高め合う “開けた”企業間コミュニティの形成 / Formation of an "open" inter-company community to enhance technological capabilities
seike460
PRO
1
81
有効な使い方を正しく理解して実装する PHP8.3の最新機能の「ウラ側」 / Understanding and Implementing Effective Usage Correctly The "Uraside" of PHP 8.3's Latest Features
seike460
PRO
1
130
Other Decks in Programming
See All in Programming
Unlocking Python's Core Magic
leew
0
110
為醫療加裝Python的引擎
cclai999
0
270
ECS向けのドリフト検知機構を実装してみた
tkikuc
0
270
AWS認定資格を受験するにあたり、気づいたこと・実践していたことのまとめ
satoshi256kbyte
1
120
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
120
[KR] Server Driven Compose With Firebase
skydoves
1
120
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
6
220
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
150
全方位強化 Python 服務可觀測性:以 FastAPI 和 Grafana Stack 為例
blueswen
1
360
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
480
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
1
130
pytest プラグインを開発して DRY に自動テストを書こう
inuatsu
2
240
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Unsuck your backbone
ammeep
667
57k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
A Tale of Four Properties
chriscoyier
155
22k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
341
39k
Transcript
AWS Amplify 2023 2 0 23 . 11 . 17
@seike 4 60 1
自己 @seike 46 0 - - @seike 46 0 -
AWS Community Builder Serverless - Fusic - / 門 - / - - PHP Japan - - - 大 工 子工 055538A - 生 B 2 2
3 日 15:40 日 AWS Amplify
Agenda 1 .AWS Amplify 2 . 一 3 . 4
01 AWS Amplify
AWS Amplify AWS Amplify Amazon Web Services っ API
(GraphQL) っ React Angular Vue iOS Android っ SPA 自 6
AWS Amplify AWS Amplify っ 高 っ AWS Amplify
っ AWS 7
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
02 一
React AWS 用 URL https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/ 10
面 11 GitHub Build 面 API (GraphQL) Storage
create-react-app React React AWS Amplify 12 $ npx create-react-app amplifyapp
Happy hacking! $ cd amplifyapp $ npm start
Git AWS Amplify Git Git AWS Amplify 13
AWS Amplify AWS Amplify -> -> GitHub GitHub 14
build AWS Amplify React Build Build 15
16
URL 赤 URL 17
-> Get started 18
AWS Amplify GitHub Push AWS Amplify AWS Amplify Pull 行
aws-exports.js 入 19
amplify pull 子 20
21 $ npm install aws-amplify @aws-amplify/ui-react npm install AWS Amplify
用 22 $ npm install aws-amplify @aws-amplify/ui-react $ amplify add
auth npm install AWS Amplify amplify add auth 用
amplify push Amazon Cognito AWS Lambda aws-exports.js 23 $ amplify
push y
aws-exports.js 24
用 用 src/index.js 生 aws-exports.js Amplify.configure 用 25
面 src/App.js 示 面 -> withAuthenticator AWS Amplify 面 26
面 面 示 src/App.js 示 27
Point
03
AWS Amplify バ プ 30 AWS Amplify 用 - Authentication
- API (GraphQL) - API (REST) - Storage - Functions
DB Stripe 31 AWS Amplify Authentication API (REST) 用
AWS Amplify
Thank You We are Hiring ! https://recruit.fusic.co.jp/