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
【第6回】フロントエンド× ビアバッシュ[React Native, React] × AWS...
Search
hiroyuki8103
January 26, 2019
Programming
0
700
【第6回】フロントエンド× ビアバッシュ[React Native, React] × AWS Amplify
認証認可をAWS Cognitoにまかせる際に、提供されているJavascriptライブラリを使えば超簡単に認証付きページが完成する話
hiroyuki8103
January 26, 2019
Tweet
Share
More Decks by hiroyuki8103
See All by hiroyuki8103
【第7回】フロントエンド× ビアバッシュ初心者勉強会 酒がナイト in 神保町
hiroyuki8103
1
410
第6回フロントエンド× ビアバッシュ 初心者勉強会_ご案内
hiroyuki8103
0
340
第二回React勉強会.pdf
hiroyuki8103
0
270
第一回 酒がないとReact勉強会_初心者がReactで学ぶのに役立ったサイト/勉強方法を紹介
hiroyuki8103
1
330
Other Decks in Programming
See All in Programming
5つのアンチパターンから学ぶLT設計
narihara
1
140
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
290
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
ニーリーにおけるプロダクトエンジニア
nealle
0
720
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
6
5.4k
GoのGenericsによるslice操作との付き合い方
syumai
3
720
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
500
エラーって何種類あるの?
kajitack
5
340
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
380
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Writing Fast Ruby
sferik
628
62k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
[React Native, React, Vuejs] AWS Amplify SMS
@hiromb1804
Jehb u hiro ##! u /(?@4%'C-9$ u RubyGUVQ 3AY PKRa#
u OSier=B1)6PKW\c! u DIM[ =B1)6/+;."NF Z SX^H <BC6'C7:2)'C7_`"idjT React Native LaravelAWS 'C-9$UI/UX5,&8>*0fLg]E
! "#"$ % &
6;6@!$" :A JS%*' + .? (&()< CFE u 6;6@# 9-07D
8 =,> (Outh2.0, Open ID Connect…) u AWSFirebaseAuth0 31 Javascript( &()< FE 429 u B AWS5/%*'+ < (&() 31 React React Native VueAngularIonic
2BReact?AC)! @101H5 ReactIG@ Amplify+'+, ."%- AWS Amplify CLI ."%->9;4 create-react-app
amplify configure amplify init amplify add auth amplify push amplify add hosting ?AED *"$.ED073: React &</F= WEB %86 amplify publish "$#( "$#( "$#( "$#( WEB
React u React
u create-react-app project-name u cd project-name u npm install aws-amplify aws-amplify-react u npm start
AWS Amplify CLI "(- '#+)!$ u amplify-cli amplify congigure
'# u npm install -g @aws-amplify/cli u amplify configure &ap-northeast-1 *# accessKeyIDsecretAccessKey %, . !$
AWS ID
amplify init u $ #"! u javascript
→ react % OK
amplify init 3 u AWS ←AWS CloudFormation
amplify init / 3 u ;:9? >@0)%! +3 u
amplify status" 72amplify add 28-4$"&<1 amplify publish #,*'. 6(%! =5
amplify add auth Cognito amplify add hosting S3 u
aws-exports.js src$ %!#" u amplify push amplify publish
amplify auth amplify push
React index.js App.js 3
1 1
amplify add publish URL http://2reactcognito-20190126130822-hostingbucket.s3-website-ap-northeast-
1.amazonaws.com/
SMS"!$# u
u SMS
JWT (WEB )
AWS Cognito
!
React Native Vue % (' u WEB
S3 publish % "# &!(' $
u How to Build Cloud-Powered Mobile Apps with Expo
& AWS Amplify https://blog.expo.io/how-to-build-cloud-powered-mobile-apps-with-expo-aws- amplify-2fddc898f9a2 u AWS Amplify + React.js https://qiita.com/monamu/items/f40836cd4b1b14a13c68 u AWS Amplify React https://dev.classmethod.jp/client-side/javascript/amplify-custom-signup/