问题
我想在我的Mac上使用Docker容器运行Chrome，并查看vue-cli欢迎页面。但我一直无法设置正确的配置使其正常工作。我漏掉了什么？以下是我尝试过的。
步骤
已安装
- Docker for Mac-17.12.0-ce
- npm 5.6.0
- Vue-cli 2.9.3
命令行
$ vue init webpack docvue$ cd docvue$ 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
问题
在谷歌浏览器中，访问 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的欢迎页面。