Vue 빌드 파일 Nginx에 연결하기 npm vue build

Vue에서 프론트 개발이 완료하고 서버에 배포한다.

순서 npm run bulid 로 dist 폴더 생성 => nginx로 연결하여 배포 

 

개발버전처럼 npm run serve가 아니라  npm run bulid를 실행하면 dist라는 빌드한 폴더가 생성된다.

dist 폴더를 sftp로 넘겨도 되고 git으로 넘겨도 된다. 보내는건 자유이다. 

 

여기선 서버에서 git으로 받기로하겠다

먼저 cd /var/www 로 이동을 한다.

 

git으로 클론을하고

npm i 하고

npm run build를 한다

그럼 폴더에 dist라는 폴더가 생성된다. 그럼 경로가 /var/www/깃 폴더이름/dist 형태이다  

mv dist .. 해서 뺴도 되고 거기서 그대로 사용해도된다

 

그 후 

cd /etc/nginx/sites-available/ 로 이동하여 

사용하는 서버블록를 vi모드로 켜서

 

server {

  root /var/www/ARgameFront/dist;  

  index index.html;

 

 location /{
        if ($allowed_country = no) {
           return 403;
        }

        try_files $uri $uri/ /index.html;

        }

}

 

값을 넣은 후 저장하고 나와준다.

 

여기서 이건 해외 서버를 차단하는 부분이다

if ($allowed_country = no) { 
           return 403; 
}

참고:  crispypotato.tistory.com/47?category=964498

 

 

마지막으로

sudo service nginx restart 

nginx를 재시작 하면 연결 완료.