[Vue.js] ubuntu에 nginx 설치하고 vue.js 설치하기

Vue.js를 Ubuntu(18.04)에 배포하기

본격적인 설명에 앞서, 아주아주 퓨어한 Ubuntu 환경에서 nginx를 설치하고 vue 첫 페이지가 보여지도록 하는 것이 목표이다.

환경은 ubuntu 18.04 / nginx 1.14.0

1. 서버 접속

ssh root@111.111.11.11

언제나 그렇듯 서버에 접속한다.

root 계정으로 111.111.11.11 IP를 가지는 서버에 접속한다.

비밀번호를 입력하고 서버에 딱 들어옴

2. nginx 설치

$ sudo apt update

$ sudo apt upgrade

위와 같이 업데이트/업그레이드를 해준 후,

$ sudo apt-get install nginx

nginx를 설치한다.

그리고 nginx를 테스트하기 전에 방화벽 소프트웨어를 조정하여 서비스에 액세스 할 수 있도록 해야한다고 한다.

$ sudo ufw app list

[Output]

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

ufw app list를 치면 아래의 output과 같이 나오는데,

• Nginx Full :이 프로필은 포트 80 (암호화되지 않은 일반 웹 트래픽)과 포트 443 (TLS / SSL 암호화 트래픽) 모두를 연다.
• Nginx HTTP :이 프로필은 포트 80 (일반, 암호화되지 않은 웹 트래픽)을 연다
• Nginx HTTPS :이 프로필은 포트 443 (TLS / SSL 암호화 트래픽)을 연다.

라고 한다.

일단 HTTP를 열 예정이므로

$ sudo ufw allow 'Nginx HTTP'

3. nginx 설정파일 만지기

vue를 본격적으로 설치하기 전에 conf부터 만지자.

$ sudo vi /etc/nginx/sites-available/default

만약 default 파일이 새로 만들어진다면... nginx가 잘 설치되어있는지, 아니면 해당 디렉토리가 맞는지 한번 확인해봅니다.

여튼 #이 붙어있는 주석은 제외하고 알짜만 보자면

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

        root /var/www/html/vue-front/dist;

        index index.html;

        server_name _;

        location / {
                try_files $uri $uri/ /index.html;
        }
}

3000포트로 접속될 수 있게끔 할것이다. 원래 기본이 80포트로 되어있을텐데, 이거는 개개인의 취향에 맞게 설정하면 된다.

그리고 root는 vue dist가 뽑아져나올 디렉토리를 지정하면 된다. 이 또한 기본으로 /var/www/html 디렉토리 안에 vue를 설치할 것 이다.

index는 index.html로 설정하였다.

location / { ... }의 try_files $uri $uri/ /index.html; 는 https://router.vuejs.org/guide/essentials/history-mode.html 를 참고하여 설정해주었다.

참고로 vue cli를 사용하여 vue router를 사용할 것이기 때문에 location을 위와 같이 설정해주었다.

esc키 -> :wq 를 입력하여 저장후닫기 한다.

4. vue 및 webpack 설치

$ cd

앞서 3에서 root 디렉토리를 /root/vue-front로 잡아주었는데, 내가 편하게 직관적으로 쓰기 위해 잡아주었다.

아마 cd를 하면 기본으로 /root로 가질텐데 여기에 vue를 설치할 것이다.

또한, 해당 포스팅에서는 비록 설치를 하지만, git clone을 받아온다던지 하여 연결시켜줘도 무방하다.

4-1. Npm 설치

$ sudo apt-get install npm

4-2. Vue 설치

$ npm install -g vue

vue는 글로벌하게 설치해주었다.

4-3. Vue cli 설치

$ npm install -g vue-cli

4-4. webpack

$ cd /var/www/html
$ vue init webpack vue-front

아까 nginx 설정파일에서 root에 연결했던 /var/www/html 안에 들어가서

vue-front라는 이름으로 뷰를 셋팅해준다.

만약 blahblah 라는 디렉토리로 만들어주고싶으면 vue init webpack blahblah 이렇게 쓰면 되겠다.

4-5. 빌드하여 dist 뽑아내기

$ cd vue-front
$ npm run build

vue-front 디렉토리로 들어가서 build하면 dist 디렉토리에 배포파일이 뽑아져 나올 것이다.

브라우저를 통해 해당 서버로 접속하면 아래와 같이 vue 첫화면이 보이게 된다.

5. 발생했던 에러들...

에러 확인은 아래의 에러 로그로 확인 가능하다~

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

5-1. "/root/vue-front/dist/index.html" failed (13: Permission denied)

처음엔 vue 셋팅할 곳을 /var/www/html이 아닌 /root안에 넣으려고 했었다. 근데 브라우저에 500 error가 찍히면서 에러로그를 확인해보니 권한 문제가 발생하였단다.

http로는 index.html이 실행할 수 없다는 것 간다.

• /var/www 권한 : drwxr-xr-x

• /root 권한 : drwxr------ 

/root 폴더 안에 셋팅하는걸 포기하고 그냥 /var/www 안에 셋팅하는걸로 해결했다.

5-2. rewrite or internal redirection cycle while internally redirecting to "/index.html"

무한루프 돈다는 말인거같다. 브라우저에 에러도 안찍히고 실행조차 안되더이다...

문제는 위에 /etc/nginx/sites-available/default 에서 오타가 있어서 생겼던 문제였다.

띄어쓰기로도 문제가 생길수있으니 잘 확인해야한다.