간단하게 vue.js 빌드하고 웹서버(nginx) 구성해보기(feat. docker)

간단하게 vue프레임워크 구동하기 그리고 nginx 웹서버로 서비스 띄우기

 

1. VUE CLI를 통해 로컬 개발환경에서 테스트 웹 띄우기

⚠️ npm 환경이 구성되었다는 전제로 시작한다.(node,vue 설치가 되었다는 전제로 진행한다.)

init 명령어로 프로젝트를 시작한다.

$ npm install -g vue-cli@[버전] $ vue init webpack [project 이름]

.....

 

프로젝트가 생성되면 친철하게 구동방법을 설명해 준다. 해당 폴더로 이동하여 테스트 웹을 띄운다.

$ cd [project  이름] $ npm install                       #해당 프로젝트에 필요한 패키지파일을 설치 $ npm run dev

브라우저에서 http://localhost:8080으로 접근하면 아래 페이지가 보인다. 여기까지로 테스트 환경 구성이 완료되었다.

2. 배포 소스 만들기

실서버 배포본을 만들어 보자.

배포를 위해 패키지 파일을 만드는 과정을 빌드라고 한다. vue의 대부분 파일인 javascript, index.html, css 등의 파일을 생성한다.

$ npm run build

빌드된 결과물 경로는 dist 디렉터리 이하에 존재한다.

 

3. 웹서버 구동하기(Docker container 띄우기)

이제 웹서버를 만들고 빌드된 결과 파일을 root에 넣어 서비스 환경을 완성한다.

웹서버를 구축하는데 하나하나 진행해야 될 사항들이 많다. 좀 더 간편하게 그리고 구동 환경에 영향을 덜 받기 위해 Docker container 형태로 구동해보려고 한다.

⚠️ Docker를 구동 환경이 세팅되어 있다는 전제로 다음 과정을 진행해 보자.

docker hub에서 제공하는 이미지를 이용하여 구동을 진행한다.

명령어 구조: docker run -it -d --rm --name [구동될 컨테이너 이름] - p [host port: container 내부 서비스 port] -v [host path: container path] [도커이미지 이름]

$ docker run -it -d --rm --name nginx_new \
       -p 80:80 \
       -v ~/nginx_new/dist/:/usr/share/nginx/html/ \
       -v ~/nginx_conf/:/etc/nginx/conf.d/ \
       nginx

역시 나 브라우저에서 http://localhost:80 접근하면 vue페이지를 확인할 수 있다.

docker를 직접 구동해도 되지만 docker-compose를 이용하면 명령어를 구동하는 것보다 편하게 이용할 수 있다.

⚠️ 보통 Docker-compose 구동 환경은 Docker를 구동 환경 세팅시 함께 셋팅된다. 아닌경우 추가 구성이 필요하다. 다음은 해당 구성이 완료 되었다는 전제로 진행한다.

다음과 같이 docker-compose.yml파일을 작성한다.

version: '3'

services:
  nginx:
    image: nginx:latest
#    build:                                    # docker file을 직접 빌드하는경우 사용되는 옵션
#      context: .
#      dockerfile: ./Dockerfile
#    environment:                              # 환경 변수의 지정이 필요할때 사용하하는 옵션
    ports:
      - "80:80"
    volumes:
      - ~/[project이름]/dist/:/usr/share/nginx/html/
      - ~/[nginx 구동에 필요한 설정 폴더]/:/etc/nginx/conf.d/
    stdin_open: true    # docker run -i
    tty: true           # docker run -t

명령어 구조: docker-compose -p [프로젝트 명] -d

docker-compose -p nginx_new -d

 

---

[참고 블로그 소개]

https://brunch.co.kr/@springboot/188

Vue.js + Nginx 웹서버 구축하기