vue2 를 Docker 컨테이너에서 개발하기

매번 새로운 컴퓨터에서 개발환경 셋팅하기가 귀찮다... 도커면 셋팅 과정이 훨씬 간단해지지 않을까?

라는 생각에서 출발

 

생각지 못하게 vscode 를 통해 쉽게 도커 환경을 셋팅했다.

회사에서 개발환경이 vue2, node12 버전을 사용 중이었다. 그러나 노드 12버전은 지원이 종료되었기 때문에 vscode를 통해 도커를 셋팅하려면 그래도 노드 14버전은 써야할 것 같았다. 다행스럽게도 Vue2는 node 14까지 지원한다.

vue.config.js를 몇번 수정하니 node 14에서도 개발이 가능했다.

 

먼저 vscode에서 확장패키지를 몇개 설치 필요하다

 

1. Docker - Microsoft

 

 

  2. Dev Containers - Microsft

 

 

Dev Containers 패키지를 설치한 후 ctrl+shift+p 를 통해 

Dev Containers: Add Dev Container Configuration Files 를 통해 셋팅을 하면

자동으로 .devcontainer 폴더가 생기며 그 하위에 .devcontainer.json 파일이 생성된다.

나는 .devcontainer.json과 Docker파일을 다음과 같이 작성했다.

// .devcontainer/devcontainer.json
{
    "name": "let-docker",
    "dockerFile": "Dockerfile", // Dockerfile이 루트에 있다면 ../Dockerfile로 해도 된다
    "forwardPorts": [8081], // npm run serve/start 시 사용되는 포트로 사용
    "customizations": {
        "vscode": {
            "settings": {},
            "extensions": [
                "dbaeumer.vscode-eslint"
            ]
        }
    },
    "postCreateCommand": "npm install",
    "remoteUser": "usr"
}

# Dockerfile
FROM node:14
RUN apt update && apt install -y less man-db sudo
ARG USERNAME=usr
RUN echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
&& chmod 0440 /etc/sudoers.d/$USERNAME
ENV DEVCONTAINER=true
RUN npm uninstall -g @vue/cli
RUN npm install -g @vue/cli
RUN npm rebuild node-sass

이렇게 셋팅해서 끝은 아니다.

 

vscode를 통해 기껏 컨테이너 개발환경을 구축해도 코드를 수정하면 바로 수정(hot reload)이 되어야 할텐데 그게 되지 않았다.

 

알아보니 프로젝트의 vue.config.js 를 좀 수정해줘야 했다.

module.exports = {
  ...
  ...,
  configureWebpack: {
        devServer: {
          watchOptions: {
            poll: true, // Enable polling
            ignored: /node_modules/, 
          },
        },
    },
  ...

}

 

 

 

vscode에서 ctrl+shift+p 에서 Dev Containers:Open Folder in Container...를 통해 새창을 열고 개발하면 된다.

 

 

 

도커 컨테이너 개발환경 구축 완료
하지만 일반 로컬에서 개발하는 것보다 reload가 조금 느린 것 같다.
그래도 여러 프로젝트에서 버전을 왔다갔다 해야하는 경우라면 도커 컨테이너로 개발환경을 셋팅하는게 확실히 편해보인다.