[javascript] Vue.js에서의 컨테이너화(Containerization) 방법

01 Dec 2023

javascript

최근에는 컨테이너 기술이 애플리케이션 배포 및 관리의 핵심 요소로 부상하고 있습니다. 컨테이너는 애플리케이션을 독립적으로 실행할 수 있는 가상 환경을 제공하며, 이를 통해 애플리케이션의 이식성과 확장성을 개선할 수 있습니다. Vue.js 프로젝트를 컨테이너화하여 이러한 이점을 얻을 수 있습니다.

Docker 설치

먼저, Vue.js 프로젝트를 컨테이너화하기 위해 Docker를 설치해야 합니다. Docker는 가상화된 환경을 제공하여 애플리케이션의 실행과 관리를 단순화해줍니다.

Docker 공식 웹사이트(https://www.docker.com/)에서 운영체제에 맞는 Docker 설치 파일을 다운로드합니다.
다운로드한 설치 파일을 실행하여 Docker를 설치합니다.

Vue.js 프로젝트 컨테이너화

이제 Vue.js 프로젝트를 컨테이너화하는 방법에 대해 알아보겠습니다.

Vue.js 프로젝트의 루트 디렉토리에 ‘Dockerfile’이라는 파일을 생성합니다.
아래의 코드를 ‘Dockerfile’에 추가합니다.

# 베이스 이미지를 정의합니다.
FROM node:latest

# 작업 디렉토리를 생성합니다.
WORKDIR /app

# package.json 파일 복사 및 종속성 설치
COPY package*.json ./
RUN npm install

# 소스 코드를 컨테이너 내부로 복사합니다.
COPY . .

# 애플리케이션 빌드
RUN npm run build

# 프로덕션 환경에서 애플리케이션 실행
CMD [ "npm", "start" ]

터미널에서 Vue.js 프로젝트의 루트 디렉토리로 이동한 뒤, 아래의 명령어를 실행하여 Docker 이미지를 빌드합니다.
```
docker build -t vue-app .
```
이미지를 성공적으로 빌드하면, 아래의 명령어로 컨테이너를 실행할 수 있습니다.
```
docker run -p 8080:8080 vue-app
```
웹 브라우저에서 http://localhost:8080으로 접속하여 Vue.js 애플리케이션을 확인할 수 있습니다.

마무리

이제 Vue.js 프로젝트를 컨테이너화하는 방법에 대해 알아보았습니다. 컨테이너는 애플리케이션을 독립적으로 실행하고 관리할 수 있는 환경을 제공하여 개발과 배포의 효율성을 높여줍니다. Docker를 통해 Vue.js 프로젝트를 컨테이너화하여 이식성과 확장성을 향상시켜보세요.

참고 자료

Docker 공식 웹사이트: https://www.docker.com/
Vue.js 공식 문서: https://vuejs.org/
Dockerizing a Vue.js app: https://mherman.org/blog/dockerizing-a-vue-app/