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
710
【第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
340
Other Decks in Programming
See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
570
CSC305 Lecture 10
javiergs
PRO
0
220
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
400
チームの境界をブチ抜いていけ
tokai235
0
210
Pythonに漸進的に型をつける
nealle
1
110
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
270
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.9k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
CSC509 Lecture 05
javiergs
PRO
0
310
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
570
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Producing Creativity
orderedlist
PRO
347
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
For a Future-Friendly Web
brad_frost
180
10k
How to train your dragon (web standard)
notwaldorf
97
6.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Why Our Code Smells
bkeepers
PRO
340
57k
Rails Girls Zürich Keynote
gr2m
95
14k
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/