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
970
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
550
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
76
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
320
Jamstack開発者のための App Runner入門
hideokamoto
1
470
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
420
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.1k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
190
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.8k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3.1k
Other Decks in Technology
See All in Technology
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
10
4.2k
GitHub ActionsをTypeScriptで作ろう!
sansantech
PRO
2
300
テスト設計チュートリアル ちびこん編 ’25
omn
1
370
KubeCon EU 2025 Recap - Kubernetes CRD Design for the Long Haul: Tips, Tricks, and Lessons Learned / Kubernetes Meetup Tokyo #70 / k8sjp70-crd-long-haul-recap
everpeace
0
120
Creative UIs with Compose: Kotlinconf 2025
chrishorner
0
170
エンジニアのための 法規制への取り組み方 #healthtechmeetup
77web
2
1.4k
VueUseから学ぶ実践TypeScript #TSKaigi #TSKaigi2025
bengo4com
3
1.4k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
770
さくらのクラウド 開発の挑戦とその舞台裏
kazeburo
0
620
オープンソースとビジネス: 位置情報の世界からみえる流れ / 札幌IT石狩鍋#2
sorami
0
190
若手中心の内製アジャイル開発で研究開発に挑戦 / 20250517 Nobuhiro Kawamura & Dami Lee & Tomohiko Tanikawa
shift_evolve
1
320
AWS LambdaをTypeScriptで動かして分かった、Node.jsのTypeScriptサポートの利点と課題
smt7174
1
2.5k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Practical Orchestrator
shlominoach
187
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
180
53k
Become a Pro
speakerdeck
PRO
28
5.3k
Agile that works and the tools we love
rasmusluckow
329
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Rails Girls Zürich Keynote
gr2m
94
13k
BBQ
matthewcrist
88
9.6k
Building Applications with DynamoDB
mza
94
6.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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