Docker Nginx Vue 배포하기

개요

윈도우에서 Docker를 통해 리눅스 컨테이너를 만들고 Nginx를 통해 Vue프로젝트를 배포해보겠다.

준비사항

NodeJS 설치: https://nodejs.org/ko/download LTS버전으로 설치를 추천한다.
Docker 설치: https://velog.io/@ykh9759/Docker-실행해보기 참고
VueJS 설치: https://v3-docs.vuejs-korea.org/guide/quick-start.html#creating-a-vue-application

디렉토리 구조

📦 APG
├─ docker
│  ├─ file
│  │  └─ Vue.Dockerfile
│  └─ nginx
│     └─ sites-available
│        └─ vue.vhost.conf
└─ vue
   ├─ node_modules
   ├─ dist
   ├─ public
   ├─ src
   ├─ index.html
   ├─ package.json
   └─ vite.config.js

Docker컨테이너 구축

현재는 FrontEnd와 BackEnd를 컨테이너별로 구축할 계획이라 docker-compose를 사용하여 구축하였다.

Vue.Dockerfile 작성

# 우분투 기반 이미지를 선택합니다.
FROM ubuntu:22.04

# 패키지 업데이트 및 필요한 패키지 설치
RUN apt update
RUN apt install -y vim
RUN apt install -y net-tools
RUN apt install -y nginx
RUN apt install -y sudo
RUN apt install -y curl
RUN apt install -y telnet
RUN apt install -y init systemd

#nodejs lts버전 설치
RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt install -y nodejs

RUN adduser vue
WORKDIR /home/vue

#단축명령어 
RUN ["/bin/bash", "-c", "echo alias ll=\"'ls -l'\" >> /etc/bash.bashrc"]

#sudo권한 부여
RUN ["/bin/bash", "-c", "echo 'vue ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers"]

#소유주 및 그룹 변경
RUN chown -R vue:vue /home/vue

RUN npm install -g @vue/cli

#nginx 설정파일 심볼릭링크 설정
RUN ln -s /etc/nginx/sites-available/vue.vhost.conf /etc/nginx/sites-enabled/vhost.conf

#nginx 기존 심볼릭링크 삭제
RUN rm /etc/nginx/sites-enabled/default

RUN systemctl enable nginx

docker-copose.yml 작성

version: '3.9'

services:
    front_img:
            container_name: APG_Front
            build: 
                context: ./file
                dockerfile: Vue.Dockerfile
            volumes:
                - C:/Users/ykh05/Desktop/Project/APG/vue:/home/vue
                - C:/Users/ykh05/Desktop/Project/APG/docker/nginx/sites-available:/etc/nginx/sites-available
            ports:
                - "80:80"
                - "3000:3000"
            extra_hosts:
                - "loc.apg.com:172.19.0.10"
            privileged: true
            command: /sbin/init
            user: 0:0
            environment:
                TZ: "Asia/Seoul"
            networks:
                server_net:
                    ipv4_address: "172.19.0.10"
networks:
    server_net:
        driver: bridge
        ipam:
            driver: default
            config:
                - subnet: "172.19.0.0/16"       

vue.vhost.conf 작성

server {
   listen 80;
   server_name 172.19.0.10;

   root /home/vue/dist;
   index index.html;

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

Docker실행

docker-compose.yml파일이 있는 경로로 이동하여 'docker-compose up -d' 명령어를 실행한다.

컨테이너가 완성되었다.

Docker데스크탑을 통해 컨테이너에 접속하여 확인해보았다.
도커파일을 통해 생성한 디렉토리와 nignx가 정상적으로 실행되었다.

/home/vue 하위에서 'npm run build' 명령어를 통해 vue프로젝트를 build한다.
Vue3 부턴 vite를 사용하는 것을 권장한다고 한다. Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)은 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고하는데 vue-cli를 통해서도 build를 해봤는데 확실히 vite를 통해서 build하는 것이 속도가 훨씬 빨랐다.

npm run dev를 통해 개발서버 실행한다. 기본 포트는 8080인데 3000포트로 기본값을 변경하였다.

localhost:3000으로 접속하면 vue프로젝트로 접속이 된다.

하지만 우리는 nginx로 배포를 하기 때문에 80포트로 접속하여본다

docker를 이용하여 nginx를 통해 vue 프로잭트를 배포하였다.