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
React + AWSで 会員系SPAを作ってみた話
Search
Hidetaka Okamoto
April 27, 2017
Technology
2
910
React + AWSで 会員系SPAを作ってみた話
React kyoto vol.1資料
Hidetaka Okamoto
April 27, 2017
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
OpenAI APIで API Changelogを要約してみた話 / chatgpt-osaka-1
hideokamoto
0
450
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
53
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
260
Jamstack開発者のための App Runner入門
hideokamoto
1
420
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
380
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
170
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.6k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3k
Other Decks in Technology
See All in Technology
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.2k
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
670
いまさらのStorybook
ikumatadokoro
0
150
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.5k
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
120
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
200
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
150
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
480
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Facilitating Awesome Meetings
lara
49
6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
160
4 Signs Your Business is Dying
shpigford
180
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
How STYLIGHT went responsive
nonsquared
95
5.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Transcript
3FBDU "84Ͱ ձһܥ41"Λ࡞ͬͯΈͨ 3FBDULZPUPWPM
w 8 P S E # F O D I
ژ Ϟ σ Ϩ ʔ λ w 8 P S E 1 S F T T ຊ ޠ ϑ Υ ʔ ϥϜ ੈ w 8 P S E $ B N Q ,Z P U P ࣮ ߦ ҕ һ )JEFUBLB0LBNPUP %JHJUBMDVCF%FWFMPQFS
w 4FNBOUJD6*3FBDU w 3FBDU3PVUFS W w "NB[PO$PHOJUP*EFOUJUZ4%, ࠓհ͢Δͷ
l z ʮͬͯΈͨܥʯ ͳͷͰ݁ͳͲͳ͍
w 3JPUͰ࡞͍ͬͯͨϓϩδΣΫτΛ3FBDUʹ͍ͨ͠ w Ϟʔμϧͱ͔ϓϩάϨεόʔͱ͔ཉ͍͠ w άϦουͱ͔͋Δͱࣗ༝ߴ͍͍ͯ͘ΑͶ Γ͔ͨͬͨ͜ͱ
4FNBOUJD6*3FBDU IUUQTSFBDUTFNBOUJDVJDPNJOUSPEVDUJPO
w 4FNBOUJD6*ͷ3FBDU൛ w 5IFP⒏DJBM3FBDU*OUFHSBUJPO w 4FNBOUJD6*ͷK2VFSZ࣮ΛϦϓϨΠε w DPMVNOͷ(SJE͋Γ 4FNBOUJD6*3FBDU
ίϯϙʔωϯτͷ͍ํ <button class="ui small green button"> <i class="download icon"></i> Download
</button> <Button size='small' color='green'> <Icon name='download' /> Download </Button> ͜͏ͳΔˣ
None
w ձһઐ༻ϖʔδΛ࡞Γ͍ͨ w ೝূͰ͖͍ͯͳ͍࣌ϦμΠϨΫτ͍ͤͨ͞ w 63-ୟ͖Ͱձһϖʔδʹ͍͖͍ͨ w Ͱ͖Είʔυαϯϓϧཉ͍͠ Γ͔ͨͬͨ͜ͱ
3FBDU3PVUFS IUUQTSFBDUUSBJOJOHDPNSFBDUSPVUFS
WFSTJPOͰ݁ߏ͔Θͬͨ import { BrowserRouter as Router, Route, Link } from
'react-router-dom' $ npm install react-router ͔Β $ npm install react-router-dom ʹมߋ͞Ε͍ͯΔɻ
ϩάΠϯɾϩάΞτͷίʔυαϯϓϧ IUUQTSFBDUUSBJOJOHDPNSFBDUSPVUFSXFCFYBNQMFBVUIXPSLqPX
#SPXTFS3PVUFSͰϋϚͬͨͱ͜Ζ ./node_modules/webpack-dev-server/bin/webpack-dev- server.js \ —history-api-fallback w JOEFYIUNMͷϦμΠϨΫτ͕ඞཁ w /HJOYͷϦόϓϩͱ͔͠ͳ͍ͱʹͳΔ w
XFCQBDLEFWTFSWFSҎԼͷΑ͏ʹ͢Δ
/FUMJGZͰϗετ͢Δ߹ /* /index.html 200 w @SFEJSFDUTϑΝΠϧͰϦμΠϨΫτͰ͖Δ w JOEFYIUNMͱಉ͡֊ʹઃஔ͢Δ͚ͩ w ϑΝΠϧͷதҎԼͷΑ͏ʹ͢Δ
w ձһपΓͷ࣮ͨ͘͠ͳ͍ w 4%,ͱ͔͋Δͱخ͍͠ΑͶ w Ͳ͏ͤͳΒίʔυαϯϓϧ͋Δͱ࠷ߴ Γ͔ͨͬͨ͜ͱ
"NB[PO$PHOJUP*EFOUJUZ4%, IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKT
"NB[PO$PHOJUP IUUQTBXTBNB[PODPNKQDPHOJUP
w "84$PHOJUP ձһج൫ ͷͨΊͷ4%, w ϩάΠϯɾϩάΞττʔΫϯऔಘͳͲ w ؤுΕ.'"ʹରԠͰ͖Δ༷ࢠʢະઓʣ "NB[PO$PHOJUP*EFOUJUZ4%,
"84$PHOJUPར༻ࣄྫʢ͜Ε3JPU41"ʣ IUUQTHPHFUTIJGUFSJP
ηοτΞοϓ import {CognitoUserPool} from ‘amazon-cognito-identity-js’ const UserPool = new CognitoUserPool({
'ClientId': ClientId, 'UserPoolId': UserPoolId }) w OQNJTBWFBNB[PODPHOJUPJEFOUJUZKT w JNQPSUSFRVJSFͰΑΔ w $PHOJUPͷ*%ใΛΠϯελϯεʹͤ0,
Ϣʔβʔొαϯϓϧ IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKTVTBHF UserPool.signUp( '
[email protected]
', 'password', [], null, function(err, result) {
if (err) { alert(err) return } cognitoUser = result.user console.log('user name is ' + cognitoUser.getUsername()) })
DBMMCBDLͳͷͰɺ1SPNJTFͰϥοϓͨ͠ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSECMPC NBTUFSDMJFOUIBOEMFSTBVUIKT-- return new Promise((resolve, reject) => { cognitoUser.authenticateUser(authenticationDetails,
{ 'onFailure': (err) => { reject(err) }, 'onSuccess': (result) => { const token = result.getAccessToken().getJwtToken() resolve(token) } }) })
DPNQPOFOU8JMM.PVOUͰձһϖʔδೝূ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSECMPC NBTUFSDMJFOUSPVUFTQSJWBUF3PVUFKT-- Auth.getAuthStatus().then(result => { if (result === 'Unauthorized')
{ this.props.history.replace('/login') } else { const sessionId = result this.setState({sessionId}) } }) .catch((err) => { console.log(err) this.props.history.replace('/login') })
DPNQPOFOU8JMM.PVOUͰձһϖʔδೝূ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSECMPC NBTUFSDMJFOUSPVUFTQSJWBUF3PVUFKT-- Auth.getAuthStatus().then(result => { if (result === 'Unauthorized')
{ this.props.history.replace('/login') } else { const sessionId = result this.setState({sessionId}) } }) .catch((err) => { console.log(err) this.props.history.replace('/login') }) N G ͳ Β h i s t o r y Ͱ Ϧ μΠ Ϩ Ϋ τ
ձһϖʔδ༻ͷ3PVUFλάΛ࡞ͬͯར༻ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSECMPC NBTUFSDMJFOUMBZPVUTQSJWBUF-BZPVUKT-- <Switch> {PrivateRoutes.map((route, index) => ( <PrivateRoute component={route.main}
key={index} path={route.path} /> ))} </Switch>
3FBDUͰͷαϯϓϧίʔυ͋Δ IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKTUSFFNBTUFSFYBNQMFTCBCFMXFCQBDL
w ձһొͷΈͰϩάΠϯͳͲͰ͖ͳ͍ w ొॲཧ݁ՌDPOTPMFMPHͰग़Δ͚ͩ w σβΠϯ·ͬͨ͘͞Εͯͳ͍ w ෦औΓతͳཱͪҐஔʹͳΓͦ͏ 3FBDUͰͷαϯϓϧίʔυ͋Δ
IUUQTHJUIVCDPNBXTBNB[PO DPHOJUPJEFOUJUZKTUSFFNBTUFS FYBNQMFTCBCFMXFCQBDL ͘͢͝ૉͬؾͳ͍
w 3FBDU3PVUFSͷαϯϓϧίʔυཁΧελϜ w 1SPNJTFDBMMCBDLͷ݁ՌΛ͑ͳ͔ͬͨ w ެ։ɾձһϖʔδͷ͚ํͳͲࢀߟʹͳΔ w ϝοηʔδϑΥʔϜ4FNBOUJD6*͞·͞· ࣮࣌ʹਏ͔ͬͨ
w 3FBDU3PVUFSWΈΜͳهࣄॻ͜͏ͥ w ."6·Ͱແྉ͔ͩΒ$PHOJUP͍͍Α w "1*(BUFXBZΛ͔ͭ͑ձһݶఆ"1*ͭ͘ΕΔ w ͜Ε͔Βຊ֨తʹϓϩδΣΫτಋೖ༧ఆ ͦͷ΄͔
IUUQTXQLZPUPOFUKBXTVHLZPUP TFSWFSMFTTDPHOJUPIBOETPO +"846(Ͱ ϋϯζΦϯͬͨ
αϯϓϧίʔυ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSE
l z BOZRVFTUJPO