This post will show how to create a simple Vue.js single page application and host it in a docker container.

Create the application

Install the Vue command line interface (cli) from here. I’ll be using yarn for this example..

yarn global add @vue/cli

Create a new hello-world application and change into the application’s folder.

# this places the new application in a ./hello-world folder
vue create hello-world
cd hello-world
yarn install

Build a Docker image

Now that we have a working Vue.js application, we can put it in a container and serve it up using nginx.

We’ll use a multi-stage docker build to first build the application and the serve it.

Create a file called “Dockerfile” in the root directory of your project. It should look like this:

FROM node
WORKDIR /app
COPY package.json ./
COPY yarn.lock ./
RUN yarn install
COPY . .
RUN yarn build

FROM nginx
COPY --from=0 /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

After creating the Dockerfile, build the image.

docker build -t hello-world .

Now you can run a container with you application. Notice the exposed port 8080 that allows your application to be reached on that port.

docker run -d -p 8080:80 --name hello-world hello-world

You should be able to access your application at http://localhost:8080

Reference

Dockerize Vue.js App