Webpack은 웹 애플리케이션의 소스 코드를 번들링하고 최적화하는 데 사용되는 도구입니다. 일반적으로 개발 중에는 개발 서버를 통해 코드를 실시간으로 변경사항을 확인하는 것이 일반적입니다. 그러나 실제 배포를 위해서는 번들링된 코드만으로도 애플리케이션을 실행할 수 있어야 합니다.
Docker는 애플리케이션 배포를 위한 컨테이너화 솔루션입니다. 애플리케이션과 그 모든 종속성을 컨테이너로 패키징하여 실행할 수 있게 해줍니다. 이를 통해 환경의 일관성과 이식성을 확보할 수 있습니다.
이제 Webpack과 Docker를 함께 사용하는 방법을 살펴보겠습니다. 먼저, 웹 애플리케이션의 프로젝트 디렉토리에 Dockerfile을 생성합니다. Dockerfile은 Docker 이미지를 빌드하기 위한 설정을 담고 있습니다.
# 베이스 이미지로 node.js를 사용
FROM node:12.16.1
# 작업 디렉토리 설정
WORKDIR /app
# 애플리케이션 종속성 설치
COPY package.json .
RUN npm install
# 소스 코드를 복사
COPY . .
# 웹팩 빌드 실행
RUN npm run build
# 웹 서버 실행
CMD ["npm", "start"]
위의 Dockerfile에서는 먼저 Node.js 12.16.1 버전의 베이스 이미지를 사용합니다. 그런 다음 작업 디렉토리를 /app으로 설정하고, package.json 파일을 복사한 뒤 종속성을 설치합니다. 소스 코드를 복사한 후 npm run build 명령어를 통해 웹팩 빌드를 실행합니다. 마지막으로 npm start 명령어를 통해 웹 서버를 실행합니다.
이제 Docker CLI를 통해 이미지를 빌드하고 실행할 수 있습니다. 아래 명령어를 터미널에 입력합니다.
$ docker build -t myapp .
$ docker run -p 8080:8080 myapp
위의 명령어는 현재 디렉토리에 있는 Dockerfile을 기반으로 myapp이라는 이미지를 빌드하고, 포트 8080으로 애플리케이션을 실행합니다.
이제 여러분은 Webpack과 Docker를 함께 사용하는 방법을 알게 되었습니다. 이를 통해 웹 애플리케이션을 효율적으로 개발하고 배포할 수 있습니다.
추가로 학습할 수 있는 자료: