Containerizing a Vue application does not display webpage on localhost-CodePudding

I'm trying to containerize my vue application created from vue-cli. I have a docker-compose.yml looking like this:

version: '3.8'
services:
  npm:
    image: node:current-alpine
    ports:
      - '8080:8080'
    stdin_open: true
    tty: true
    working_dir: /app
    entrypoint: [ 'npm' ]
    volumes:
      - ./app:/app

I have in the same directory the docker-compose.yml and the /app where the vue source code is located.

/vue-project
    /app (vue code)
    /docker-compose.yml

I install my node dependencies:

docker-compose run --rm npm install

They install correctly in the container as I see the folder appear in my host.

I am running this command to start the server:

docker-compose run --rm npm run serve

The server starts to run correctly:

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

  Note that the development build is not optimized.
  To create a production build, run npm run build.

But I cannot access it at http://localhost:8080/ from my browser. I've tried different ports, I've also tried to run the command like this:

docker-compose run --rm npm run serve --service-ports

But none of this works. I've looked at other dockerfiles but they are so different from mine, what am I exactly doing wrong here?

docker ps -a

is showing these:

CONTAINER ID   IMAGE                 COMMAND                  CREATED             STATUS                           PORTS     NAMES
cf0d5bc724b7   node:current-alpine   "npm run serve --ser…"   21 minutes ago      Up 21 minutes                              docker-compose-vue_npm_run_fd94b7dd5be3
ff7ac833536d   node:current-alpine   "npm"                    22 minutes ago      Exited (1) 22 minutes ago                  docker-compose-vue-npm-1

CodePudding user response：

Your compose-file instructs docker to expose the container's port 8080 to the host's port 8080, yet your docker ps output shows the container is not listening.

Is it possible your containerized app is not listening on 8080?

CodePudding user response：

After seeing your docker ps output I noticed that you have no ports exposed. You need to update your docker-compose.yml file to expose the port 8080.

version: '3.8'
services:
  npm:
    image: node:current-alpine
    ports:
      - '8080:8080'
    stdin_open: true
    tty: true
    working_dir: /app
    entrypoint: [ 'npm' ]
    volumes:
      - ./app:/app
    expose:
      - "8080"

Feel free to read the docs here