Node.jsã§éçºãããŠãããšãå¿
ãç»å Žããã®ãprocess.envã§ãã
process.envã¯ã¢ããªã±ãŒã·ã§ã³ã®äžã§ãã¹ã¯ãŒããAPIããŒãªã©ã®æ©å¯æ
å ±ãæ±ã£ãããéçºç°å¢ãšæ¬çªç°å¢ã§æåãåãæ¿ããããããšãã«å©çšãããŸãã
ãã ãããªããšãªã䜿ã£ãŠãããã©ä»çµã¿ã¯ããåãã£ãŠããªãâŠããšããæ¹ãå€ãã®ã§ã¯ãªãã§ãããããç§èªèº«ãæåã¯process.envãæŒ ç¶ãšäœ¿ã£ãŠããŸãããã調ã¹ãŠãããã¡ã«ç°å¢å€æ°ã®æ£äœãéçºç°å¢ãšæ¬çªç°å¢ã®åãæ¿ãæ¹æ³ãçè§£ã§ããããã«ãªããŸããã
ããã«ãReactãšãã£ãããã³ããšã³ãã®ãã¬ãŒã ã¯ãŒã¯ã§ã¯process.envã«ç¹æã®ã«ãŒã«ïŒäŸ: REACT_APP_ãã¬ãã£ãã¯ã¹ãå¿
èŠïŒãããããããæŒãããŠãããšç°å¢ããšã®åãæ¿ãããããã°ããã£ãšã¹ã ãŒãºã«ãªããŸãã
ãã®èšäºã§ã¯ããç°å¢å€æ°ãšprocess.envãã«ã€ããŠã以äžã®å 容ããµã³ãã«ã³ãŒããçšããŠããããããã解説ããŸãã
- ãããããç°å¢å€æ°ããšã¯ïŒ
- çŸåšã®ç°å¢å€æ°ã®äžèЧã確èªããã³ãã³ãïŒWindowsïŒ
- ã³ãã³ãããã³ããïŒcmdïŒã®å Žå
- PowerShellã®å Žå
- çŸåšã®ç°å¢å€æ°ã®äžèЧã確èªããã³ãã³ãïŒMacãLinuxïŒ
envã³ãã³ãprintenvã³ãã³ãexportã³ãã³ãïŒbashç³»ã·ã§ã«ïŒ
- çŸåšã®ç°å¢å€æ°ã®äžèЧã確èªããã³ãã³ãïŒWindowsïŒ
process.envãšã¯ïŒprocess.envã®ç¹åŸŽprocess.envã®äž»ãªçšé
process.envã®äœ¿ãæ¹- ç°å¢å€æ°ãäžèŠ§è¡šç€ºãã
- ç¹å®ã®ç°å¢å€æ°ãåç §ãã
- å®è¡æã«ç°å¢å€æ°ãèšå®ãã
- äºåã«ç°å¢å€æ°ãèšå®ãã
process.env.NODE_ENVãšã¯ïŒprocess.env.NODE_ENVã®èªåèšå®
- Reactã§ã®ç°å¢å€æ°ã®ã«ãŒã«
ãããããç°å¢å€æ°ããšã¯ïŒ
ç°å¢å€æ°ïŒenvironment variableïŒã¯ãOSïŒãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ïŒãæäŸããããã»ã¹éã§å ±æã§ããèšå®æ å ±ã§ãã
OSäžã§åäœããããã°ã©ã ïŒããã»ã¹ïŒã¯ããã®ç°å¢å€æ°ãéããŠå ±éã®æ å ±ãåç §ã§ããŸããèšãæãããšãã·ã¹ãã ãã¢ããªã±ãŒã·ã§ã³ãåäœããéã«åç §ããã°ããŒãã«å€æ°ã®ãããªãã®ã§ãã
ããšãã°ä»¥äžã®ãããªæ å ±ãç°å¢å€æ°ãšããŠä¿åãããŠããŸãã
- çŸåšã®ãŠãŒã¶ãŒå
- ã·ã¹ãã ãå©çšããäžæãã¡ã€ã«ã®ä¿åå
- å®è¡äžã®ããã°ã©ã ã«æž¡ãèšå®å€ïŒäŸïŒ
NODE_ENV=productionïŒ
çŸåšã®ç°å¢å€æ°ã®äžèЧã確èªããã³ãã³ãïŒWindowsïŒ
Windowsã§ãç°å¢å€æ°ãç°¡åã«ç¢ºèªããããšãã§ããŸããããã§ã¯ã³ãã³ãããã³ããïŒcmdïŒãšPowerShellã®2çš®é¡ã®æ¹æ³ã玹ä»ããŸãã
ã³ãã³ãããã³ããïŒcmdïŒã®å Žå
ã³ãã³ãããã³ããïŒcmdïŒã®å Žåã以äžã®ã³ãã³ããå®è¡ããŸãã
setå®è¡ãããšã以äžã«ç€ºãããã«çŸåšã®ç°å¢å€æ°ã®äžèЧã衚瀺ãããŸãïŒä»¥äžã®å®è¡çµæã§ã¯äžéšã ãæç²ããŠããŸãïŒã
C:\Users\user01>set
ALLUSERSPROFILE=C:\ProgramData
APPDATA=C:\Users\Taro\AppData\Roaming
CommonProgramFiles=C:\Program Files\Common Files
USERNAME=user01
USERPROFILE=C:\Users\user01PowerShellã®å Žå
PowerShellã®å Žåãç°å¢å€æ°ã¯Env:ãã©ã€ããéããŠç®¡çãããŠããããã以äžã®ã³ãã³ãã§äžèЧãååŸã§ããŸãã
Get-ChildItem Env:å®è¡ãããšã以äžã«ç€ºãããã«çŸåšã®ç°å¢å€æ°ã®äžèЧã衚瀺ãããŸãïŒä»¥äžã®å®è¡çµæã§ã¯äžéšã ãæç²ããŠããŸãïŒã
PS C:\Users\user01> Get-ChildItem Env:
Name Value
---- -----
ALLUSERSPROFILE C:\ProgramData
APPDATA C:\Users\Taro\AppData\Roaming
CommonProgramFiles C:\Program Files\Common Files
USERNAME user01
USERPROFILE C:\Users\user01PowerShellã®æ¹ããååããšãå€ããåã§åãããŠè¡šç€ºãããã®ã§ãã³ãã³ãããã³ããïŒcmdïŒããèŠãããã§ãã
çŸåšã®ç°å¢å€æ°ã®äžèЧã確èªããã³ãã³ãïŒMacãLinuxïŒ
MacãLinuxã§ããã¿ãŒããã«ããç°¡åã«ç°å¢å€æ°ã確èªã§ããŸããããã§ã¯ä»£è¡šçãªã³ãã³ãã玹ä»ããŸãã
envã³ãã³ã
ãã£ãšãäžè¬çãªã®ã¯ã以äžã®ã³ãã³ãã§ãã
envå®è¡ãããšã以äžã«ç€ºãããã«çŸåšã®ç°å¢å€æ°ã®äžèЧã衚瀺ãããŸãïŒä»¥äžã®å®è¡çµæã§ã¯äžéšã ãæç²ããŠããŸãïŒã
user01@Ubuntu:~/work$ env
SHELL=/bin/bash
HOME=/home/user01
LANG=C.UTF-8
USER=user01printenvã³ãã³ã
envã³ãã³ããšã»ãŒåãçµæãè¿ãã³ãã³ãã«printenvããããŸãã
printenvå®è¡ãããšã以äžã«ç€ºãããã«çŸåšã®ç°å¢å€æ°ã®äžèЧã衚瀺ãããŸãïŒä»¥äžã®å®è¡çµæã§ã¯äžéšã ãæç²ããŠããŸãïŒã
user01@Ubuntu:~/work$ printenv
SHELL=/bin/bash
HOME=/home/user01
LANG=C.UTF-8
USER=user01ç¹å®ã®ç°å¢å€æ°ã ã確èªãããå Žåã¯ã以äžã«ç€ºãããã«å€æ°åãæå®ããŸãã
user01@Ubuntu:~/work$ printenv HOME
/home/user01exportã³ãã³ãïŒbashç³»ã·ã§ã«ïŒ
bashãzshãªã©ãå©çšããŠããå Žåã以äžã®ããã«å ¥åããŠã確èªã§ããŸãã
exportçŸåšã®ç°å¢å€æ°ã®äžèЧã衚瀺ãããŸããããã©ãŒããããdeclare -xã®åœ¢ã§åºåãããã®ãç¹åŸŽã§ãã
user01@Ubuntu:~/work$ export
declare -x HOME="/home/user01"
declare -x LANG="C.UTF-8"
declare -x SHELL="/bin/bash"
declare -x USER="user01"process.envãšã¯ïŒ
ç°å¢å€æ°ã¯OSã¬ãã«ã§ç®¡çãããŠããŸãããNode.jsã¢ããªã±ãŒã·ã§ã³ãããç°¡åã«ç¢ºèªããããšãã§ããŸãããã®ããã«äœ¿ãã®ãprocess.envãšãããªããžã§ã¯ãã§ãã
process.envã¯ãNode.jsãæäŸããŠããç°å¢å€æ°ãæ ŒçŽããç¹å¥ãªãªããžã§ã¯ãã§ããNode.jsã¢ããªã±ãŒã·ã§ã³ãèµ·åãããšãOSã«å®çŸ©ãããŠããç°å¢å€æ°ãèªåçã«ãã®ãªããžã§ã¯ãã«èªã¿èŸŒãŸããã¢ããªã±ãŒã·ã§ã³ããåç
§ã§ããããã«ãªããŸãã
process.envã®ç¹åŸŽ
- ã°ããŒãã«ã«å©çšå¯èœ
process.envã¯ã©ã®ãã¡ã€ã«ããã§ãåç §å¯èœã§ãç¹å¥ãªã€ã³ããŒãã¯äžèŠã§ãã
- ããŒãšå€ã®ãã¢ã§ç®¡ç
process.envã¯éåžžã®JavaScriptãªããžã§ã¯ãã®ããã«ãããŒïŒå€æ°åïŒã§ã¢ã¯ã»ã¹ã§ããŸãã
- å€ã¯ãã¹ãŠæåå
- æ°å€ãçåœå€ãèšå®ããŠããåãåºããšãã¯å¿ ãæååã«ãªããŸãã
- ããã»ã¹èµ·åæã«èªã¿åããã
- OSåŽã®å€ãåŸããå€ããŠããæ¢ã«åããŠããããã»ã¹ã®
process.envã¯èªåæŽæ°ãããŸããã
- OSåŽã®å€ãåŸããå€ããŠããæ¢ã«åããŠããããã»ã¹ã®
process.envã®äž»ãªçšé
- ç°å¢ããšã®æåãåãæ¿ãã
NODE_ENV=productionã®ãšãã¯ãã°ãæå¶ããNODE_ENV=developmentã®ãšãã¯è©³çްãã°ãåºããšãã颚ã«ç°å¢ããšã«æåãåãæ¿ããéã«äœ¿ããŸãã
- æ©å¯æ
å ±ãå®å
šã«ç®¡çãã
- APIããŒãããŒã¿ããŒã¹æ¥ç¶æååããœãŒã¹ã³ãŒãã«çŽæžããããç°å¢å€æ°ããèªã¿èŸŒãéã«äœ¿ããŸãã
- ãã©ã°ãèšå®å€ãå€éšããæž¡ã
- å®è¡æã«
PORT=8080 node app.jsã®ããã«æž¡ããŠã¢ããªã®æåãå€ããéã«äœ¿ããŸãã
- å®è¡æã«
ã€ã¡ãŒãžçã«ã¯ãNode.jsã¢ããªã±ãŒã·ã§ã³ãšOSã®æ©æž¡ãããããªããžã§ã¯ããšèãããšããããããã§ãããã®ãªããžã§ã¯ãã«ããŒãšå€ãè©°ãŸã£ãŠããŠãã¢ããªã±ãŒã·ã§ã³ããå¿ èŠã«å¿ããŠåãåºããŠäœ¿ãããšãã§ããŸãã
process.envã®äœ¿ãæ¹
process.envãæŽ»çšããã°ãã¢ããªã±ãŒã·ã§ã³ãç°å¢ã«å¿ããŠæè»ã«åãæ¿ããããšãã§ããŸããããã§ã¯ãprocess.envã®äœ¿ãæ¹ã«ã€ããŠèª¬æããŸãã
ç°å¢å€æ°ãäžèŠ§è¡šç€ºãã
ãŸãã¯ã·ã³ãã«ãªäŸã§ããindex.jsãšãããã¡ã€ã«ãäœããæ¬¡ã®ã³ãŒããæžããŸãã
// index.js
console.log(process.env);ãã®ã¹ã¯ãªãããå®è¡ãããšãçŸåšã®ç°å¢å€æ°ããã¹ãŠãªããžã§ã¯ã圢åŒã§è¡šç€ºãããŸãã
$ node index.js
{
USER: 'user01',
HOME: '/home/user01',
SHELL: '/bin/bash',
LANG: 'C.UTF-8',
...
}ããã¯ãMacãLinuxã§envã³ãã³ããå®è¡ããçµæãWindowsã§setãGet-ChildItem Env:ãå®è¡ããçµæãšã»ãŒåãã§ãã
ç¹å®ã®ç°å¢å€æ°ãåç §ãã
ãã¹ãŠã®äžèЧã衚瀺ããã®ã§ã¯ãªããç¹å®ã®ç°å¢å€æ°ãåç §ãããå Žåã¯ããããã£åãæå®ããŸãã
// index.js
console.log(process.env.USER); // ãŠãŒã¶ãŒå
console.log(process.env.HOME); // HOMEã®å
容è£è¶³
- ååšããªãããããã£åãæå®ãããš
undefinedãè¿ããŸãã process.envã®å€ã¯ãã¹ãŠæåååïŒstringïŒãšããŠæ±ãããŸãã- äŸïŒ
process.env.DEBUGã¯trueã§ã¯ãªã"true"ãšããŠè¿ã£ãŠããŸãã
- äŸïŒ
å®è¡æã«ç°å¢å€æ°ãèšå®ãã
Node.jsã¢ããªã±ãŒã·ã§ã³ãèµ·åãããšããã³ãã³ãã®åã«ç°å¢å€æ°ãæå®ããããšã§ããã®å®è¡äžã ãæå¹ãªç°å¢å€æ°ããèšå®ã§ããŸãã
ãã ãã䜿ãã·ã§ã«ïŒbash / ã³ãã³ãããã³ãã / PowerShellïŒã«ãã£ãŠæžãæ¹ãéãã®ã§æ³šæããŠãã ããã
Linux / macOSïŒbash, zshãªã©ïŒã®å Žå
PORT=3000 NODE_ENV=development node index.jsãã®ããã«ãå®è¡ã³ãã³ãã®åã«å€æ°ãä»ããããšã§ãå®è¡äžã ãæå¹ãªç°å¢å€æ°ãèšå®ã§ããŸããäžèšã®ã³ãã³ãã§ã¯ãPORTãšNODE_ENVãäžæçã«èšå®ããŠããã®ãŸãŸnode index.jsãå®è¡ããŠããŸãã
ã³ãã³ãããã³ãã®å Žå
set PORT=3000 && set NODE_ENV=development && node index.jsã³ãã³ãããã³ãã®å Žåã«ã¯ãsetã§å€æ°ãå®çŸ©ãã&&ã§ã€ãªããŸãã
PowerShell
$env:PORT="3000"; $env:NODE_ENV="development"; node index.jsPowerShellã®å Žåã«ã¯ãsetã§ã¯ãªã$env:ãã¬ãã£ãã¯ã¹ã䜿ããŸãã
äºåã«ç°å¢å€æ°ãèšå®ãã
äžæçã«ã³ãã³ããšäžç·ã«æžãã®ã§ã¯ãªãããããããèšå®ããŠããå®è¡ããããšãã§ããŸãã
ãã ãã䜿ãã·ã§ã«ïŒbash / ã³ãã³ãããã³ãã / PowerShellïŒã«ãã£ãŠæžãæ¹ãéãã®ã§æ³šæããŠãã ããã
Linux / macOSïŒbash, zshãªã©ïŒã®å Žå
$ export PORT=3000
$ node index.jsexportã§èšå®ããç°å¢å€æ°ã¯ããã®èšå®ã¯ã¿ãŒããã«ãéãããŸã§æå¹ã§ãã
ã³ãã³ãããã³ãã®å Žå
C:\Users\user01>set PORT=5000
C:\Users\user01>node index.jsã³ãã³ãããã³ãã®å Žåã«ã¯ãsetã³ãã³ãã§ç°å¢å€æ°ãèšå®ããŸãããã®èšå®ã¯ã¿ãŒããã«ãéãããŸã§æå¹ã§ãã
PowerShell
PS C:\Users\user01> $env:PORT=5000
PS C:\Users\user01> node index.jsPowerShellã®å Žåã«ã¯ã$env:ã䜿ããŸãããã®èšå®ã¯ã¿ãŒããã«ãéãããŸã§æå¹ã§ãã
process.env.NODE_ENVãšã¯ïŒ
process.env.NODE_ENVã¯ãNode.jsãããã³ããšã³ãã®ãã«ãããŒã«ãªã©ã§ã¢ããªã±ãŒã·ã§ã³ã®å®è¡ç°å¢ãå€å®ããããã®ç¹å¥ãªç°å¢å€æ°ã§ããäžè¬çã«ã¯ä»¥äžã®3ã€ã®å€ã§äœ¿ãåããããŸãã
- developmentïŒéçºç°å¢ïŒ
- ããŒã«ã«ã§ã®éçºæã«å©çšã詳现ãªãã°ãåºåããããããããªããŒããæå¹ã«ãããããã
- testïŒãã¹ãç°å¢ïŒ
- èªåãã¹ããå®è¡ãããšãã«å©çšããã¹ãå°çšã®èšå®ãã¢ãã¯ã䜿ãããšãå€ãã
- productionïŒæ¬çªç°å¢ïŒ
- å ¬éããã¢ããªã±ãŒã·ã§ã³ã®å®è¡ç°å¢ãäžèŠãªãã°ãåé€ããããæé©åãæå¹ã«ããã
äŸãã°æ¬¡ã®ããã«ã³ãŒããæžãããšããŸãã
if (process.env.NODE_ENV === "development") {
console.log("ãããã°ãã°: ã¢ããªãéçºã¢ãŒãã§èµ·åããŸãã");
}
ããŒã«ã«éçºç°å¢ã§NODE_ENV=developmentãæå®ããŠå®è¡ãããšãã°ã衚瀺ãããŸãããæ¬çªç°å¢ã§NODE_ENV=productionã«èšå®ããŠå®è¡ããã°ãã°ã¯åºåãããŸããã
process.env.NODE_ENVã®åœ¹å²
- ç°å¢ããšã®èšå®åãæ¿ã
- äŸ: éçºã§ã¯ãã¹ãçšDBã䜿ããæ¬çªã§ã¯æ¬çªDBã䜿ã
- äžèŠãªåŠçã®åæž
- æ¬çªç°å¢ã§ã¯ãããã°ãã°ãéçºçšã®ããŒã«ãåãããªã
- ãã«ãæé©å
- ããã³ããšã³ãã§ã¯
productionã®ãšãã«ã³ãŒããå§çž®ã»æé©åãã
- ããã³ããšã³ãã§ã¯
process.env.NODE_ENVã®èªåèšå®
process.env.NODE_ENVã¯ãéçºè
ãæåã§æå®ããã ãã§ãªããããŒã«ããã¬ãŒã ã¯ãŒã¯ãèªåçã«èšå®ããŠãããå ŽåããããŸããç¹ã«ReactïŒCreate React AppïŒããã«ãããŒã«ïŒWebpackãViteãªã©ïŒã§ã¯ããã®èªåèšå®ã倧ããªåœ¹å²ãæãããŸãã
create-react-appã䜿ã£ãŠçæããããããžã§ã¯ãã§ã¯ãpackage.jsonã«æ¬¡ã®ãããªã¹ã¯ãªãããå®çŸ©ãããŠããŸãã
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}ããããå®è¡ãããšãèªåçã«process.env.NODE_ENVã®å€ãåãæ¿ãããŸãã
| ã³ãã³ã | èªåçã«èšå®ãããprocess.env.NODE_ENVã®å€ |
|---|---|
npm start / yarn start | development |
npm run build / yarn build | production |
npm test / yarn test | test |
Reactã§ã®ç°å¢å€æ°ã®ã«ãŒã«
ReactïŒç¹ã« Create React App ã䜿ãå ŽåïŒã§ã¯ãNode.jsã®process.envããã®ãŸãŸäœ¿ããããã§ã¯ãããŸãããã»ãã¥ãªãã£ãšéçšäžã®çç±ãããç¹å®ã®ã«ãŒã«ãèšããããŠããŸãã
Reactã¢ããªã§ã¯ãç°å¢å€æ°ãåç
§ããããã«REACT_APP_ãšãããã¬ãã£ãã¯ã¹ãå¿
èŠã§ãããã®ãã¬ãã£ãã¯ã¹ãä»ããŠããªãç°å¢å€æ°ã¯ãã¢ããªã±ãŒã·ã§ã³å
ããåç
§ã§ããŸããã
äŸãã°ãç°å¢å€æ°ãæå®ããŠå®è¡ããå Žåã«ã¯ã以äžã®ããã«ããŸãã
REACT_APP_MODE=staging npm startã¢ããªã±ãŒã·ã§ã³ã§åç
§ããéã«ãREACT_APP_ãä»ããŸãã
const mode = process.env.REACT_APP_MODE;
console.log(mode); // stagingMODEã®ããã«REACT_APP_ãä»ããªãã£ãå Žåã¯undefinedã«ãªããŸãã
MODE=staging npm startå®è¡çµæã以äžã«ç€ºããŸãã
const mode = process.env.MODE;
console.log(mode); // undefinedãã®ããã«ãReactã§ã¯å¿
ãREACT_APP_ãä»ããç°å¢å€æ°ã ããåç
§å¯èœã§ãã
package.jsonã®ã¹ã¯ãªããã§ç°å¢å€æ°ã工倫ããæ¹æ³
Reactã§ã¯REACT_APP_ãã¬ãã£ãã¯ã¹ãå¿
èŠã§ãããæ¯åæã§æžãã®ã¯é¢åã§ããããã§package.jsonã®scriptsã«ãŸãšããŠå®çŸ©ããŠãããšäŸ¿å©ã§ãã
"scripts": {
"start": "REACT_APP_MODE=$MODE react-scripts start",
"build": "REACT_APP_MODE=$MODE react-scripts build"
}ããããŠããã°ã以äžã®ããã«å®è¡ã§ããŸãã
# ã¹ããŒãžã³ã°ç°å¢
MODE=development npm startã¢ããªããã¯æ¬¡ã®ããã«åç §ã§ããŸãã
console.log(process.env.REACT_APP_MODE); // developmentç°å¢ã決ãŸã£ãŠããå Žåã¯ããã®ãŸãŸscriptsã«æžããŠããŸã£ãŠãOKã§ãã
"scripts": {
"start": "REACT_APP_MODE=development react-scripts start",
"build": "REACT_APP_MODE=production react-scripts build",
"build:dev": "REACT_APP_MODE=development react-scripts build"
}ã¢ããªããã¯æ¬¡ã®ããã«åç §ã§ããŸãã
console.log(process.env.REACT_APP_MODE); // developmentæ¬èšäºã®ãŸãšã
ãã®èšäºã§ã¯ãç°å¢å€æ°ãšprocess.envãã«ã€ããŠèª¬æããŸããã
process.envãçè§£ããŠäœ¿ãããªãã°ãã¢ããªã±ãŒã·ã§ã³ãæè»ã«ç°å¢ããšã«åãæ¿ããããšãã§ããŸãã
- å€ã¯ãã¹ãŠæååãšããŠæ±ããã
- ããã»ã¹èµ·åæã«èªã¿èŸŒãŸãããããåŸãã倿ŽããŠãèªåæŽæ°ãããªã
NODE_ENVãPORTã®ãããªå€ã§ãæåãæ¥ç¶å ãåãæ¿ããã®ã«æé©
ãšãã£ãç¹åŸŽãæŒãããŠããã°ãããå®å šã§ã¡ã³ãããã«ãªã³ãŒããæžããŸãã
ãèªã¿é ãããããšãããããŸããã