Vue UI 无法通过 docker-compose 工作

Question

我正在尝试设置一个 docker 就绪的 VUE 应用程序，并准备好使用 vue 框架提供的 UI 工具；（该命令vue ui将启动 UI，然后可通过 Web 浏览器访问该 UI）。

我能够成功设置项目，但只能通过使用 vue create app-name-here 的命令行方法并完成提示。下面是它以这种方式工作的图像。

我想使用 VueUI，所以我可以继续学习一些关于此的学习教程并探索它的功能，但由于某种原因，我似乎无法让它工作。

正如您在下面上传的图像中看到的那样，它表示它已在端口 :8000 上准备就绪，并且 docker-compose 文件确实设置为在端口 8000 上打开，并且还通过 docker ps 命令确认，如下所示。

我还可以验证端口 8000 没有被我的主计算机上的另一个进程使用 ( lsof -i tcp:8000)。这个命令只是表明只有 docker 正在使用它。

如您所见，我已尽我所能确保端口打开，但是当我转到 Web 浏览器查看 UI 时，我看到的只是无法找到它，这很奇怪，因为默认项目工作正常.

我怎样才能让 Vue UI像这样通过 docker 工作？

笔记

我在运行 docker-compose 后通过像这样执行到容器中来启动 vue ui 服务器。

docker exec -it front_end_node /bin/bash

从那里我可以简单地运行vue ui，这就是你在上面的屏幕截图中看到的。

Docker-Compose 文件

version: "3.7"
services:
    dblive:
        image: mysql:8.0
        volumes:
            - ./db_data_live:/var/lib/mysql
            - ./database_config/custom:/etc/mysql/conf.d
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: 123456
            MYSQL_DATABASE: live
            MYSQL_USER: someadmin
            MYSQL_PASSWORD: somepassword
            MYSQL_ROOT_HOST: '%'
    dbdev:
        image: mysql:8.0
        volumes:
            - ./db_data_dev:/var/lib/mysql
            - ./database_config/custom:/etc/mysql/conf.d
        restart: always
        environment:
            MYSQL_ROOT_PASSWORD: 123456
            MYSQL_DATABASE: dev
            MYSQL_USER: someadmin
            MYSQL_PASSWORD: 123456
            MYSQL_ROOT_HOST: '%'
    phpmyadmin:
        depends_on:
            - dblive
            - dbdev
        image: phpmyadmin/phpmyadmin:latest
        environment:
            PMA_ARBITRARY : 1
        restart: always
        volumes:
            - ./phpmyadmin/config.user.inc.php:/etc/phpmyadmin/config.user.inc.php
        ports:
            - "8081:80"
    front_end_node:
        image: "poolservice/callcenter:1.0"
        container_name: front_end_node
        depends_on:
            - dblive
            - dbdev
        user: "node"
        working_dir: /home/node/app
        environment:
          #- NODE_ENV=production
          - NODE_ENV=development
        volumes:
          - ./app/call-center:/home/node/app
        ports:
          #Standard HTTP Dev Port
          - "8080:8080"
          #Vue UI Port
          - "8000:8000"
          #SSH Port
          - "443:443"
          # Tail command prints outputs from a process (either all or specified amount)
          #-F allows realtime streaming output of the changing file which is how it keeps it running so docker does not quit!
          #tail -F command here
        command: "/bin/sh -c 'cd call-center && npm run serve'"

Docker 文件

# Use base image node 12
FROM node:12.9.1

# Set working directory in the container
WORKDIR /home/node/app

# Install the loopback client so we have access to it's commands.
RUN npm install -g @vue/cli

# Expose port 3000,8080 and 8000
EXPOSE 3000
EXPOSE 8080
EXPOSE 8000

最近尝试的新事物

我让它在我的普通主机上工作，并注意到它是 8001 作为端口，所以我尝试了这个端口，但仍然没有工作。

当我执行到容器中时，我试图vue ui --port 8001确保它在那个端口上，即使在确保它打开后仍然没有运气。

我确实注意到在我的 Mac 上它试图加载浏览器。在 docker 容器中，这是不可能的。它还尝试访问文件，所以我不确定这是否与它不工作有关。我会进一步调查...

Answer 1

好的，所以我终于弄清楚了问题所在。输入 vue ui --help 后，我查看了一个选项列表。

vue ui --headless --port 8000 --host 0.0.0.0

我尝试以这种方式启动命令，发现您想在无头模式下运行，特别是主机必须是 0.0.0.0。默认情况下，它是 localhost，它不适用于 docker！

我希望这可以帮助其他人尝试在 Docker 中使用 UI！