Docker container running vue-cli Welcome Page on localhost: This site can’t be reached

Question

Question

I would like to see the vue-cli welcome page in chrome, running from a Docker Container on my Mac. I am struggling to set up the proper configuration for this to work. What am I missing? Here is what I have tried.

Steps

Installed

1. Docker for Mac - 17.12.0-ce
2. npm 5.6.0
3. vue-cli 2.9.3

Command Line

1. $ vue init webpack docvue
2. $ cd docvue
3. $ npm install

Files

After running the commands above, I now have the vue example project ready to build with webpack.

$ ls
README.md       config          node_modules        package.json        static
build           index.html      package-lock.json   src

Within /docvue/ I can npm run dev, and I see:

> [email protected] dev /Users/dchaddportwine/Startup/docvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                        

 DONE  Compiled successfully in 4695ms                                                                              12:17:04 PM

 Your application is running here: http://localhost:8080

And in Chrome at http://localhost:8080/#/ I see the Vue Welcome page.

Build the Docker Image

Now it's time to build the Docker Image using this Dockerfile:

# base image
FROM node:8.10.0-alpine

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json ./

RUN npm install

# Bundle app source
COPY . .

EXPOSE 8080

CMD [ "npm", "start" ]

Command Line

$ docker build -t cportwine/docvue .
Successfully built 61bc30c3695b
Successfully tagged cportwine/docvue:latest

And now it's time to run the Docker image in a container:

$ docker run --rm -d cportwine/docvue
34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d

And check the logs:

$ docker logs 34ba43323723c046869775f6f00e11b895c4124680784ebcaff7f711c99fc82d

> [email protected] start /usr/src/app
> npm run dev


> [email protected] dev /usr/src/app
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 78% advanced chunk op DONE  Compiled successfully in 4383ms16:56:56                 

 Your application is running here: http://localhost:8080

Problem

In chrome, at http://localhost:8080/#/ I get "This site can't be reached".

The running container looks like this:

$docker container ls
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
34ba43323723        cportwine/docvue    "npm start"         7 minutes ago       Up 7 minutes        8080/tcp            agitated_payne

What if

What if I run the Docker container using the publish option:

$ docker run --rm -p3000:8080 -d cportwine/docvue
2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261

And check the logs:

$ docker logs 2f9dd0bf1caa11d96352012913eb58c7883e1db95a7ceb72e2e264184c368261

> [email protected] start /usr/src/app
> npm run dev


> [email protected] dev /usr/src/app
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 78% advanced chunk op DONE  Compiled successfully in 4438ms17:08:09                 

 Your application is running here: http://localhost:8080

Problem 2

Wait, is this better?

CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
2f9dd0bf1caa        cportwine/docvue    "npm start"         8 minutes ago       Up 8 minutes        0.0.0.0:3000->8080/tcp   zen_liskov

In chrome, at http://localhost:3000/#/ Now I get "This page isn’t working - localhost didn’t send any data."

But I do not see the Vue Welcome page.

Answer 1

Well you solved part of your problem... you NEED to publish the serving port (in this case 8080) to some port on your local machine (could also be 8080 or 3000 like you have), but it looks like you figured this out already.

The other problem is that the webpack-dev-server is using "localhost" for a host, which needs to be "0.0.0.0" to work in Docker. You can overwrite the host config using an environment variable, so try this command instead:

docker run --rm -p 8080:8080 -e "HOST=0.0.0.0" -d cportwine/docvue

The logs should say:

Your application is running here: http://0.0.0.0:8080

and you should be able to access the site in your browser at localhost:8080.

Since the vue setup is using webpack-dev-server, consider reading this for more info on how to use webpack + Docker: https://medium.com/@andyccs/webpack-and-docker-for-development-and-deployment-ae0e73243db4