Vue 12 EC2에서 Vue 배포하기

Nginx 웹서버를 통해 Vue를 배포하는 방법에 대해 간단하게 소개하려고 합니다.

EC2 인스턴스발급은 생략하겠습니다. 오로지 우분투 내에서 vue와 nginx 세팅에 대해서만 언급하겠습니다.

개발을 하고 있을 때 배포한다면?

// vue.config.js
module.exports = {
  configureWebpack: {
    
  },
    devServer: {
    host: "0.0.0.0",
    hot: true,
    disableHostCheck: true
  },
};

Nginx 세팅

$ sudo apt-get install nginx
$ nginx -v  #잘 설치되었는 지 버전 확인
$ sudo vim /etc/nginx/sites-enabled/default #nginx 세팅하기

$cd frontend
$npm run build

server{
	listen 80; # 80번포트로 실행하겠습니당 
    listen [::]:80;
    
    server_name [도메인 주소]
    
    root /home/ubuntu/.../frontend/dist;  #[프론트엔드 build해서 만들어진 dist폴더]
    index index.html;
    
    # 기본주소는 프론트엔드 index.html로 이동한다라고 선언
    location / { 
    try_files $uri $uri/ index.html
}

참고

장고 api 서버 배포하기