# ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ํŒŒ์ผ์„ ์ด์šฉํ•œ ์˜ต์…˜ ์„ค์ •

ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ํŒŒ์ผ์ด๋ž€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‹คํ–‰๋  ๋•Œ ํŠน์ • ๊ฐ’์„ ๋„˜๊ธธ ์ˆ˜ ์žˆ๋Š” ๋ณ€์ˆ˜๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ด€์ ์—์„œ๋Š” .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์˜ ๊ฐ’๊ณผ ๋™์ผํ•œ ๋ณ€์ˆ˜