Docker Vue.js 환경을 만들기 전에

Docker를 사용하여 Vue를 수행합니다.제이스 환경을 만들고 싶어서 그 기록이야.

컨디션

MacBook Air (M1, 2020) MacOS Big Sur

Docker version 20.10.1

docker-compose version 1.27.4

폴더 구성

project
├── docker
│   └── web
│       └── Dockerfile
├── docker-compose.yml
└── server

docker-compose.yml

4

version: '3.8'

services:
  web:
    container_name: web
    build: ./docker/web
    ports:
      - 9000:9000
    privileged: true
    volumes:
      - ./server:/app
    tty: true
    stdin_open: true
    command: /bin/sh

포트는 9000개이며 환경에 따라 변경하십시오.그나저나 블루.js의 기본 포트는 8080과 같습니다.

Dockerfile

웹 폴더에서 다음 Docker file을 만듭니다.FROM 값을 적절하게 변경하십시오.

FROM node:15.11.0-alpine

WORKDIR /app

RUN apk update && \
    npm install && \
    npm install -g npm && \
    npm install -g vue-cli

Docker 컨테이너 시작

# Docker構築&起動
docker-compose up -d

# コンテナに入る
docker-compose exec web sh

Vue.js 프로젝트 만들기

컨테이너 제작 프로젝트에 들어가다.

/app # vue init webpack
# y/nで質問されますが、こだわりなければ基本yesまたはEnterでOK。こだわりがあればお好きな様に。

환경 설정

project/server/config/index.환경에 따라 js의 값을 변경합니다.
host를 localhost에서 0.0.0.0으로 변경합니다.
또한docker-compose.yml에 있을 때port도 변경되면 index.js의port을 변경합니다.
docker-compose입니다.yml에서 9000호를 설정했기 때문에 9000호를 설정했습니다.
4

// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST

또한poll의 값을ture로 설정하여 파일의 변경을 검사한다.

port: 9000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

실행

index.js의 값을 수정한 후 npm run dev를 누르면 실행됩니다.

poll: true, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

동작 확인

방문그대로 이 화면만 나오면 돼요.project/server/src/components/HelloWorld.vue의 내용을 적당히 변경하여 변경이 반영되었는지 확인합니다.

참조 페이지:
http://0.0.0.0:9000/