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

Posted 2023-02-23

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

【英文标题】：Docker container running vue-cli Welcome Page on localhost: This site can’t be reached

【发布时间】：2018-09-04 22:29:44

【问题描述】：

问题

我想在我的 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

问题

在 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 欢迎页面。

【问题讨论】：

您是否能够让 vue ui 命令在 docker 中正常工作？我无法让它发挥作用并且很好奇，因为它与您在这里所做的非常相似。

Joseph，是的，我曾经看到我的 Vue 应用程序在 docker 容器中以 chrome 运行。但这是朝着持续集成迈出的错误一步。我从来没有以这种方式使用过 Docker。

【参考方案1】：

您解决了部分问题...您需要将服务端口（在本例中为 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

【讨论】：

这是在 docker 上运行 vue.js 应用程序的好方法。但是对于热重载有一个延迟，并且 cpu 利用率在 mac 上达到 60% 并且还在增加。热重载延迟从 5 秒开始，下次更改时也会增加