[Vue] Nginx에 Vue 프로젝트 올리기 간단 정리

이번 글에서 mac에 nginx에 Vue 프로젝트를 올리는 내용을 간단하게 써보려 한다.

---

1. Vue 프로젝트 만들기 및 Build

vue 프로젝트를 만들어주자

터미널에서 Vue 프로젝트 만들폴더를 하나 만들고 이동해준다.

vue-cli

vue-cli가 설치되어있지 않다면 아래 명령어로 vue-cli를 설치해준다.

$ npm install -g vue-cli

vue init

이제 vue project를 만들자

아래 명령어를 입력해 프로젝트에 대한 설정을 하고 프로젝트를 생성한다.

$ vue init webpack-simple

 

완료 한후 npm install을 통해 의존성을 설치해준다.

 

$ npm install

그 후 프로젝트 구조를 보면 다음처럼 구성되있을 것이다.

 다음으로 이제 nginx에 올릴 배포 파일을 만들자. 아래의 명령어를 입력하면 사진과 같이 dist 폴더가 생성된다.

$ npm run build

---

2. nginx 설치

$ brew install nginx

nginx를 설치해준다. nginx를 설치해준다면 brew로 설치한 nginx기준 /usr/local/etc/nginx에 설치되어있다.

nginx를 아래명령어를 통해 실행하고 브라우저에 localhost:8080을 입력해 서버가 실행된 것을 확인한다. 

$ nginx

nginx.conf 설정

이제 /usr/local/etc/nginx 경로로 이동하면 아래와 같은 파일들이 존재한다. 아래 파일중 nginx.conf파일을 수정해야한다.

기존 파일 내용에서 아래처럼 location 안의 root와 index를 설정한다. root 경로에는 이전에 vue 프로젝트에서 만들었던 dist폴더와 index.html을 위치시킨다.

nginx.conf

dist 폴더와 index.html 파일

위처럼 모두 마무리하고 아래의 명령어를 통해 nginx를 재실행하고 localhost:8080을 통해 결과를 확인한다.

$ nginx -s reload