How to deploy a Vue.js app to Azure Kubernetes Service

In 2020, the project seems to be unthinkable without proper CI/CD process setup. There's plenty of platforms to satisfy anyone's taste. The only concern is to define the right strategy that fits your needs. In the next few posts, I would like to introduce the concept I used in my last project. In this post, I going to talk about the front-end deployment strategy to Azure Kubernetes Service.

I must admit, this is not the optimal solution for the modern front-end application. You can easily deploy vue.js application to Azure Storage static website for example: after all, the build folder contains only HTML and js files. But rather for the case, you would like to run everything in "one place", which was a requirement for one of my recent projects.

Suppose you have two apps both written using vue.js framework. The applications are talking with REST APIs and everything should be deployed to AKS.

Requirements

• Deploy front end application to 3 environments:
  • Development
  • Qa
  • Production
• Every environment has own configuration e.g API and OAuth

How are you going to do that?

The .Net Core API deployment is super easy since .NET runtime knows how to take proper configuration according to ASPNETCORE_ENVIRONMENT, refer for details. You just build docker images containing configuration for all environments and runtime knows how to pick up the right one.

Comparing to the backend, the front-end app's configuration can't be changed during the runtime. Since vue.js, in general, is a client-side application, which is delivered as HTML and js files to the user's browser. Thus, the static files: index.html and Co. should have proper configuration embedded before sending them to the user's browser. When it comes to docker images for such application the proper config should be injected during the build.

Note: in this example we are going to use vue-cli runtime

First, we extended package.json script section to include proper deployment commands.

"deploy-dev": "vue-cli-service build --mode dev",
"deploy-qa": "vue-cli-service build --mode qa",
"deploy-prod": "vue-cli-service build --mode prod",

The vue-cli has cool support for environmental variables. In short, it knows how to inject the right config file .env. while building the app.

.env.dev
.env.qa
.env.prod

Then in each file, we define settings need to be injected. Each setting key should have VUE_APP_ as prefix otherwise variable will not be included.

VUE_APP_API_URL = "https://devapi.domain.com"

Secondly, we will need to build docker images with proper variables. The simplest way is to create Dockerfile per environment.

Dockerfile.dev
Dockerfile.qa
Dockerfile.prod

Dockerfile example

FROM alpine:3.9 as build-stage

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run deploy-{mode}

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

EXPOSE 80

#start nginx and keep the process from backgrounding and the container from quitting

CMD ["nginx", "-g", "daemon off;"]

You will have to compile the docker image before deploying it to each environment.

Happy deployment :wink:

Questions and answers

1. How do I handle environment-specific configurations (e.g., API endpoints) for my Vue.js app when deploying to Azure Kubernetes?

To handle environment-specific configurations in a Vue.js app deployed to Azure Kubernetes, you can use environment variables and Kubernetes ConfigMaps or Secrets. Here's how:

• Step 1: Define Environment Variables in Vue.js
  Use .env files for different environments (e.g., .env.development, .env.production). For example:

  VUE_APP_API_URL=https://api.example.com
  

  Access these variables in your Vue.js app using process.env.VUE_APP_API_URL.

• Step 2: Create build script for the environment
  Since its client side application (no node behind) the variable injected during build. So you will need add a script to your package.json file. For example:

  
  scripts: {
    "deploy-dev": "vue-cli-service build --mode dev"
  }
  
  

This approach ensures your app uses env.{env} for relevant variables.

2. What are the best practices for monitoring and scaling the Vue.js app once it’s deployed on Azure Kubernetes?

To monitor and scale your Vue.js app on Azure Kubernetes, follow these best practices:

Logging and Monitoring:

• Provider Monitoring: You can use monitoring tooling depending on your cloud provider.
• Custom monitoring tools: Integrate custom tools into your Vue.js app to track frontend performance, such as Sentry or Datadog.

Scaling:

• Horizontal Pod Autoscaler (HPA): Configure HPA to automatically scale the number of pods based on CPU or memory usage. Example:

  apiVersion: autoscaling/v2
  kind: HorizontalPodAutoscaler
  metadata:
    name: vue-app-hpa
  spec:
    scaleTargetRef:
      apiVersion: apps/v1
      kind: Deployment
      name: vue-app
    minReplicas: 2
    maxReplicas: 10
    metrics:
      - type: Resource
        resource:
          name: cpu
          target:
            type: Utilization
            averageUtilization: 80
  

• Cluster Autoscaler: Enable the Kubernates cluster autoscaler to automatically adjust the number of nodes in your cluster based on workload demands.