Vue UI is not working through docker-compose

Question

I'm trying to get a docker ready VUE application setup and ready to go using the UI tool the vue framework supplies; (the command vue ui will start the UI which is then accessed via the web browser).

I was able to get a project setup successfully but only by using the command line method using vue create app-name-here and going through the prompts. Below is an image of it working that way.

I wanted to use the VueUI so I could follow along on some learning tutorials regarding this and to explore it's features but for some reason I can't seem to get it to work.

As you can see in the images I uploaded below it says it's ready on port:8000 and the docker-compose file is indeed set to be open on the port 8000 and also confirmed via docker ps command as seen below.

I can also verify that port 8000 is not being used by another process on my main computer ( lsof -i tcp:8000 ). This command just shows that only docker is using it as it should.

As you can see I have done everything in my power to ensure the port is open but when I go to the web browser to see the UI all I see is it can't be found, which is strange because the default project works just fine.

How can I get the Vue UI to work through docker like this?

NOTE

I start the vue ui server after I run docker-compose by executing into the container like this.

docker exec -it front_end_node /bin/bash

from there I can simply run vue ui , which is what you see in the screenshots above.

Docker-Compose File

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'"

The Docker File

# 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

New Things Recently Tried

I got this to work on my normal host and noticed it was 8001 as the port, so I tried this port instead, still didn't work though.

When I executed into the container I tried vue ui --port 8001 to ensure it was on that port and still no luck even after ensuring it was open.

I did notice that on my mac it tries to load the browser up . In a docker container this is not possible. It also tries to get access to the files, so I'm not sure if this has something to do with it not working or not. I will be investigating further...

Answer 1

Okay so I finally figured out what the issue was. After typing vue ui --help I looked at a list of options.

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

I experimented with starting the command this way and discovered that you want to run in headless mode and in particular the host has to be 0.0.0.0. By default it was localhost which does not work with docker!

I hope this helps someone else trying to use the UI in Docker!

Answer 2

in package.json i was set this line and problem solved:

    "serve": "vue-cli-service serve --host 0.0.0.0",