이번 포스트에서는 Vue.js와 Docker를 사용하여 애플리케이션을 배포하는 방법에 대해 알아보겠습니다. Vue.js는 사용자 인터페이스를 개발하기 위한 프레임워크로서 인기를 얻고 있으며, Docker는 애플리케이션을 컨테이너화하여 배포하고 관리하는 데 사용됩니다.

1. Vue.js 프로젝트 생성 및 개발

먼저 Vue.js 프로젝트를 생성하고 개발하는 단계입니다. Vue CLI를 사용하여 프로젝트를 생성할 수 있습니다. 다음 명령어를 사용하여 Vue CLI를 전역으로 설치합니다.

$ npm install -g @vue/cli

Vue CLI가 설치되면 다음 명령어를 사용하여 Vue.js 프로젝트를 생성합니다.

$ vue create my-app

프로젝트 생성 중에는 필요한 옵션을 선택할 수 있습니다. 필요한 패키지와 프로젝트 구조가 생성된 후에는 cd my-app 명령어를 사용하여 프로젝트 폴더로 이동합니다.

프로젝트를 개발할 때는 npm run serve 명령어를 사용하여 개발 서버를 실행할 수 있습니다. 이를 통해 실시간으로 코드 변경 내용을 확인할 수 있습니다.

2. Docker 이미지 생성

다음으로 Docker 이미지를 생성하는 단계입니다. Docker는 애플리케이션을 컨테이너화하기 위한 도구로 널리 사용되고 있습니다.

먼저 프로젝트의 루트 디렉토리에 Dockerfile이라는 파일을 생성합니다. 이 파일은 Docker 이미지를 생성하는 데 사용됩니다. 다음 코드를 Dockerfile에 추가합니다.

# base image
FROM node:12.18.1

# set working directory
WORKDIR /usr/src/app

# copy package.json and package-lock.json
COPY package*.json ./

# install dependencies
RUN npm install

# copy project files
COPY . .

# build project
RUN npm run build

# expose the app port
EXPOSE 8080

# start the app
CMD [ "npm", "run", "serve" ]

위 Dockerfile은 Node.js 12.18.1을 기반으로 하는 Docker 이미지를 생성합니다. 필요한 종속성을 설치하고 애플리케이션을 빌드한 후, 8080 포트로 애플리케이션을 실행합니다.

이제 Docker CLI를 사용하여 Docker 이미지를 빌드합니다. 다음 명령어를 실행합니다.

$ docker build -t my-app .

-t 옵션은 이미지의 태그를 지정하는 역할을 합니다. 이미지 생성이 완료되면 docker images 명령어를 사용하여 이미지가 올바르게 생성되었는지 확인할 수 있습니다.

3. Docker 컨테이너 실행

마지막으로 Docker 컨테이너를 실행하는 단계입니다. 이를 통해 애플리케이션을 배포하고 실행할 수 있습니다.

$ docker run -d -p 8080:8080 --name my-app-container my-app

위 명령어는 -d 옵션을 사용하여 컨테이너를 백그라운드에서 실행합니다. -p 옵션을 사용하여 호스트의 8080 포트와 컨테이너의 8080 포트를 연결합니다. --name 옵션을 사용하여 컨테이너에 이름을 지정합니다.

컨테이너가 실행되면 http://localhost:8080로 애플리케이션에 접속할 수 있습니다.

결론

이제 Vue.js와 Docker를 사용하여 애플리케이션을 배포하는 방법에 대해 알아보았습니다. Vue.js로 개발된 애플리케이션을 Docker 이미지로 빌드하고 컨테이너로 실행함으로써 애플리케이션의 배포와 관리를 효율적으로 할 수 있습니다.