Vue.js프로젝트 프론트 배포 환경으로 변환

 

로컬에서 npm run serve로 시작할 때에는 .env.development의 값이 적용되고
실제 build를 통해 프로젝트를 빌드하면 .env.production의 값이 자동으로 적용됩니다.
그리고 이 두 파일은 github에 올리시면 안됩니다.  중요한 환경변수 값들이 들어있기 때문이죠
 .gitignore로 등록해둘 것대신 .example을 따로 만들어서 환경변수 값을 지우고 올릴 것입니다. .example은 git에 등록해도 됩니다

 

.env.development에는

VUE_APP_BASE_URL=http://localhost:port번호

 

.env.production에는

# VUE_APP_BASE_URL=http://AWS DNS 주소:8888

# VUE_APP_BASE_URL=http://IP주소:8888
VUE_APP_BASE_URL=https://fourman.shop:8888

 

아래의 4개 파일은 루트폴더에 넣는다(src폴더 내부가 아님)

스프링서버의 컨테이너이름을 넣어도 되나? 모르겠

 

 

그리고 이 환경변수 값들을 불러와서 전처리해주는 파일을 하나 만들것입니다.

env.js로 만들었습니다. (이 파일은 src폴더 내부에 넣는다)

 

 

이 방법의 장점은 local에서 실행할 때에는 .env.development의 URL 값을, 배포 했을 때에는

 .env.production의 URL 값을 가진다는 것입니다.

이제 일일이 URL을 바꿔줘야할 필요가 없겟죠

 

--------------------------------------------------------------------

배포하기위한 파일

frontend라는 폴더에

docker-compose.yml파일 생성(nginx 이미지 생성)

conf폴더생성( dev.conf 이름으로 파일을 만들어서 Nginx설정 내용을 입력해준다)

html폴더생성(npm run build하여 얻은 dist폴더를 이 안으로 넣는다)

 

그후ㅠ

sudo docker-compose up -d 실행