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
89
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
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
130
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
460
from Sakichi Toyoda to Agile
kawaguti
PRO
1
120
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
730
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
440
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
730
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
200
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
800
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
110
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
690
Speed Design
sergeychernyshev
32
1.2k
Unsuck your backbone
ammeep
671
58k
Embracing the Ebb and Flow
colly
88
4.8k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Mobile First: as difficult as doing things right
swwweet
224
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
GitHub's CSS Performance
jonrohan
1032
470k
Being A Developer After 40
akosma
91
590k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Automating Front-end Workflow
addyosmani
1371
200k
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