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: