[Docker] Dockerfile를 사용해서 Vue.js 프로젝트를 실행하는 방법

안녕하세요, 오늘을 Dockerfile를 사용해서 Vue.js 프로젝트를 실행하는 방법에 대해서 알아보겠습니다.

 

먼저, Vue.js 프로젝트를 생성합니다.

 

vue create vuedocker --no-git

 

이어서, 해당 디렉토리로 이동 후 다음과 같은 코드를 사용해서 Dockerfile을 생성합니다.

 

cd vuedocker
touch Dockerfile

 

위의 코드를 통해 생성된 Dockerfile을 다음과 같은 코드로 작성합니다.

 

# Docker 이미지를 구성하기 위해 베이스 이미지로 Node.js의 최신 버전을 사용
FROM node:latest

# 컨테이너 내부에서 /app 디렉토리를 작업 디렉토리로 설정
WORKDIR /app

# package.json 및 package-lock.json(있는 경우) 파일을 현재 디렉토리(작업 디렉토리 /app)로 복사 및 설치
COPY package*.json ./
RUN npm install

# Dockerfile이 위치한 디렉토리의 모든 파일과 디렉토리를 컨테이너의 작업 디렉토리(/app)로 복사
COPY . .

# 프로젝트를 빌드하기 위해 package.json에 정의된 build 스크립트를 실행
RUN npm run build

# http 서버를 전역으로 설치 후 빌드된 정적 파일을 호스팅
RUN npm install -g http-server

# 컨테이너의 8080 포트를 노출
EXPOSE 8080

CMD [ "http-server", "dist" ]

 

docker build -t "docker_image_name_by_user" .

 

docker image 이름을 유저가 직접 설정할 수 있습니다.

docker run -d -p 8080:8080 --name "container_name_by_user" "docker_image_name_by_user"

 

마찬가지로, conatiner 이름도 유저가 직접 설정 가능합니다.

 

실행 결과는 다음과 같습니다.

 

Docker Image에 실행 결과

 

 

지금까지, Dockerfile을 사용해서 Vue.js 프로젝트를 생성하는 방법에 대해서 알아보았습니다.

감사드립니다.