[Vue] 웹서버 배포하기 1부 (Nginx 연동)

안녕하세요! 개발자 JAY입니다. 오늘은 Vue로 생성한 웹 프로젝트를 서버로 배포하는 방법에 대해서 알아보겠습니다.

 

1. 프로젝트 빌드(build) 하기

---

로컬에서 개발했을 때는 npm run serve로 프로세스를 실행시켜서 확인을 했는데요.

저는 서버에서 따로 프로세스(?)를 실행시키지 않고빌드 파일을 만들어서 배포할 예정입니다.

빌드 파일은 두 가지 방법으로 서버에 배포할 수 있는데, 로컬에서 빌드 파일을 만들어서 서버로 옮기거나 서버에서 직접 소스코드를  받아서 빌드하는 방식이 있습니다.

 

📌 로컬에서 빌드 파일 생성

첫번째로, 개발한 프로젝트의 빌드 파일을 아래 명령어로 생성합니다.

npm run build

이렇게 하면 dist라는 폴더로 배포 파일들이 만들어지게 됩니다.  (안에는 js, css, img 등이 있네요.)

 

dependancy 라이브러리 설치가 안되서 build 실패 나는 경우

(주의: 패키지에 라이브러리들이 별로 없으면 에러가 안 날 텐데 vuetify 같은거 사용할 경우 dependancy 에러가 날 수 있습니다. 이때는 npm install을 해주시면 됩니다.)

 

두 번째로, 이 빌드 파일을 서버로 옮깁니다.

(dist파일을 zip으로 압축한 뒤, sftp를 사용해 서버로 전송해 줍니다.)

 

sftp deploy@xxx.xxx.xxx
put dist.zip

 

이때 zip 파일을 /var/www/(본인이 원하는 디렉토리명) 경로로 이동해서 압축을 풀어줍니다.
/var/www/ 는 기본적으로 웹서버의 root 디렉터리(DocumentRoot? 정확한 건 잘 모르겠네요;ㅎㅎ)라고 합니다.)

 

📌 git clone으로 서버에서 직접 빌드 파일 만들기

 

sudo apt-get install git
sudo apt-get npm

 

/var/www/5boon/ 으로 이동해서

 

sudo git clone {{ 클론 할 프로젝트 }}
sudo npm run build     (package.json 이 있는 경로로 가서)

 

2. Nginx 와 build 파일 연동하기

---

📌 Nginx 설치가 안 된 경우

 

sudo apt update        (패키지 목록 업데이트)
sudo apt upgrade      (패키지를 최신으로 업그레이드)
sudo apt-get install nginx

 

📌 Nginx Config 파일 설정하기

 

cd /etc/nginx/sites-available 

 

기본적인 nginx 설정 파일들과 설명은 여기에서 확인해주세요~

default 파일은 건드리지 않고 따로 파일을 만들어 보겠습니다.

vi 5boon.web 

 

server {
 
    root /var/www/5boon/dist; # 아까 빌드한 배포 파일(dist) 경로
 
    index index.html;
 
    server_name {{ IP 혹은 Domain }};
 
    
    # 봇 정보 수집 방지
    location  /robots.txt {
           return 200 "User-agent: *\nDisallow: /";
    }
 
 
    location / {
        # 허용된 국가가 아닌경우 접근 금지
          if ($allowed_country = no) {
                return 403;
             }
        try_files $uri $uri/ /index.html;
    }
}

일단 하나씩 설명하자면, 3번 라인은 root 경로 설정인 것 같네요. 위에서 빌드한 파일인 dist의 경로로 정해주면 됩니다.

그럼 저 경로에 있는 index.html을 참조하게 돼요!

server_name에는 도메인이 있다면 도메인을 없으시다면 IP로 적으시면 돼요!

 

location 쪽은 vue-router 웹페이지 참고하여 설정했습니다.
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

HTML5 History Mode | Vue Router

 

3. Nginx 재시작하여 웹서버 연결 확인하기

---

sudo nginx -t   (문법 체크)
sudo systemctl restart nginx

 

설정 파일 체크 후 문제가 없으면 nginx를 재실행 줍니다. 그리고 크롬에서 확인해보면!!

 

크롬에서 접속한 화면

짜잔! 이렇게 나옵니다! 도메인은 나중에 다 완성되면 공개하고 싶어서 가렸습니다 ㅎㅎ (조금만 기다려 주세요)

 

4. 마치며

---

사실 vue로 웹페이지로 만들어보는 것 도 처음이었고, 이렇게 배포까지 해보는 것도 처음이라 별거 아니지만 신기하기도 하고 재밌었네요! 간단 요약하자면,

1. vue 프로젝트 생성
2. build
3. Nginx 설정에 build 파일 연결

다만 빌드 파일 배포를 매번 이렇게 서버로 접속해서 수동으로 할 수는 없겠죠?

배포할 때마다 서버 접속해서 npm install, npm run build .... 별거 아니지만 정말 귀찮고 무의미한 작업입니다.

다음 포스팅에서는 github actions를 통해서 자동 배포하는 방법에 대해서 알아보겠습니다.