Docker와 docker-compose를 사용하여 Web 또는 App을 개발하는 환경을 세팅해 보려고 합니다.
이 세팅으로 여러사람, 또는 여러 장소에서 개발, 빌드의 환경을 동일하게 가져갈 수 있습니다.
일단 Windows 환경(WSL2)에서 Docker데스크톱이 설치되어 있다는 전제 입니다.
Quasar 프로젝트 초기 파일 생성하기 (스캐폴딩 - Scaffolding)
아무것도 없는 상태에서 Quasar 프로젝트를 시작하려면 먼저 스케폴딩을 파일을 가져와야 합니다. 보통 vue init나 quasar create로 생성해야 하며 이것도 Docker의 기능을 활용해서 가져오면 됩니다.
먼저 CMD창을 열고 프로젝트로 사용할 폴더를 만들고 해당 폴더로 이동합니다.
# 프로젝트 폴더 생성 mkdir mypjt # 해당 폴더로 이동 cd mypjt아래의 명령어로 도커를 이용해 스케폴딩 파일 가져 옵니다.
# docker run --rm -v <프로젝트 폴더 위치>:/app -it node:14.17-alpine sh -c "yarn global add @quasar/cli && quasar create app --branch next" # 아래는 예제 docker run --rm -v D:\TEST\mypjt:/app -it node:14.17-alpine sh -c "yarn global add @quasar/cli && quasar create app --branch next"node:14.17-alpine의 도커 이미지를 기반으로 가져오기 때문에 설치하는 시점에서 최신 버전의 node 도커 이미지의 버전으로 수정하셔도 됩니다.
아래 처럼 설치 명령어가 나오고 Enjoy! - Quasar Team 이 나온다면 설치가 된 것입니다.
그리고 아래와 같이 해당 폴더에 스케폴딩 파일이 생기면 됩니다.
이제 생성된 이 파일들을 이용해서 Dockerfile로 Docker 이미지로 만들 예정입니다.
Dockerfile로 이미지 생성하기
도커 이미지를 생성할 수 있는 Dockerfile을 만들고 아래의 내용을 작성합니다.
# // Dockerfile ############################ ####### develop step ####### ############################ ## node:14.17-alpine의 버전은 위에서 스케폴딩 할 때 사용했던 node버전과 동일해야 합니다. FROM node:14.17-alpine as develop-step WORKDIR /app COPY package*.json ./ RUN yarn global add @quasar/cli COPY . . ########################### ####### build step ######## ########################### FROM develop-step as build-step RUN yarn RUN quasar build ########################### ##### production step ##### ########################### FROM nginx:1.21.0-alpine as production-step COPY --from=build-step /app/dist/spa /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]이제 아래의 명령어로 도커 이미지를 만들어 봅니다.
docker build -t docker_quasar:1.0 .이미지가 정상적으로 생성되었다면 이제는 아래의 명령어로 컨테이너를 한번 띄워봅니다.
docker run -it -p 8080:80 --name docker_quasar_ctn --rm docker_quasar:1.0웹브라우저로 http://localhost:8080에 접속하게 되면 아래와 같은 화면이 나오면 일단 기본은 완성이 된 것입니다.
이제는 docker-compose.yml를 활용하여 쉽게 개발 모드를 실행하게 세팅합니다.
로 개발환경 설정하기
# // docker-compose.yml version: '3.7' services: quasar: build: context: . target: 'develop-step' ports: - '8080:8080' volumes: - '.:/app' command: /bin/sh -c "yarn && quasar dev"파일을 만들었다면 아래의 명령어로 실행시키면 됩니다.
아래의 명령어로 docker-compose.yml를 참조해서 한 번에 이미지를 생성하고 컨테이너까지 바로 생성해서 띄워 줍니다.
docker-compose up --build파일 생성하기
Docker 이미지를 생성할 때 이미지에 포함되지 말아야 할 파일은 .dockerignore에 작성을 합니다.
# .dockerignore node_modules npm-debug.log .git .gitignore핫 리로드(hot reload) 설정하기
이것 때문에 한참 고생을 했었는데…
Docker로 컨테이너를 띄워 논 상태에서 파일을 수정하면 핫 리로드로 브라우저를 새로고침이나 컨테이너를 새로 띄우지 않고도 바로 적용된 것을 확인해야 하는데 이것이 되지 않았습니다. 말하자면 개발환경으로는 사용할 수 없다는 것이었습니다.
이유를 찾아보니 Windows에서 Docker데스크톱을 사용하기 위해 설치한 WSL2 이 원인이었습니다. 다시 말해 Windows환경에서만 핫 리로드가 되지 않는다는 것이었습니다.
그래서 찾은 해결방법은 아래와 같습니다. Quasar뿐만 아니라 devServer를 사용하는 프로젝트에서 사용할 수 있습니다.
quasar프로젝트는 quasar.conf.js에서 설정할 수 있습니다. quasar.conf.js의 중간쯤에 devServer가 있습니다.
// quasar.conf.js ... devServer: { https: false, port: 8080, watchOptions: { // watchOptions의 poll를 설정합니다. poll: 1000 }, open: true },다시 docker-compose up --build를 실행하면 핫 리로드가 됩니다.
