Alex's Coding Blog
  • Home
  • About
  • Projects
  • Contact me

Blog

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

  • January 10, 2020 January 28, 2020
  • 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:

DevOps How-to

Debugging microservices is always tricky and time consuming specially without proper code level logging in place.

Meet Konso. It's developed as a solution for this challenge and can help with saving development effort for your team up to 30%. 🎯🎉

The key functions are:

🔥 Centralized logging for your microservices
🔥 Tracing with metrics and value tracking events
🔥 Ad-Hoc events exploration
🔥 Saving your queries
🔥 Create alerts and get notified


You can start collecting you project's logs in 5 minutes. 🕐💪

To Learn more about logging tool, book a free demo.
To get started for free, Create your free account now

Alexander Lvovich

Solution Architect and Software Developer.

Share on:

No comments are allowed for this post

Recent Posts

  • Easily track and troubleshoot errors in your .NET 7 web app using Konso's logging feature
  • How to disable object model validation .NET 7
  • Keep Your Passwords Safe: 5 Tips for Protecting Yourself After the Latest LastPass Data Breach
  • How to ping from .net application container
  • Freelancing myths you should consider before dive in
  • How to set up a honey token for dotnet project with Konso

Categories

  • Azure
  • Architecture
  • .NET Core
  • Certification
  • DevOps
  • How-to
  • Azure Functions
  • Serverless
  • Cosmos DB
  • Security
  • Thoughts
© Copyright 2023, Alexander Lvovich. Theme by Colorlib