问题
我想在 Chrome 中看到 vue-cli 欢迎页面，它从我的 Mac 上的 Docker 容器运行。我正在努力设置正确的配置以使其正常工作。我错过了什么？这是我尝试过的。
步骤
已安装
- Mac 版 Docker - 17.12.0-ce
- npm 5.6.0
- vue-cli 2.9.3
命令行
$ vue init webpack docvue$ cd 文档$ 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
在 Chrome 中的 http://localhost:8080/#/ 我看到了 Vue 欢迎页面。
构建 Docker 镜像
现在是时候使用这个 Dockerfile 构建 Docker 镜像了:
# 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
问题
在 chrome 中，在 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
在 chrome 中，在 http://localhost:3000/#/ 现在 我得到“这个页面不工作 - localhost 没有发送任何数据。 "
但是我没有看到 Vue 欢迎页面。
最佳答案
好吧，你解决了部分问题......你需要将服务端口(在本例中为 8080)发布到本地计算机上的某个端口(也可以像你一样是 8080 或 3000)，但看起来你已经想通了。
另一个问题是 webpack-dev-server 正在使用“localhost”作为主机，它需要是“0.0.0.0”才能在 Docker 中工作。您可以使用环境变量覆盖主机配置，因此请尝试使用此命令:
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
关于node.js - 在本地主机 : This site can’t be reached 上运行 vue-cli 欢迎页面的 Docker 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49497211/