CODEWITHSUNDEEP
dockervue.jsvuejs2docker-composevue-cli
Matthew Trevor
Matthew Trevor

Reputation: 14952

Unable to connect to dockerised Vue CLI service from host

I have a very basic Dockerfile that installs Vue CLI and exposes port 8080:

FROM node

RUN yarn global add @vue/cli

EXPOSE 8080

I have a docker-compose.yml that connects the host port to the exposed one on the container:

version: '3'

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

I run up a container with docker-compose run vue bash then create a Vue project with vue create foo.

Inside the project folder I've added a vue.config.js:

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

When I run the development server with yarn serve I see:

 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>/

While it's showing that it's hosted locally on localhost and not 0.0.0.0 this appears to be a known display bug.

However, I am unable to reach Vue via http://localhost:8080 from the host machine.

I've looked at multiple tutorials for setting this up and am unable to work out why I cannot reach the Vue dev server.

Upvotes: 2

Views: 1531

Answers (2)

Matthew Trevor
Matthew Trevor

Reputation: 14952

I didn't realise that docker-compose run doesn't set up the ports defined in the docker-compose.yml by default. This can be forced by docker-compose run --service-ports.

I've settled on a solution where I've separated running vue cli commands and running the dev server into separate services:

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

This lets me still use docker-compose run vue-cli for one-offs and to easily get a shell, while all serving of content is done by a dedicated service. (Adding an echo as the command for the vue-cli service ensures it immediately bails out on a docker-compose up.)

Upvotes: 2

Daniel
Daniel

Reputation: 35684

Use docker-compose up instead of docker-compose run which by default doesn't expose the ports (as you've noticed)

What’s the difference between up, run, and start?

Typically, you want docker-compose up. Use up to start or restart all the services defined in a docker-compose.yml. In the default “attached” mode, you see all the logs from all the containers. In “detached” mode (-d), Compose exits after starting the containers, but the containers continue to run in the background.

The docker-compose run command is for running “one-off” or “adhoc” tasks. It requires the service name you want to run and only starts containers for services that the running service depends on. Use run to run tests or perform an administrative task such as removing or adding data to a data volume container. The run command acts like docker run -ti in that it opens an interactive terminal to the container and returns an exit status matching the exit status of the process in the container.

The docker-compose start command is useful only to restart containers that were previously created, but were stopped. It never creates new containers.

src: https://docs.docker.com/compose/faq/

Upvotes: 0

Related Questions