Vue.js + Nginx 웹서버 구축하기
Vue CLI, Nginx 사용해서 심플한 프론트엔드 웹서버 구축하기
추가 의견 - 2019/11/20
vue-cli 사용 방법이 버전 업그레이드 되면서 일부 변경되었습니다. 이 글에서 사용하는 명령어를 사용하기 보다는, 최신 버전의 명령어를 찾아서 사용하시는 걸 추천합니다.
이 글은 Vue.js 및 Nginx 를 연동하여 심플하게 Static 웹서버를 구축하는 방법에 대한 글이다. Vue CLI 를 사용해서 애플리케이션을 구성하였고, GitHub과 Jenkins 를 연동하여 배포 프로세스를 구축하였다. 단, 프론트엔드와 백엔드 기술이 완벽하게 분리되어 있는 경우에만 해당하는 내용이다. 백엔드+프론트엔드 하나의 프로젝트로 구성되어 있는 애플리케이션에는 적용할 수 없다. 만약 스프링 부트 + Vue.js 를 연동해서 프로젝트를 구성하고 싶다면 아래 글을 참고하길 바란다.
https://github.com/kingbbode/spring-vuejs
필자는 프론트엔드 기술에 관심이 많지 않습니다. 그래서, Vue.js 에 대한 이해도가 낮습니다. 이 글에서 논하는 내용은 모두 실무 경험을 바탕으로 작성한 내용이 아닙니다. 글에서 잘못된 내용이 있을 수 있습니다.
Vue CLI 를 사용해서
Vue.js 로컬 개발환경 구축하기
먼저 Vue CLI 를 사용해서 로컬 개발환경을 구축한다.
npm install 을 수행하여 관련 모듈을 생성하고
vue.js 서버를 시작한다.
그럼, 아래와 같이 애플리케이션이 running 한다는 메시지가 보이고
간단하게, 파일을 수정하고 서버 재시작 없이 실시간으로 변경되는지 확인해보자.
정상적으로 변경되는 것을 확인할 수 있다.
소스보기를 확인해 보면, /app.js 로 되어있다.
지금까지 로컬 개발 환경에 대한 내용이었다.
서비스 배포
실서비스 환경에 배포를 해보자. 필자의 가상 호스트 서버에 배포하겠다.
애플리케이션 빌드 및 배포
실서버에 배포하기 위해서는 vue.js 애플리케이션을 빌드해야 한다. 빌드를 한다는 얘기는 Static 파일을 생성한다는 의미이다. 즉, Javascript, index.html, css 파일 등을 생성한다.
명령어를 실행하면 애플리케이션 빌드가 되며, 빌드파일은 아래와 같이 dist/static 디렉토리에 생성된다.
빌드된 dist 디렉토리 전체 파일을 웹서버에 배포하자. 필자는 월5천원짜리 호스팅 서버를 운영중인데, 필자의 서버에 /data/www/vuejs-pilot/dist 디렉토리에 배포를 하였다.
웹서버 구축
일반적으로 WAS 를 운영하는 경우에는 애플리케이션이 특정 포트로 실행이 될 것이다. 하지만, 이 경우에는 Static 파일만 배포하면 되기 때문에 굳이 WAS 에 연동할 필요가 없다. Static 파일만 배포하면 끝이다. 하지만, 외부에서 접속하기 위한 웹서버가 필요한데, 웹서버는 Nginx 로 구성하면 된다.Nginx 를 설치하고 설정을 변경하자. /etc/nginx/conf.d/ 에 vuejs.conf 파일을 작성해서 Vue.js 배포 경로를 지정해주자.
Nginx 를 재시작하고 서버를 호출해보자.
참고로, rpm run dev 으로 실행했을 때와는 다르게, npm run build 로 생성 된 리소스 파일의 경로는 /static 경로로 구성된다. (물론 설정을 변경할 수 있다. 필자의 환경은 기본 디폴트 설정이다.)
다시한번 말하지만, 이 글은 백엔드 없이 프론트엔드 기술만 사용해서 웹사이트를 구축하는 예시이다.
실서비스 배포 프로세스
웹사이트를 업데이트 하기 위해서는 dist 의 Static 파일, 즉, Javascript, Css, index.html 등의 파일을 업데이트 하면 된다. npm run build 를 실행하면 생성되는 js, css 파일과 index.html 를 서버 dist 디렉토리에 배포하면 된다. 그러면, 웹서버를 접근하는 사용자는 변경된 js, css 파일을 신규로 다운로드하게 되고 신규 화면을 로드하게 된다. (만약, js 파일명이 동일하다면 브라우저 캐싱으로 인해서 반영이 안될수도 있지만, npm run build 를 수행하면 새로운 파일명으로 생성될 것이다.) 하지만, 매번 이렇게 직접 서버에 파일을 배포하는 것은 효율적인 방법은 아니다. 좀 더 편리한 배포 프로세스를 구축하자.
배포 프로세스 구축
심플하게, Github, 젠킨스 연동하여 배포 환경을 구축하였다. Jenkins 서버에는 npm 빌드가 실행되도록 미리 node,npm 등 설치를 미리 완료하였다.
배포 프로세스는 아래와 같다.
1. 개발자는 수정한 코드를 GitHub 에 Push 한다.
2. Jenkins 관리툴에서 빌드를 실행한다.
3. Jenkins 에서 서버에 Static(js,css, index.html) 파일을 배포한다.
참고로, GitHub 에 Push 하면 자동으로 Jenkins 에서 빌드가 되도록 구성할 수도 있다.
Jenkins Build
빌드를 수행하면, 정상적으로 Jenkins 빌드&배포 가 완료되었다. 또한, 미리 설정한 배포 프로세스에 의해서 자동으로 웹서버에 배포가 될 것이다.
필자가 빠르게 구축해본 vue.js 서버는 아래와 같다.
Jenkins 와 GitHub 관련해서는 상세하게 글을 작성하진 않았다. 관심 있는 개발자는 따로 공부해보길 바란다. 아래 블로그를 참고하길 바란다. 강추한다.
https://jojoldu.tistory.com/291
마무리
이번 글에서는 Vue.js 와 Nginx 를 사용해서 아주 심플한 프론트엔드 웹서버를 구축하였다. 필자가 Vue.js 프로젝트 경험이 많지 않고, 프론트엔드 기술에 익숙하지 않기 때문에 해당 내용은 잘못된 내용이 포함되어있을 가능성이 높다. 좋은 의견이 있다면 언제 든지 댓글로 남겨주길 바란다.
