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
990
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
610
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
88
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
340
Jamstack開発者のための App Runner入門
hideokamoto
1
490
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
440
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.2k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
200
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.9k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3.2k
Other Decks in Technology
See All in Technology
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
180
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
許しとアジャイル
jnuank
1
130
実装で解き明かす並行処理の歴史
zozotech
PRO
1
400
VCC 2025 Write-up
bata_24
0
180
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
410
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
310
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
300
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
150
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Bash Introduction
62gerente
615
210k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualization
eitanlees
148
16k
GraphQLとの向き合い方2022年版
quramy
49
14k
Rails Girls Zürich Keynote
gr2m
95
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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