vue cli 프로젝트 Dockerfile 생성하기 #20

vue cli 프로젝트의 Dockerfile 생성하기

vue cli는 기본적인 웹서버 기능도 있기 때문에 로컬 개발 시에는 웹서버가 필요 없었다.

하지만 배포를 할 때에는 웹서버를 설치하고 vue 배포 파일들인 dist 폴더를 압축해서 업로드해야 하는데,

이를 docker 를 이용하여 배포해 본다.

 

vue cli Dockerfile 생성

• 파일명과 대소문자 그대로 Dockerfile을 루트 디렉터리에 신규 생성한다.
  • package.json 있는 곳과 동일한 위치
  • 파일명은 Dockerfile

FROM node:lts-alpine AS build-stage
WORKDIR /pubdweb
COPY package*.json ./
RUN npm install --production
COPY . .
RUN npm run build

FROM nginx:stable-alpine AS production-stage
COPY --from=build-stage /pubdweb/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Dockerfile 내용 분석

FROM node:lts-alpine AS build-stage:

• Node.js 환경에서 빌드 준비
  
  • Node.js의 LTS 버전을 기반으로 하는 Alpine Linux 이미지를 build-stage라는 이름으로 정의.
    이 환경에서 애플리케이션의 빌드를 수행.
  • lts (Long Term Support): Node.js의 LTS 버전을 의미한다.
    기업 환경에서 주로 사용되며, 새로운 기능보다는 안정성과 버그 수정에 중점을 둔다.
  • alpine은 Alpine Linux라는 경량화된 Linux 배포판을 기반으로 한 이미지를 가리키며,
    Docker 이미지에서 Alpine Linux를 사용하면 이미지 크기가 매우 작아져 리소스를 절약하고, 빠르게 빌드 및 배포할 수 있다.

WORKDIR /sfmbweb:

• 작업 디렉토리 설정 단계
  
  • Docker 컨테이너 내에서 작업 디렉터리를 /pubdweb으로 설정한다. 이후의 모든 명령은 이 디렉토리 내에서 실행됨.
  • vue cli 소스가 있는 폴더로 설정

COPY package*.json ./:

• 의존성 설치 단계
  
  • package.json과 package-lock.json(또는 npm-shrinkwrap.json) 파일을 Docker 컨테이너의 작업 디렉터리로 복사한다.

RUN npm install --production:

• 의존성 설치 단계
  • Node.js 애플리케이션의 의존성을 설치.
  • --production 플래그는 프로덕션 환경에서 필요한 의존성만 설치하도록 한다.(개발 의존성은 제외)

COPY . .:

• 애플리케이션 코드 복사 및 빌드 단계
  
  • 현재 디렉터리의 모든 파일을 컨테이너의 작업 디렉토리(/pubdweb)로 복사.

RUN npm run build:

• 애플리케이션 코드 복사 및 빌드 단계
  • 애플리케이션의 빌드 스크립트를 실행하여, 최종 배포 가능한 정적 파일(예: HTML, CSS, JavaScript)을 생성한다.
  • 빌드 결과물은 dist 디렉터리에 생성.

FROM nginx:stable-alpine AS production-stage:

• nginx:stable-alpine 이미지를 기반으로 새로운 Docker 이미지를 생성하며, 이 단계를 production-stage라는 이름으로 지정한다.
• nginx:stable-alpine은 경량화된 Alpine Linux 기반의 NGINX 안정적인 버전(stable)을 포함한 이미지로,
  이 이미지는 정적 웹사이트 파일을 서빙하기에 적합하다.

COPY --from=build-stage /sfmbweb/dist /usr/share/nginx/html:

• 이전 build-stage에서 생성된 빌드 결과물(정적 파일)을 production-stage로 복사한다.
• --from=build-stage는 build-stage에서 파일을 복사해 오는 것을 의미.
• /pubdweb/dist는 build-stage에서 빌드된 정적 파일들이 위치한 디렉터리.
• 이 파일들을 nginx의 기본 정적 파일 제공 디렉터리인 /usr/share/nginx/html로 복사한다.
• NGINX는 이 디렉토리 내의 파일을 웹 서버를 통해 클라이언트에게 제공한다.

EXPOSE 80:

• Docker 컨테이너의 80번 포트를 외부에 노출한다.
• 80번 포트는 기본적으로 HTTP 트래픽을 처리하는 포트로, 이 설정으로 nginx가 HTTP 요청을 수신할 수 있게 된다.
• 이는 Dockerfile에서 포트 매핑을 명시적으로 나타내는 역할을 하며, 실제 포트 바인딩은 docker run 명령어에서 수행된다.
  • 예시 : docker run -d -p 8080:80 {dockerhub계정}/docker_pubdweb:pw0.1

CMD ["nginx", "-g", "daemon off;"]:

• docker 컨테이너가 시작될 때 실행할 명령어를 정의.
• nginx는 nginx 웹 서버를 실행하는 명령어를 의미.
• -g "daemon off;" 플래그는 nginx를 데몬 모드가 아닌 포그라운드(foreground) 모드로 실행하도록 지시한다.
• docker 컨테이너는 포그라운드에서 실행 중인 프로세스가 종료되면 컨테이너 자체가 종료되므로, nginx를 포그라운드 모드로 실행하여 컨테이너가 계속 실행되도록 한다.

docker nginx를 support 하는 페이지 참고

☞ https://hub.docker.com/_/nginx

 

dockerfile 참조

☞ https://docs.docker.com/reference/dockerfile/

 

마무리

vue cli의 Dockerfile을 생성했다. 다음에는 django 프로젝트의 Dockerfile 을 생성해 본다.