Alex's Coding Blog
  • home
  • about
  • projects
  • contact

Blog

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

  • January 28, 2020 March 11, 2025
  • by Alexander

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.
DevOps How-to

๐Ÿš€ Turbocharge Your Kubernetes Cluster with my Terraform Kits! ๐Ÿš€

๐ŸŒŸ Slash deployment time and costs! Discover the ultimate solution for efficient, cost-effective Kubernetes Terraform Kits. Perfect for DevOps enthusiasts looking for a reliable, scalable setup.

Learn More about Terraform Kits for AKS,EKS and GKE

Alexander Lvovich

Solution Architect & Software Developer | Automating & Scaling Infrastructure

๐Ÿ’ก Working with Kubernetes, Istio, and DevOps. Got questions? Feel free to reach out!

Share on:

No comments are allowed for this post

Recent Posts

  • Securing Web Services Against Unwanted Traffic with NGINX
  • Optimizing API by Offloading Responsibilities to an API Gateway
  • How to Clean Up Local Branches of Remote Merged Branches
  • Resolving Namespace Overriding in Argo CD with Kustomize
  • Connecting to Gitlab's private Nuget registry
  • Why Istio?

Categories

  • Azure
  • Architecture
  • .NET Core
  • Certification
  • DevOps
  • How-to
  • Azure Functions
  • Serverless
  • Cosmos DB
  • Security
  • Thoughts
  • Kubernetes
  • Istio
ยฉ Copyright 2025, Alexander Lvovich. Theme by Colorlib
I use cookies and similar technologies on our website to enhance your browsing experience and analyze website traffic. By clicking "Accept," you consent with my Privacy Policy to the use of these technologies.
Accept