React + AWSで 会員系SPAを作ってみた話

React kyoto vol.1資料

Transcript

1. 3FBDU
   
   "84Ͱ
   ձһܥ41"Λ࡞ͬͯΈͨ࿩ 3FBDULZPUP
   WPM
2. 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
       ࣮ ߦ ҕ һ ௕
   )JEFUBLB
   0LBNPUP %JHJUBMDVCF
   %FWFMPQFS
3. w 4FNBOUJD
   6*
   3FBDU
   w 3FBDU
   3PVUFS
   W
   w "NB[PO
   $PHOJUP
   *EFOUJUZ
   4%, ࠓ೔঺հ͢Δ΋ͷ
4. l z ʮ΍ͬͯΈͨܥʯ
   ͳͷͰ݁࿦ͳͲͳ͍
5. w 3JPUͰ࡞͍ͬͯͨϓϩδΣΫτΛ3FBDUʹ͍ͨ͠
   w Ϟʔμϧͱ͔ϓϩάϨεόʔͱ͔ཉ͍͠
   w άϦουͱ͔͋Δͱࣗ༝౓ߴ͍͍ͯ͘ΑͶ ΍Γ͔ͨͬͨ͜ͱ
6. 4FNBOUJD
   6*
   3FBDU IUUQTSFBDUTFNBOUJDVJDPNJOUSPEVDUJPO
7. w 4FNBOUJD
   6*ͷ3FBDU൛
   w 5IF
   P⒏DJBM
   3FBDU
   *OUFHSBUJPO
   w 4FNBOUJD
   6*ͷK2VFSZ࣮૷ΛϦϓϨΠε
   w 
   DPMVNO
   ͷ
   (SJE͋Γ 4FNBOUJD
   6*
   3FBDU
8. ίϯϙʔωϯτͷ࢖͍ํ <button class="ui small green button"> <i class="download icon"></i> Download </button> <Button size='small' color='green'> <Icon name='download' /> Download </Button> ͜͏ͳΔˣ
10. w ձһઐ༻ϖʔδΛ࡞Γ͍ͨ
    w ೝূͰ͖͍ͯͳ͍࣌͸ϦμΠϨΫτ͍ͤͨ͞
    w 63-௚ୟ͖Ͱձһϖʔδʹ͍͖͍ͨ
    w Ͱ͖Ε͹ίʔυαϯϓϧ΋ཉ͍͠ ΍Γ͔ͨͬͨ͜ͱ
11. 3FBDU
    3PVUFS IUUQTSFBDUUSBJOJOHDPNSFBDUSPVUFS
12. WFSTJPOͰ݁ߏ͔Θͬͨ import { BrowserRouter as Router, Route, Link } from 'react-router-dom' $ npm install react-router ͔Β $ npm install react-router-dom ʹมߋ͞Ε͍ͯΔɻ
13. ϩάΠϯɾϩάΞ΢τͷίʔυαϯϓϧ IUUQTSFBDUUSBJOJOHDPNSFBDUSPVUFSXFCFYBNQMFBVUIXPSLqPX
14. #SPXTFS3PVUFSͰϋϚͬͨͱ͜Ζ ./node_modules/webpack-dev-server/bin/webpack-dev- server.js \ —history-api-fallback w JOEFYIUNM΁ͷϦμΠϨΫτ͕ඞཁ
    w /HJOYͷϦόϓϩͱ͔͠ͳ͍ͱʹͳΔ
    w XFCQBDLEFWTFSWFS͸ҎԼͷΑ͏ʹ͢Δ
15. /FUMJGZͰϗετ͢Δ৔߹ /* /index.html 200 w @SFEJSFDUTϑΝΠϧͰϦμΠϨΫτͰ͖Δ
    w JOEFYIUNMͱಉ͡֊૚ʹઃஔ͢Δ͚ͩ
    w ϑΝΠϧͷத਎͸ҎԼͷΑ͏ʹ͢Δ
16. w ձһपΓͷ࣮૷ͨ͘͠ͳ͍
    w 4%,ͱ͔͋Δͱخ͍͠ΑͶ
    w Ͳ͏ͤͳΒίʔυαϯϓϧ΋͋Δͱ࠷ߴ ΍Γ͔ͨͬͨ͜ͱ
17. "NB[PO
    $PHOJUP
    *EFOUJUZ
    4%, IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKT
18. "NB[PO
    $PHOJUP IUUQTBXTBNB[PODPNKQDPHOJUP
19. w "84
    $PHOJUP ձһج൫ ͷͨΊͷ4%,
    w ϩάΠϯɾϩάΞ΢τ΍τʔΫϯऔಘͳͲ
    w ؤுΕ͹.'"ʹ΋ରԠͰ͖Δ༷ࢠʢະ௅ઓʣ "NB[PO
    $PHOJUP
    *EFOUJUZ
    4%,
20. "84
    $PHOJUPར༻ࣄྫʢ͜Ε͸3JPU
    41"ʣ IUUQTHPHFUTIJGUFSJP
21. ηοτΞοϓ import {CognitoUserPool} from ‘amazon-cognito-identity-js’ const UserPool = new CognitoUserPool({ 'ClientId': ClientId, 'UserPoolId': UserPoolId }) w OQN
    J
    ŠTBWF
    BNB[PODPHOJUPJEFOUJUZKT
    w JNQPSU΍SFRVJSFͰΑ΂Δ
    w $PHOJUPͷ*%৘ใΛΠϯελϯεʹ౉ͤ͹0,
22. Ϣʔβʔొ࿥αϯϓϧ IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKTVTBHF UserPool.signUp( 'email@mydomain.com', 'password', [], null, function(err, result) { if (err) { alert(err) return } cognitoUser = result.user console.log('user name is ' + cognitoUser.getUsername()) })
23. 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) } }) })
24. 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') })
25. 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 Ͱ Ϧ μΠ Ϩ Ϋ τ
26. ձһϖʔδ༻ͷ3PVUFλάΛ࡞ͬͯར༻ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSECMPC NBTUFSDMJFOUMBZPVUTQSJWBUF-BZPVUKT-- <Switch> {PrivateRoutes.map((route, index) => ( <PrivateRoute component={route.main} key={index} path={route.path} /> ))} </Switch>
27. 3FBDUͰͷαϯϓϧίʔυ΋͋Δ IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKTUSFFNBTUFSFYBNQMFTCBCFMXFCQBDL
28. w ձһొ࿥ͷΈͰϩάΠϯͳͲ͸Ͱ͖ͳ͍
    w ొ࿥ॲཧ݁Ռ͸DPOTPMFMPHͰग़Δ͚ͩ
    w σβΠϯ͸·ͬͨ͘͞Εͯͳ͍
    w ෦඼औΓతͳཱͪҐஔʹͳΓͦ͏ 3FBDUͰͷαϯϓϧίʔυ΋͋Δ
29. IUUQTHJUIVCDPNBXTBNB[PO DPHOJUPJEFOUJUZKTUSFFNBTUFS FYBNQMFTCBCFMXFCQBDL ͘͢͝ૉͬؾͳ͍
30. w 3FBDU
    3PVUFSͷαϯϓϧίʔυ͸ཁΧελϜ
    w 1SPNJTF΍DBMMCBDLͷ݁ՌΛ࢖͑ͳ͔ͬͨ
    w ެ։ɾձһϖʔδͷ෼͚ํͳͲ͸ࢀߟʹͳΔ
    w ϝοηʔδ΍ϑΥʔϜ͸4FNBOUJD
    6*͞·͞· ࣮૷࣌ʹਏ͔ͬͨ఺
31. w 3FBDU
    3PVUFS
    WΈΜͳهࣄॻ͜͏ͥ
    w  
    ."6·Ͱແྉ͔ͩΒ$PHOJUP͍͍Α
    w "1*
    (BUFXBZΛ͔ͭ͑͹ձһݶఆ"1*΋ͭ͘ΕΔ
    w ͜Ε͔Βຊ֨తʹϓϩδΣΫτಋೖ༧ఆ ͦͷ΄͔
32. IUUQTXQLZPUPOFUKBXTVHLZPUP TFSWFSMFTTDPHOJUPIBOETPO +"846(Ͱ
    ϋϯζΦϯ΍ͬͨ
33. αϯϓϧίʔυ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSE
34. l z BOZ
    RVFTUJPO