Docker 컨테이너 localhost에 vue-cli 시작 페이지를 실행하는:.이 사이트에 도달할 수 없습니다.

Docker 컨테이너 localhost에 vue-cli 시작 페이지를 실행하는:.이 사이트에 도달할 수 없습니다.

질문.

나는 크롬에서 Docker 컨테이너에서 나의 맥 운영 체제에 실행하vue-cli 환영 페이지를 보고 싶다.나는 이 일에 대한 적절한 구성을 설정하기 위해 애쓰고 있다.제가 무엇을 빠뜨리고 있나요?여기 나는 노력해 온다.

단계

설치된.

1. Docker 맥-17.12.0-ce에
2. npm 5.6.0
3. vue-cli 2.9.3

사령부 선

1. $ vue init webpack docvue
2. $ cd docvue
3. $ npm install

파일

위의 명령을 작동한 후, 나는 현재vue 예 사업 webpack을 짓준비해야만.

$ ls
README.md       config          node_modules        package.json        static
build           index.html      package-lock.json   src

이내에/docvue/제가 할 수 있어요.npm run dev그리고 나는을 참조하십시오.

> docvue@1.0.0 dev /Users/dchaddportwine/Startup/docvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                        

 DONE  Compiled successfully in 4695ms                                                                              12:17:04 PM

 Your application is running here: http://localhost:8080

그리고에서 크롬에서http://localhost:8080/#/나는 뷰 어서 오십시오 페이지를 참조하십시오.

그 Docker 이미지 구축

때가 됐어 Docker 이미지 이 Dockerfile를 사용하기:.

# base image
FROM node:8.10.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json ./

RUN npm install

# Bundle app source
COPY . .

EXPOSE 8080

CMD [ "npm", "start" ]

명령줄

$ docker build -t cportwine/docvue .
Successfully built 61bc30c3695b
Successfully tagged cportwine/docvue:latest

이제 Docker 이미지를 컨테이너에서 실행할 차례입니다.

$ docker run --rm -d cportwine/docvue
34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d

로그를 확인합니다.

$ docker logs 34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d

> docvue@1.0.0 start /usr/src/app
> npm run dev


> docvue@1.0.0 dev /usr/src/app
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 78% advanced chunk op DONE  Compiled successfully in 4383ms16:56:56                 

 Your application is running here: http://localhost:8080

문제

크롬으로,http://localhost:8080/#/"이 사이트는 접속할 수 없습니다"라고 표시됩니다.

실행 중인 컨테이너는 다음과 같습니다.

$docker container ls
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
34ba43323723        cportwine/docvue    "npm start"         7 minutes ago       Up 7 minutes        8080/tcp            agitated_payne

면 어쩌지

게시 옵션을 사용하여 Docker 컨테이너를 실행하면 어떻게 됩니까?

$ docker run --rm -p3000:8080 -d cportwine/docvue
2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261

로그를 확인합니다.

$ docker logs 2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261

> docvue@1.0.0 start /usr/src/app
> npm run dev


> docvue@1.0.0 dev /usr/src/app
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 78% advanced chunk op DONE  Compiled successfully in 4438ms17:08:09                 

 Your application is running here: http://localhost:8080

문제 2

잠깐만, 이게 더 나아요?

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
2f9dd0bf1caa        cportwine/docvue    "npm start"         8 minutes ago       Up 8 minutes        0.0.0.0:3000->8080/tcp   zen_liskov

크롬으로,http://localhost:3000/#/ 이제 "이 페이지는 작동하지 않습니다 - localhost가 데이터를 전송하지 않았습니다."라고 표시됩니다.

그러나 Vue Welcome 페이지는 표시되지 않습니다.

네 문제의 일부를 해결했으니까...서비스 포트(이 경우 8080)를 로컬 머신의 포트(8080 또는 3000)에 퍼블리시해야 합니다만, 이것은 이미 알고 있는 것처럼 보입니다.

또 다른 문제는 webpack-dev-server가 호스트에 대해 "localhost"를 사용하고 있다는 것입니다.도커에서 동작하려면 "0.0.0"이어야 합니다.환경 변수를 사용하여 호스트 구성을 덮어쓸 수 있으므로 대신 다음 명령을 사용해 보십시오.

docker run --rm -p 8080:8080 -e "HOST=0.0.0.0" -d cportwine/docvue

로그에 다음과 같이 표시됩니다.

Your application is running here: http://0.0.0.0:8080

localhost:8080의 브라우저에서 사이트에 접속할 수 있습니다.

vue 셋업에서는 webpack-dev-server 를 사용하고 있기 때문에, Webpack + Docker 의 사용 방법에 대한 자세한 것은, 이 문서를 참조해 주세요.https://medium.com/@andyccs/webpack-and-docker for-development-and-development-ae0e73243db4

언급URL : https://stackoverflow.com/questions/49497211/docker-container-running-vue-cli-welcome-page-on-localhost-this-site-can-t-be-r