ν™˜κ²½ λ³€μˆ˜ νŒŒμΌμ„ μ΄μš©ν•œ μ˜΅μ…˜ μ„€μ •

ν™˜κ²½ λ³€μˆ˜ νŒŒμΌμ΄λž€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ 싀행될 λ•Œ νŠΉμ • 값을 λ„˜κΈΈ 수 μžˆλŠ” λ³€μˆ˜λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜ κ΄€μ μ—μ„œλŠ” .env νŒŒμΌμ— μ •μ˜λœ λ³€μˆ˜λ₯Ό μ˜λ―Έν•˜λ©° 미리 μ •μ˜λœ 값을 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ ν™œμš©ν•˜κ³  싢을 λ•Œ μ‚¬μš©ν•©λ‹ˆλ‹€.

이번 μ±•ν„°μ—μ„œλŠ” Vue.js μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ .env νŒŒμΌμ„ ν™œμš©ν•˜λŠ” 방법에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

env 파일

CLI둜 μƒμ„±ν•œ ν”„λ‘œμ νŠΈλ‘œ 개발 및 배포λ₯Ό 진행할 λ•Œ .envλΌλŠ” ν™˜κ²½ λ³€μˆ˜ 파일둜 μ˜΅μ…˜λ“€μ„ νŽΈν•˜κ²Œ λ°”κΏ€ 수 μžˆμŠ΅λ‹ˆλ‹€.

# .env 파일
VUE_APP_LOCAL_URI=http://localhost:8080/
VUE_APP_TEST_SERVER=http://test.com:9090/

clientId=client-test1234
clientServer=server-test1234

μœ„μ—μ„œ μ„€μ •ν•œ λ³€μˆ˜λ“€μ„ 가지고 μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λ‘œμ§μ— ν™œμš©ν• μˆ˜λ„ 있고, μ›ΉνŒ©μœΌλ‘œ λΉŒλ“œλ₯Ό ν•  λ•Œ μœ„ λ³€μˆ˜μ˜ λ‚΄μš©μ„ λ°˜μ˜ν• μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄ μ•„λž˜μ™€ 같이 API의 호좜 URL κ°’μœΌλ‘œ .env νŒŒμΌμ— μ •μ˜ν•œ VUE_APP_LOCAL_URIλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

// api/index.js
function fetchUser() {
  return axios.get(`${VUE_APP_LOCAL_URI}users`);
}

μœ„μ™€ 같이 μ„œλΉ„μŠ€ μ½”λ“œμ—μ„œ .env νŒŒμΌμ— μ§€μ •ν•œ λ³€μˆ˜λ₯Ό ν™œμš©ν•˜λ €λ©΄ μ•„λž˜μ™€ 같이 μ›ΉνŒ©μ— μΆ”κ°€ 섀정을 ν•΄μ€˜μ•Ό ν•©λ‹ˆλ‹€.

// webpack.config.js
const webpack = require('webpack');
const dotenv = require('dotenv');
const env = dotenv.config().parsed;

plugins: [
  new webpack.DefinePlugin({
    VUE_APP_LOCAL_URI: JSON.stringify(env.VUE_APP_LOCAL_URI),
  }),
],

Vue CLI 3.x λ²„μ „μ˜ ν™˜κ²½ λ³€μˆ˜ 파일 μ ‘κ·Ό

μ΅œμ‹  λ·° CLIμ—μ„œλŠ” μœ„μ™€ 같이 μ›ΉνŒ©μ˜ DefinePlugin을 μ„€μ •ν•˜μ§€ μ•Šμ•„λ„ ν™˜κ²½ λ³€μˆ˜λ₯Ό μ‰½κ²Œ μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€. ν™˜κ²½ λ³€μˆ˜ 파일의 λ³€μˆ˜ λͺ…을 μ•„λž˜μ™€ 같은 λ°©μ‹μœΌλ‘œ μ •μ˜ν•˜λ©΄ λ©λ‹ˆλ‹€.

VUE_APP_NUM=10
VUE_APP_STR=hi

λ³€μˆ˜ λͺ… μ•žμ— 항상 VUE_APP_ λ₯Ό λΆ™μ—¬μ£Όλ©΄ Vue CLIμ—μ„œ λ‚΄λΆ€μ μœΌλ‘œ μ›ΉνŒ© DefinePlugin을 ν™œμš©ν•˜μ—¬ ν΄λΌμ΄μ–ΈνŠΈ μ›Ή μžμ›μ—μ„œ μ ‘κ·Όν•  수 있게 μ„€μ •λ©λ‹ˆλ‹€.

// main.js
import Vue from 'vue';
// ...

console.log(VUE_APP_NUM); // 10

new Vue({
  // ...
})
<!-- App.vue -->
<template>
  <!-- ... -->
</template>

<script>
export default {
  created() {
    console.log(VUE_APP_STR); // hi
  }
}
</script>

이와 같은 λ°©μ‹μœΌλ‘œ μ•„λž˜μ˜ ν™˜κ²½ λ³€μˆ˜λ“€λ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

  • NODE_ENV : μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λͺ¨λ“œλ₯Ό κ°€λ¦¬ν‚€λŠ” λ³€μˆ˜ development, production, test
  • BASE_URL : vue.config.js νŒŒμΌμ— μ •μ˜λœ publicPath의 κ°’κ³Ό λ™μΌν•œ λ³€μˆ˜