How to deploy a Vue.js application to Kubernetes

Deploy Vue.js applications to Kubernetes in a few steps using DevSpace. Here are the commands we are going to use:

npm install -g vue-cli devspace
vue init webpack-simple my-vuejs-app && cd my-vuejs-app 
devspace init 
devspace create space my-vuejs-app 
devspace deploy 
devspace open

This is basically what these commands are doing:

Create a Vue.js app (or just use your own project)
Containerize our Vue.js app (Dockerfile & Helm Chart)
Deploy it to Kubernetes (to the namespace my-vuejs-app)
Stream the logs of the deployment

Prerequisites

We will use DevSpace, an open-source development tool for Kubernetes. Run this command to install DevSpace:

npm install -g devspace

1. Create a Vue.js Application (skip if you have one)

First, let’s install the Vue CLI globally:

npm install -g vue-cli

You might need to install it with sudo if you get _permission denied_ on Linux or Mac. Or better but more work: follow this guide to change your global NPM directory.

Let’s now ask Vue to setup a webpack template for us:

vue init webpack-simple my-vuejs-app 
cd my-vuejs-app

The application is now ready and we can deploy it to Kubernetes.

2. Containerize our Vue.js Application

To run our Vue.js app on Kubernetes, we need a Dockerfile and some Kubernetes manifests. Instead of creating these files manually, we can let DevSpace automatically create them for us with the following command:

devspace init

DevSpace will ask a couple of questions during the init command. Take a look at the following sections for more information.

Creating the Dockerfile for Vue.js

If you have no Dockerfile in your project, DevSpace will automatically detect that and suggest to create one for you.

If there is already a Dockerfile in your project, DevSpace will offer to use the existing Dockerfile instead of creating a new one.

? This project does not have a Dockerfile. What do you want to do? [Use arrows to move, space to select, type to filter] 
> Create a Dockerfile for me 
  Enter path to your Dockerfile 
  Enter path to your Kubernetes manifests 
  Enter path to your Helm chart Use existing image

Choose the first option Create a Dockerfile for me by hitting Enter and DevSpace will create a Dockerfile in your project directory.

Select Your Programming Language

Again, DevSpace will automatically detect your programming language (i.e. javascript), you just need to confirm by hitting Enter.

? Select the programming language of this project [Use arrows to move, space to select, type to filter] 
  java 
> javascript 
  none 
  php 
  python 
  ruby 
  typescript

Choose an Image Registry

DevSpace will build a Docker image from your Dockerfile. This image needs to be pushed to a Docker registry like Docker Hub.

? Which registry do you want to use for storing your Docker images? [Use arrows to move, space to select, type to filter] 
  Use hub.docker.com 
> Use dscr.io (free, private Docker registry) 
  Use other registry

If you already have a Docker Hub account, just select Docker Hub.

In case you don’t have a Docker Hub account or if you don’t know know which option to choose, you can just use dscr.io — it is fast, private and completely free. Once you selected dscr.io, DevSpace will open the login page. You can sign up with GitHub and it will take less than a minute.

Define The Application Port

Vue.js runs on port 8080 in dev mode. Type 8080 and hit Enter.

? Which port is your application listening on? (Enter to skip) 8080

It is important you type in the correct port. Otherwise, it will be a problem to open the app in the browser later on.

What just happened?

After the init command has terminated, you will find the following new files in your project:

my-vuejs-app/ 
 | 
 |--devspace.yaml 
 |--Dockerfile 
 |--.dockerignore

Besides the configuration for DevSpace in devspace.yaml, there is a new Dockerfile for building a Docker image for our Vue.js app which is needed to deploy the app to Kubernetes.

Dockerfile for Vue.js (for Development)

The Dockerfile will look like this:

FROM node:8.11.4  RUN mkdir /app 
WORKDIR /app  COPY package.json . 
RUN npm install  COPY . .  CMD ["npm", "start"] # <<<<<<< We need to change this

Note that this Dockerfile starts our Vue.js app in development mode.
For hosting the Vue.js app in production, it is recommended to use multi-stage Docker builds for creating static assets and then serve them with a web server such as nginx. I will publish a post about this very soon.

Subscribe to get an email about new articles if you are interested in reading my next post. But first, let’s continue with this tutorial…

The autogenerated Dockerfile is almost good to go. We just need to change the command used to start our app. If you open your package.json, you will see that there is no start command in the scripts. Instead, we want to run npm run dev. So, let’s change that in the Dockerfile like this:

FROM node:8.11.4 RUN mkdir /app 
WORKDIR /app COPY package.json . 
RUN npm install COPY . . CMD ["npm", "run", "dev"]

This Dockerfile:

defines node as base image
creates the working directory /app
copies the package.json into the image and installs the dependencies
copies the rest of our application into the working directory
defines npm run dev as the start command for the container

Adding the package.json separately and installing dependencies before adding the rest of the application allows Docker to use layer-caching and saves a lot of time when building the image because the dependencies will only have to be re-installed when the package.json has changed and not every time we change any other source code file.

Helm Chart For Vue.js

To start containers in Kubernetes, we need to define so-called Kubernetes manifests. Instead of using plain Kubernetes manifests, it is recommended to bundle them into a so-called Helm chart. Helm is the package manager for Kubernetes and a Helm chart is a package that can be installed into a Kubernetes cluster using the open-source CLI tool Helm.

By default, DevSpace deploys your application using the so-called component chart which is a standardized and highly configurable Helm chart. To customize the deployment of your app, you can edit the deployments section of the devspace.yaml config file which looks similar to this one:

... 
deployments: 
- name: my-vuejs-app 
  helm: 
    chart: 
      name: component-chart 
      version: v0.0.6 
      repo: https://charts.devspace.cloud 
    values: 
      containers: 
      - image: dscr.io/${DEVSPACE_USERNAME}/devspace 
      service: 
        ports: 
        - port: 8080 
...

3. Deploy Your Vue.js App

Now that our Vue.js app is containerized, we are ready to deploy it to Kubernetes. We just need to tell DevSpace which Kubernetes cluster to use.

Option A: Create a Free, Hosted Kubernetes Namespace

At this point, I could tell you to create a Kubernetes cluster on Google Cloud or AWS, but do we really need to create an entire Kubernetes cluster just for deploying our small Vue.js app?

If you don’t have a Kubernetes cluster yet, it is much easier to create a ready-to-go Kubernetes namespace using DevSpace:

devspace create space my-vuejs-app

This command will create a free Kubernetes namespace on DevSpace Cloud which is hosted on Google Cloud.

Option B: Use Your Own Kubernetes Cluster (e.g. minikube)

DevSpace would not be called swiss army knife for Kubernetes if it didn’t work with any Kubernetes cluster. So, if you already have a Kubernetes cluster and want to use this one instead, you can also use a namespace within your own cluster using the following command:

devspace use namespace my-vuejs-app

DevSpace will create the namespace during the deployment process if it is not existing.

Build & Deploy Your App

Usually, this part of the tutorial would explain how to manually build a Docker image, push it to a registry and mess around with kubectl commands.

However, DevSpace automates all of this and you will just need to run one single command to deploy your app:

devspace deploy

This command takes a little while when you run it the very first time. If you run it later again, it will be much quicker.

Now it’s time to open your project.

devspace open

When DevSpace asks you how to open your application, choose the first option: via localhost

? How do you want to open your application? [Use arrows to move, space to select, type to filter] 
> via localhost (provides private access only on your computer via 
  port-forwarding) 
  via domain (makes your application publicly available via ingress)

4. Start Development

If you want to edit your files and see how you app automatically reloads, simply run:

devspace dev

DevSpace will deploy the Vue.js app in dev mode, open the app in the browser and start streaming the logs of your application.

Wait until your app has started, change a file and see hot reloading in action. Happy coding!

Final Thoughts

This tutorial gives a quick overview of how to deploy a Vue.js app to Kubernetes using DevSpace. Vue.js as a frontend application might be quite easy to deploy using platforms such as Netlify etc., but using Kubernetes provides a great level of control and portability and is also suitable for backend applications. DevSpace works with every Kubernetes cluster and every programming language, which lets you unify the way you deploy applications across different projects.

As mentioned above, this tutorial does not provide an exhaustive guide for creating a fully production-ready deployment of a Vue.js app (e.g. because it uses a simple Dockerfile to start the Vue.js app in dev mode). However, this article can serve as a starting point for everyone that is interested in using Kubernetes.

If you have any questions regarding any of the steps I have shown above or regarding Vue.js deployments on Kubernetes in general, feel free to leave a comment. I am happy to help whenever I can.

#vue-js #kubernetes #devops #cloud