Vue.Docker에서 js 개발 환경을 구축하는 단계를 구성합니다.
실제 구축 환경의 소스 코드는 여기

사전 준비

Docker에서 개발 환경을 구축하는 데 필요한 사항을 결정합니다.

Vue CLI

이번에는 Vue CLI로 애플리케이션을 만듭니다.
Vue CLI가 설치되어 있지 않으면 설치부터 시작합니다.(@vue/cli-init를 설치하는 김에)

sudo npm install -g @vue/cli @vue/cli-init

버전을 확인할 수 있다면 정상적으로 설치할 수 있습니다.

vue -V
@vue/cli 4.0.5

설치 후 webpack-simple로 응용 프로그램을 만듭니다.

vue init webpack-simple your_app_name

Docker

Docker가 설치되어 있지 않으면 Docker Desktop on Mac 또는 Docker Desktop on Windows 등에서 설치합니다.
버전을 확인할 수 있다면 정상적으로 설치할 수 있습니다.

docker version

docker-compose 명령을 사용할 수 있는지 확인합니다.

docker-compose --version

개발 환경 Docker화 단계

그럼 본론으로 들어가, Vue.Docker에서 js 개발 환경을 구축하는 단계를 구성합니다.

1. vue-cli-서비스 설치

먼저 Docker 컨테이너에서 Vue입니다.js를 시작하는 데 필요한 설치vue-cli-service.

npm install --save @vue/cli-service

설치 후 package.json 에 scripts.serve 설정을 추가합니다.(이 부분은 생략합니다.)
package.json

{
  "scripts": {
    "serve": "node_modules/.bin/vue-cli-service serve"
  }
}

2. 웹팩 설치

프로그램이 시작될 때 컴파일 오류가 발생하지 않도록 웹 팩을 추가합니다.

npm add webpack@latest

3. Docker 설정

필요한 사전 준비가 되어 있으므로 Docker의 설정 파일을 작성해야 합니다.

Dockerfile.dev 만들기

응용 프로그램의 루트 디렉터리에 생성됩니다 Dockerfile.dev.
Dockerfile.dev

FROM node:10.17.0-alpine3.9

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

CMD ["npm", "run", "serve"]

FROM Docker 이미지의 기초(버전은 DockerHub 중에서 선택하십시오

WORKDIR 작업 디렉토리 만들기

COPY package*.json ./ 복제 의존 관계

RUN npm install 종속성 설치

COPY . . Docker 컨테이너로 파일 전달

CMD ["npm", "run", "serve"] 명령으로 서버 시작

.dockerignore 만들기

또한 생성.dockerignore하고 무시할 수 있는 파일을 Docker에 알립니다.
.dockerignore

node_modules
.git
.gitignore

다음은 Docker 설정입니다.

4. Docker 컨테이너에서 시작

명령을 누르면 Docker 컨테이너에서 Vue가 됩니다.js 프로그램을 시작할 수 있습니다.

docker build

먼저 Docker 이미지를 Dockerfile.dev로부터 구축합니다.

docker build --tag your_app_name:latest --file Dockerfile.dev .

--tag 태그 이름 (태그 build 인 경우 해당 이름 run

--file 설정 파일 지정(기본값: Dockerfile

docker run

구축된 Docker 이미지를 사용하여 컨테이너를 시작합니다.

docker run --rm -it --name your_app_container -p 8080:8080 -v ${PWD}:/app -v /app/node_modules your_app_name:latest

--rm 종료 시 용기 자동 삭제

-i 터미널 텍스트 명령을 컨테이너에 입력

-t 좋은 형식으로 터미널로 출력

--name 명명된 컨테이너

-p 포트 매핑

-v Docker 볼륨(로컬 코드를 참조하는 경우 변경 사항을 즉시 반영)

$(PWD) present working directory

문제가 없으면 브라우저 http://localhost:8080/ 에서 액세스할 수 있습니다.Yay!

터미널Ctrl + C에서 용기를 종료할 수 있습니다.

docker-compose에서 더 쉽게 시작할 수 있습니다.

매번docker build..., docker run..., 명령이 번거롭기 때문에docker-compose를 사용하면 더욱 간단하게 시작할 수 있습니다.

docker-compose 설정

루트 디렉토리에 생성docker-compose.yml하여 YML 형식으로 Docker 명령의 내용을 기술합니다.
docker-compose.yml

version: '3.7'

services:
  web:
    container_name: web
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '8080:8080'

설정은 이거밖에 없어요.

docker-compose 명령

이렇게 하면 다음 명령을 사용할 수 있다.

docker-compose up

용기를 가동하다.

docker-compose up

아까와 같이 http://localhost:8080/ 액세스할 수 있습니다.
상당히 간단해졌다.

docker-compose up --build

변경 사항을 반영하기 위해 컨테이너를 재구성하고 시작합니다.

docker-compose up --build

docker-compose up -d

백그라운드에서 컨테이너를 시작합니다.

docker-compose up -d

docker-compose down

용기를 닫다.

docker-compose down

docker-compose에 테스트 추가

용기에서 테스트를 실행할 수 있도록 docker-compose.yml 서비스에 test 서비스를 추가합니다.
docker-compose.yml

version: '3.7'

services:
  web:
    container_name: web
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '8080:8080'
  test:
    container_name: test
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - '.:/app'
      - '/app/node_modules'
    command: ["npm", "run", "test"]

※ *Vue.js에서 테스트 설정에 대한 설명은 참조Vue.js 단원 테스트의 기본 총결
다음 명령을 사용하여 테스트 컨테이너 서비스를 시작할 수 있습니다.

docker-compose up test

서비스 이름을 지정하지 않으면 웹 테스트에서 이 두 서비스를 시작합니다.

docker-compose up

문제 해결

발생할 수 있는 오류와 그 해결 방법을 총결하다.

오류 (하나)

오류 내용

docker run 집행할 때 vue-cli-service 없으면 화를 낸다.

sh: vue-cli-service: command not found

해결 방법

vue-cli-service 설치 솔루션

npm install --save @vue/cli-service

오류(2)

오류 내용

docker run 집행할 때 script: serve 없으면 화를 낸다.

npm ERR! missing script: serve

해결 방법

package.json에 scripts.serve를 추가하여 해결합니다.
package.json

{
  "scripts": {
    "serve": "node_modules/.bin/vue-cli-service serve"
  }
}

오류(3)

오류 내용

docker run 실행 중 compilation.templatesPlugin... 컴파일 오류가 발생했습니다.

ERROR  Failed to compile with 1 errors 
　　TypeError: compilation.templatesPlugin is not a function

해결 방법

웹 팩을 추가하여 해결합니다.

npm add webpack@latest

오류 (4)

오류 내용

docker-compose up 실행할 때 용기 이름이 덮어쓰면 욕을 먹는다.

ERROR: for web  Cannot create container for service web: Conflict. The container name "/web" is already in use by container "f4acb3dbb5". You have to remove (or rename) that container to be able to reuse that name.

해결 방법

이름이 중복된 용기를 제거함으로써 문제를 해결합니다.

docker rm <CONTAINER_ID>