Vue 환경 설정

1. 배경

백엔드 서버의 주소가 로컬 개발환경과 실서버 환경이 서로 다름

• 로컬 - http://localhost
• 실서버 - http://my-blog-domain.kr

TXT
개발중에는 localhost를 사용하지만
실서버에 배포했을때는 도메인이나 ip를 사용해야함

현재 vue blog 구현을 보면 아래와 같이 로컬 개발환경의 백엔드 주소가 촘촘히 박혀있음.

LoginForm.vue

JAVASCRIPT
  .post("http://localhost/api/login", ... )

PhotoView.vue

JAVASCRIPT
  getImage() {
    if (this.post.upFiles.length > 0) {
      return `http://localhost/upfile/...`;
    }
    ...
  }

serc/service/api/index.html

JAVASCRIPT
axios.defaults.baseURL = "http://localhost";

PostDetail.vue

HTML
<UpfileList
  :getImagePath="(file) => `http://localhost/upfile/${file.genName}`"
/>

로컬에서 테스트, 및 개발중에는 localhost로 요청을 보내야 하고, 실서버에 배포할때는 구입한 도메인이나 실제 ip주소로 작동해야함

이를 위해서 맥락에 따라서 다른 값들을 적용해야할때 환경설정파일이라는 것을 만들어서 갈아끼우는 식으로 구조를 변경합니다.

2. .env 파일

리눅스 계열에서 앞에 쩜(.)이 붙은 파일은 숨겨진 파일 로 처리됩니다.

TXT
.env
.env.development
.env.production
.nvm

• 물론 윈도우에서는 일반 파일처럼 다 보임.
• 리눅스나 맥에서는 일반적인 명령어로 디렉토리를 조회하면(ls 명령어) 이러한 파일들은 나타나지 않음.

vue에서도 이러한 관행에 따라서 환경 설정 파일을 아래와 같이 생성해서 로컬 테스트 환경과 실제 배포시에 다른 파일을 사용하도록 작동합니다.

TXT
.env.development - 로컬에서 테스트할때(npm run serve 실행 시)
.env.production - 실서버 배포용 산출물을 뽑아낼때(npm run build 실행시)

파일은 아래와 같이 생성합니다.

TXT
[BLUGVUE]
 +- public
 +- src
 +- ...
 +- .env.development  (+)
 +- .env.production   (+)
 +- ...
 +- package.json

• src 폴더, package.json 파일과 나란히

새로운 파일에 다음과 같이 내용을 작성합니다.

.env.development

TXT
VUE_APP_MODE=DEV
VUE_APP_BACKEND_HOST=http://localhost

• 백엔드 서버의 포트가 8899이면 http://localhost:8899와 같이 값을 지정해줌

.env.production

TXT
VUE_APP_MODE=PRODUCTION
VUE_APP_BACKEND_HOST=http://blog-demo.kr

• 도메인 위치에 서버의 IP주소를 넣어도 됨(http://220.11.32.123 처럼)

vue에서 환경 설정 변수를 정의할때 규칙이 있습니다.

TXT
반드시 [VUE_APP_] 으로 시작해야함

위에서 간단히 두개의 환경 변수를 설정했는데, VUE_APP_MODE는 현재 개발 환경을 식별하기 위해서 정의했습니다(애플리케이션 기능과 무관)

VUE_APP_BACKEND_HOST 값이 vue에서 백엔드로 요청을 보낼때 사용할 주소입니다.

3. 환경 변수 접근

http://localhost 들을 위에서 생성한 환경변수 파일에서 읽어들이기 전에 우선 다음과 같이 테스트해봅니다.

/src/main.js 파일을 열어서 간단하게 다음과 같이 입력해봄.

JAVASCRIPT
import ...

Vue.config.productionTip = false;

console.log("[ENV] MODE    : ", process.env.VUE_APP_MODE);
console.log("[ENV] BACKEND : ", process.env.VUE_APP_BACKEND_HOST);

new Vue({
  ....
}).$mount("#app");

• new Vue(...) 위에 console로 환경변수값을 출력해볼 예정

그리고 vscode에서 로컬 개발 서버를 실행합니다.

BASH
$ npm run serve

브라우저에서 개발자도구를 열고 블로그에 접속했을때 콘솔에 다음과 같이 출력되어야 합니다.

4. 코드에 적용

vscode 왼쪽 아이콘중에 search를 클릭

검색후 http://locahost가 등장하는 곳을 모두 아래와 같이 교체합니다.

src/service/api/index.js

파일 상단에 baseURL을 정의한 곳이 있는데

JAVASCRIPT
import axios from "axios";

axios.defaults.baseURL = "http://localhost";

axios.interceptors.request.use(...);

다음과 같이 process.env.VUE_APP_BACKEND_HOST로 교체합니다.

JAVASCRIPT
import axios from "axios";

axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST;

axios.interceptors.request.use(...);

• 위와같이 나머지 파일들도 모두 환경 변수 값으로 교체합니다.

개발 서버를 중지시키고 다시 실행합니다.

환경 변수값을 변경하면 개발 서버를 중지시키고 다시 실행해야 반영됩니다.

5. 개발 환경 확인

개발 환경에서 브라우저를 열고 접속하면 백엔드 서버로 보낸 요청이 잘 처리되야아 합니다.

6. 실서버 배포 환경

npm run build 명령어로 산출물을 뽑아낼때 자동으로 .env.production파일의 내용을 읽어서 처리하게 됩니다.

최종 산출물인 /dist 폴더의 파일들을 스프링 백엔드의 resources폴더로 옮긴 후 서버를 실행하면 콘솔 화면에 아래와 같이 .env.production 파일의 환경변수 값들이 출력되어야 합니다.

TXT
[ENV] MODE    :  PRODUCTION            app.c604d5db.js:1
[ENV] BACKEND :  http://blog-demo.kr   app.c604d5db.js:1

• npm run build로 뽑아낸 산출물을 백엔드 서버에 복사하면 도메인이나 포트 번호가 달라서 애플리케이션이 작동안할 수도 있습니다.
• 여기서는 위처럼 환경 변수가 올바로 반영되었는지만 확인합니다.