docker-compose를 사용하여 Vue.js 프로젝트를 만들고 Docker로 이동해 보았습니다.

docker-compose 를 사용하여 Vue.js 의 프로젝트를 만들고 Docker로 이동해 보았습니다.

프로젝트를 만들 디렉토리를 만듭니다.

directory

/hoge_directory

프로젝트를 만들기 위한 docker-compose.yml 만들기

directory

/hoge_directory
    |_ docker-compose.yml

docker-compose.yml

version: '3'
services:
  node:
    image: node:12.7.0-alpine
    volumes:
      - .:/vuejs

이번에는 컨테이너 내에서 만든 Vue.js 프로젝트를 호스트에 동기화시켜 만들므로
호스트 측의 hoge_directory 및 컨테이너내의 /vuejs 를 마운트

    volumes:
      - .:/vuejs

docker-compose로 서비스를 시작하고 컨테이너에 들어가기

sh

$ docker-compose run node sh

마운트된 /vuejs로 이동

sh

/ # cd vuejs/

Vue CLI 설치

이번에는 Vue CLI를 사용하여 프로젝트를 만들므로 Vue CLI를 설치하십시오.

sh

/vuejs # yarn global add @vue/cli

Vue.js 프로젝트 만들기

sh

/vuejs # vue create .

위의 명령을 실행하면 대화식으로 프로젝트를 설정합니다.

YES 선택

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) Y

YES 선택

? Generate project in current directory? (Y/n) Y

default 선택

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

Yarn 선택

? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM 

컨테이너 내에서 호스트 측에 프로젝트가 생성됩니다.

컨테이너

/vuejs
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock

호스트

/hoge_directory
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock

프로젝트 작성 완료! ! !

docker로 Vue.js 실행

Dockerfile 만들기

directory

/hoge_directory
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock
    |_ Dockerfile <- 作成

Dockerfile

FROM node:12.7.0-alpine

WORKDIR /myapp

COPY package.json ./
COPY yarn.lock ./

RUN yarn install

docker-compose.yml 수정

docker-compose.yml

version: '3'
services:
  view:
    build: .
    command: yarn run serve
    volumes:
      - .:/myapp
      - /myapp/node_modules
    ports:
      - "8000:8080"

Vue.js 프로젝트를 마운트하면,
컨테이너 측의 node_modules가 덧쓰기되어 삭제되는 경우가 있으므로,
마운트되지 않도록

volumes:
      - ./vuejs:/myapp
      - /myapp/node_modules <- マウントで上書きされなくなる

(프로젝트가 생성 될 때 생성됩니다 .gitignorenode_modules는 기본적으로 무시되므로 Git에서 공유하면,
컨테이너가 일어나지 않습니다.)

서비스를 시작하고 컨테이너를 시작합니다.

sh

$ docker-compose up -d

접근하다

URL

http://localhost:8000/

끝

마운트했을 때, node_modules 가 덧쓰기되어 삭제되는 것은,
꽤 빠졌습니다 ...