Ubuntu nginx에 Vue 배포

알아야 할 사항

- Vue

- Ubuntu

- nginx

- 서버 배포란 무엇인가

 

---

실행

뷰 프로젝트를 완성해서 서버에 배포하려 한다.

 

1. 우분투 서버 셋팅

먼저 아무 가상 클라우딩 서비스를 이용해서 우분투 서버를 생성한다. 버전은 20.xx

 

 

2. nginx 설치

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install nginx

구동 테스트 : sudo service nginx status

 

 

3. node 설치

우분투에서 노드를 그냥 apt i 로 설치할려고하면 이상한 버전이 깔리면서 알수없는 오류가 발생한다.

꼭 순서대로 실행 시킨다

 

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -E -

setup_14.x 부분을 변경하면 원하는 버전으로 설치가 가능하다

 

sudo apt install -y nodejs

 

 

4. Vue 설치

sudo npm install -g @vue/cli

 

 

5. Vue 빌드

npm run build:pro

 

pro 부분은 보통 프로덕션 환경 설정을 활용할때 이용한다. 따로 설정한게 없다면 npm run build 만 사용

 

 

6. nginx 유저 변경

 

자신이 로그인한 우분투 유저로 nginx 유저를 변경해 줘야 한다.

sudo vi /etc/nginx/nginx.conf

 

 

user $user$; <---------- 이 부분을 ubuntu로 설정
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
 
events {
        worker_connections 768;
        # multi_accept on;
}
 
http {
 
        ##
        # Basic Settings
        ##
.... 중략

만일 자신이 로그인한 우분투 유저가 ubuntu 라면 해당 부분을 user ubuntu; 로 수정하면 된다

 

 

7. nginx 설정

sudo vim /etc/nginx/sites-available/default

 

 

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /home/ubuntu/app/dist;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }
}

nginx 설정에서 root 경로를 자신의 경로로 바꿔주면 된다. 위 예제는

/home/ubuntu/app/ 폴더 안에 뷰 프로젝트를 생성 후에 build를 진행한 경우이다.

 

 

8. nginx 재시작

sudo service nginx restart

 

 

---

 

nginx 로그 보기

만일 해당 서버의 주소로 접속했는데 접속이 잘 안된다면 nginx의 로그를 찾아보자

tail -f /var/log/nginx/default/error.log

보통 해당 경로에 존재하며 error.log 외에 access.log도 존재한다