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

ίϯϙʔωϯτͷ࢖͍ํ Download Download ͜͏ͳΔˣ

No content

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 OQNJŠTBWFBNB[PODPHOJUPJEFOUJUZKT w JNQPSU΍SFRVJSFͰΑ΂Δ 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-- {PrivateRoutes.map((route, index) => ( ))}

3FBDUͰͷαϯϓϧίʔυ΋͋Δ IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKTUSFFNBTUFSFYBNQMFTCBCFMXFCQBDL

w ձһొ࿥ͷΈͰϩάΠϯͳͲ͸Ͱ͖ͳ͍ w ొ࿥ॲཧ݁Ռ͸DPOTPMFMPHͰग़Δ͚ͩ w σβΠϯ͸·ͬͨ͘͞Εͯͳ͍ w ෦඼औΓతͳཱͪҐஔʹͳΓͦ͏ 3FBDUͰͷαϯϓϧίʔυ΋͋Δ

IUUQTHJUIVCDPNBXTBNB[PO DPHOJUPJEFOUJUZKTUSFFNBTUFS FYBNQMFTCBCFMXFCQBDL ͘͢͝ૉͬؾͳ͍

w 3FBDU3PVUFSͷαϯϓϧίʔυ͸ཁΧελϜ w 1SPNJTF΍DBMMCBDLͷ݁ՌΛ࢖͑ͳ͔ͬͨ w ެ։ɾձһϖʔδͷ෼͚ํͳͲ͸ࢀߟʹͳΔ w ϝοηʔδ΍ϑΥʔϜ͸4FNBOUJD6*͞·͞· ࣮૷࣌ʹਏ͔ͬͨ఺

w 3FBDU3PVUFSWΈΜͳهࣄॻ͜͏ͥ w ."6·Ͱແྉ͔ͩΒ$PHOJUP͍͍Α w "1*(BUFXBZΛ͔ͭ͑͹ձһݶఆ"1*΋ͭ͘ΕΔ w ͜Ε͔Βຊ֨తʹϓϩδΣΫτಋೖ༧ఆ ͦͷ΄͔

IUUQTXQLZPUPOFUKBXTVHLZPUP TFSWFSMFTTDPHOJUPIBOETPO +"846(Ͱ ϋϯζΦϯ΍ͬͨ

αϯϓϧίʔυ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSE

l z BOZRVFTUJPO