Vue.js 앱을 컨테이너화하는 방법

Vue.js 앱을 컨테이너화하는 방법

Chrome의 http://172.17.0.2:8080/에서 로컬로 사이트에 접속할 수 없어 "172.17.0.2가 응답에 너무 오래 걸렸습니다"라고 표시됩니다.

inspect 명령어를 사용하여 컨테이너의 IP 주소를 취득했습니다.

docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} e83c95d05d63

사용한 run 명령어.

docker run -it -p 8080:8080 --name portfolio-vue portfolio-vue:v1

그리고 나의 도커 파일

FROM node:7.7-alpine

ADD package.json /tmp/package.json
RUN cd /tmp && npm install

RUN mkdir -p /opt/portfolio-vue && cp -a /tmp/node_modules /opt/portfolio-vue-app

WORKDIR /opt/portfolio-vue
COPY . /opt/portfolio-vue

EXPOSE 8080
CMD ["npm", "start"]

기본 vue-cli 설정에서는npm start(사용하는 명령어)는npm run dev.

다시 말씀드리지만 기본적으로는npm run dev는 localhost에만 바인드됩니다.

더하다--host 0.0.0.0고객님께webpack-dev-server줄을 서다package.json따라서 도커 컨테이너 외부에서 액세스할 수 있습니다.

출처:

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

예를 들면 ()add --host 0.0.0.0):

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

주의: 추측하건대, 당신이CMD ["npm", "start"]개발 또는 디버깅을 위해 컨테이너를 만듭니다.운용을 목표로 하고 있는 경우는 번들의 생성을 검토할 필요가 있습니다.npm run build생성된 파일을 nginx와 같은 HTTP 서버에서 직접 처리합니다(도커에서도 작성 가능).

언급URL : https://stackoverflow.com/questions/49758077/how-to-containerize-a-vue-js-app