VueJs Docker映像未加载到浏览器中

Question

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

我有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进行调试的情况下显示）：

但：最后，在浏览器窗口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映像在浏览器中打开？

---

解决方案：否，请确定这是否是解决问题的原因，但是我做了两件事。如前所述，我正在使用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（上面问题中的初始Docker文件）中删除了EXPOSE 8080行，因为我注意到默认情况下使用配置文件中的端口，并且还会重新启动本地计算机上已安装的Docker工具。

Answer 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（上面问题中的初始Docker文件）中删除了EXPOSE 8080行，因为我注意到默认情况下会使用配置文件中的端口，并且还会重新启动本地计算机上已安装的Docker工具。