docker - 无法从主机连接到 dockerized Vue CLI 服务

Question

我有一个非常基本的Dockerfile，它安装Vue CLI并公开端口8080:

FROM node

RUN yarn global add @vue/cli

EXPOSE 8080

我有一个docker-compose.yml，它将主机端口连接到容器上暴露的端口:

version: '3'

services:
  vue:
    build:
      context: .
      dockerfile: ./Dockerfile
    volumes:
      - .:/home/node
    working_dir: '/home/node'
    ports:
      - '8080:8080'

我使用 docker-compose run vue bash 运行一个容器，然后使用 vue create foo 创建一个 Vue 项目。

在项目文件夹内，我添加了一个 vue.config.js:

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080
  }
}

当我使用 yarnserve 运行开发服务器时，我看到:

 App running at:
  - Local:   http://localhost:8080/

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your container's external mapped port>/

虽然它显示它是在 localhost 上本地托管的，而不是 0.0.0.0，但这似乎是 a known display bug .

但是，我无法从主机通过 http://localhost:8080 访问 Vue。

我已经查看了多个有关设置此功能的教程，但无法弄清楚为什么我无法访问 Vue 开发服务器。

Answer 1

我没有意识到docker-compose run不设置 docker-compose.yml 中定义的端口默认情况下。这可以通过docker-compose run --service-ports强制.

我已经确定了一个解决方案，将运行 vue cli 命令和运行开发服务器分开到单独的服务中:

version: '3'

services:
  vue-cli:
    build:
      context: .
      dockerfile: ./Dockerfile
    image: auscert/vue:latest
    volumes:
      - .:/home/node
    working_dir: '/home/node/demo'
    command: ['echo', 'Service vue-cli is run only']
  vue:
    image: auscert/vue:latest
    ports:
      - '8080:8080'
    volumes:
      - .:/home/node
    working_dir: '/home/node/demo'
    command: ['yarn', 'serve']

这让我仍然可以使用docker-compose run vue-cli一次性并轻松获得外壳，而所有内容服务均由专门的服务完成。 (为 echo 服务添加 command 作为 vue-cli 确保它立即摆脱 docker-compose up 。)