在本地主机上运行 vue-cli 欢迎页面的 Docker 容器:无法访问此站点 [英] Docker container running vue-cli Welcome Page on localhost: This site can’t be reached

问题描述

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

I would like to see the vue-cli welcome page in chrome, running from a Docker Container on my Mac. I am struggling to set up the proper configuration for this to work. What am I missing? Here is what I have tried.

已安装

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 示例项目了.

After running the commands above, I now have the vue example project ready to build with 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

在 Chrome 中的 http://localhost:8080/#/ 我看到了 Vue 欢迎页面.

And in Chrome at http://localhost:8080/#/ I see the Vue Welcome page.

构建 Docker 镜像

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

Now it's time to build the Docker Image using this 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 镜像的时候了:

And now it's time to run the Docker image in a container:

$ 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

问题

在 Chrome 中，在 http://localhost:8080/#/ 我得到无法访问此站点".

Problem

In chrome, at http://localhost:8080/#/ I get "This site can't be reached".

正在运行的容器如下所示:

The running container looks like this:

$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 容器会怎样:

What if

What if I run the Docker container using the publish option:

$ 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

等等，这样更好吗?

Problem 2

Wait, is this better?

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

在 chrome 中，在 http://localhost:3000/#/ 现在 我得到这个页面不工作 - localhost 没有发送任何数据."

In chrome, at http://localhost:3000/#/ Now I get "This page isn’t working - localhost didn’t send any data."

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

But I do not see the Vue Welcome page.

推荐答案

好吧，您解决了部分问题……您需要将服务端口(在本例中为 8080)发布到本地计算机上的某个端口(也可以是 8080 或 3000，就像您一样)，但您似乎已经想到了这一点.

Well you solved part of your problem... you NEED to publish the serving port (in this case 8080) to some port on your local machine (could also be 8080 or 3000 like you have), but it looks like you figured this out already.

另一个问题是 webpack-dev-server 使用localhost"作为主机，它需要是0.0.0.0"才能在 Docker 中工作.您可以使用环境变量覆盖主机配置，因此请尝试使用以下命令:

The other problem is that the webpack-dev-server is using "localhost" for a host, which needs to be "0.0.0.0" to work in Docker. You can overwrite the host config using an environment variable, so try this command instead:

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 访问该站点.

and you should be able to access the site in your browser at localhost:8080.

由于 vue 设置使用 webpack-dev-server，请考虑阅读本文以获取有关如何使用 webpack + Docker 的更多信息:https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4

Since the vue setup is using webpack-dev-server, consider reading this for more info on how to use webpack + Docker: https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4

这篇关于在本地主机上运行 vue-cli 欢迎页面的 Docker 容器:无法访问此站点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！