VueJs docker 图像未在浏览器中加载答案

【问题标题】：VueJs docker image not loading in the browserVueJs docker 图像未在浏览器中加载
【发布时间】：2018-10-02 22:12:34
【问题描述】：

问题：（已编辑：在本文末尾添加了解决方案）

我有 VueJS 项目（在 webpack 中开发），我想要 docker-size。

我的 Dockerfile 看起来像：

FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD ["npm", "run", "dev"]

基本上是遵循this post的流程。

我还有一个 .dockerignore 文件，我从我的 .gitignore 复制了相同的文件，它看起来像：

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
.git/

我已经使用以下命令创建了一个 docker 映像：

 docker build -t test/my-image-name .

然后使用命令将其运行到容器中：

 docker run -it -p 8080:8080 --rm --name my-container-name test/my-image-name

作为最后一条命令的结果，我在终端中得到了与我在本地运行应用程序时相同的输出（通常在使用 webpack / vuejs 进行调试的情况下显示）：

BUT：最后，在浏览器窗口中the app is not loaded

如果我运行命令 docker images 和 docker ps 我可以看到图像和容器在那里，并且在创建它们时，我没有收到任何错误消息。

我找到了this post 并尝试了几次将 Dockerfile 更改为：

选项 1

FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .    
EXPOSE 8080
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]

选项 2

FROM node:8.11.1 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ENTRYPOINT ["ng", "serve", "-H", "0.0.0.0"]
EXPOSE 8080
CMD ["npm", "run", "dev"]

但似乎它们都不起作用。

顺便说一句。我的 package.json 文件如下所示：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

所以我想知道：如何让应用在浏览器中从 docker 镜像打开？

【问题讨论】：

stackoverflow.com/questions/52401606/…
请发布容器日志：docker log <container id>
我找到了解决方案并编辑了帖子以包含答案
最好将其作为答案发布并接受（原因之一是 Google 索引）。
谢谢！这对我有用。即使在 docker 文件中包含 EXPOSE 8080 行。

标签： docker docker-compose dockerfile docker-swarm dockerhub

【解决方案1】：

解决方案： 不，确定这是否是修复的原因，但我做了两件事。如前所述，我正在使用 VueJS 和 webpack，所以在名为 config/index.js 的文件中，最初看起来像：

module.exports = {   
  dev: {    
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

// Various Dev Server settings
host: 'localhost', // <---- this one
port: 8080,

我将host 属性从'localhost' 更改为'0.0.0.0'，从Dockerfile 中删除了EXPOSE 8080 行（我上面的问题中的初始Docker 文件），因为我注意到使用了配置文件中的端口默认情况下并在我的本地机器上重新启动安装的 Docker 工具。

【讨论】：