在localhost上运行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.
已安装
- 适用于Mac的Docker-17.12.0-ce
- npm 5.6.0
- vue-cli 2.9.3
命令行
-
$ vue init webpack docvue -
$ cd docvue -
$ npm install
$ vue init webpack docvue$ cd docvue$ 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运行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".
正在运行的容器如下：
$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 /＃/ 现在，我得到无法正常工作-本地主机未发送任何数据。
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，在Docker中必须为 0.0.0.0。您可以使用环境变量覆盖主机配置，因此请尝试以下命令：
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
，那么您应该可以在浏览器中访问本地站点：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
这篇关于在localhost上运行vue-cli欢迎页面的Docker容器：无法访问此站点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
