Building Docker for vuejs app

Question

I have a problem when building docker for vuejs app

I have a vuejs app and now I want to build a docker image for it

This is my Dockerfile

 FROM node:7.7.2-alpine
 WORKDIR /usr/app
 COPY package.json .
 RUN npm install --quiet
 COPY . .
 EXPOSE 8080

And This is my docker-compose.yml file

version: '2'

services:
   web:
      build: .
      command: npm run dev
      volumes:
         - .:/usr/app
         - /usr/app/node_modules
      ports:
         - "8080:8080"

When I run command docker-compose up. I get this result:

But when I access the url http://localhost:8080 on my host. I get this:

I don't know exactly what happened. Please help me to fix this problem.

Thank you so much.

These are my source code folders:

Answer 1

By default npm run dev binds to localhost only.

Add --host 0.0.0.0 to your webpack-dev-server line in package.json:

From something like:

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

To something like (add --host 0.0.0.0):

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",