在localhost上运行vue-cli欢迎页面的Docker容器：无法访问此站点

Question

问题

我想在Chrome上看到vue-cli欢迎页面，从我Mac上的Docker容器运行。我正在努力为此设置正确的配置。我错过了什么？这是我尝试过的。

步骤

安装

1. 适用于Mac的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

文件

运行上面的命令后，我现在准备好使用webpack构建vue示例项目。

$ 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/#/

在# 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" ] 的Chrome中，我看到了Vue欢迎页面。

构建Docker镜像

现在是时候使用这个Dockerfile构建Docker镜像了：

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

命令行

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

现在是时候在容器中运行Docker镜像了：

$ 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/#/

问题

在Chrome中，$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 run --rm -p3000:8080 -d cportwine/docvue
2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261

如果

怎么办？

如果我使用发布选项运行Docker容器怎么办：

$ 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

并查看日志：

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

问题2

等等，这样更好吗？

http://localhost:3000/#/

在Chrome中，在quoteList 现在，我收到“此页面无效 - localhost未发送任何数据。”

但我没有看到Vue欢迎页面。

Answer 1

嗯，你解决了部分问题...你需要将服务端口（在本例中为8080）发布到本地计算机上的某个端口（也可能是8080或3000），但它看起来像你已经弄明白了。

另一个问题是webpack-dev-server使用“localhost”作为主机，在Docker中需要“0.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-deployment-ae0e73243db4