Containerizing a Vue application does not display webpage on localhost

Question

I'm trying to containerize my vue application I created using vue-cli. I have a docker-compose.yml file that looks 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 exactly am I 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

Can you do a docker ps and edit your question with the output? — Bruno Francisco
– Bruno Francisco, Commented Oct 14, 2021 at 21:45
What's your final goal with this setup? It seems like you're trying to use some Node engine to run code that's on your host, without really using any of the Docker image system; would it be easier to install Node on the host as well and directly use node and npm commands? — David Maze
– David Maze, Commented Oct 14, 2021 at 22:56
Running at: http://localhost:8080/ is a warning sign to me; processes inside containers generally need to be listening on the special 0.0.0.0 "everywhere" address or else they won't be reachable from outside the container. Does How to Containerize a Vue.js app? describe your situation? — David Maze
– David Maze, Commented Oct 14, 2021 at 22:59

queeg · Accepted Answer · 2021-10-14 21:56:25Z

1

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?

answered Oct 14, 2021 at 21:56

queeg

9,9402 gold badges26 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Containerizing a Vue application does not display webpage on localhost

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related