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
PRO
April 27, 2017
Technology
2
850
React + AWSで 会員系SPAを作ってみた話
React kyoto vol.1資料
Hidetaka Okamoto
PRO
April 27, 2017
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
OpenAI APIで API Changelogを要約してみた話 / chatgpt-osaka-1
hideokamoto
PRO
0
360
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
PRO
0
45
Shopify / Stripeで 静的サイトでも オンライン決済・物販をはじめよう / shifter-meetu-feb-2022
hideokamoto
PRO
0
680
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
PRO
0
200
Stripeでの オンライン決済理解した - エンジニア達の「〇〇完全に理解した」Talk #25
hideokamoto
PRO
0
600
Jamstack開発者のための App Runner入門
hideokamoto
PRO
1
360
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
PRO
0
350
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
PRO
2
3.8k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
PRO
1
150
Other Decks in Technology
See All in Technology
2024-04-06 AMeDAS to Lagoon SORACOM UG 2024-04-06
anysonica
0
120
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
60
17k
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
オーナーシップを持つ領域を明確にする
konifar
9
1.6k
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
0
380
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
9
2.1k
Four keys改善の取り組み事例紹介
sansantech
PRO
2
230
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
190
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
510
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
360
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
16k
Into the Great Unknown - MozCon
thekraken
10
980
Raft: Consensus for Rubyists
vanstee
131
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Designing for humans not robots
tammielis
247
25k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Web Components: a chance to create the future
zenorocha
304
41k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
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