Azure Devops/Containers – Deploy Angular Application

As a short description, Azure Devops is end-to-end cloud based Devops environment to provide continuously build, test, and deploy to any platform. In this post, I’m gonna containerize an Angular application and push as docker container to Azure Containers.

Then every software develop in this application will automatically build and deploy to related environment.

Azure Containers is a product to deploy and manage containerized applications.

Steps:

1-Create an Angular application and Docker File
2-Create Kubernetes Cluster and Container Registry on Azure Containers
3-Create Pipeline and connect Azure Docker Registry on Azure Devops
4-Build and Deploy the App

After installation Node.js and Angular CLI on PC, first off, basically let’s prepare an application with these commands:

ng new kadirtest(app name is here)

to run project:

ng serve

and:

ng build

Build command stands for compiling the app but no need at this point, was just an introduce the command.

To complete application command to execute:

npm run build

In the path of local project once I run “code” command in cmd app is ready to open in VS Code:

Assume you performed GIT clone project stored Azure Repo. Here is working space in VS Code:

Next step is preparing Dockerfile.

Add a file named Dockerfile into project and fill it like:

### Build ###

FROM node:12.7-alpine AS build

WORKDIR /usr/src/app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

RUN npm run build

### Run ###

FROM nginx:1.17.1-alpine

COPY nginx.conf /etc/nginx/nginx.conf

COPY –from=build /usr/src/app/dist/kadirtest /usr/share/nginx/html

Second, add a file names nginx.conf:

events{}http { include /etc/nginx/mime.types; server { listen 80;

server_name localhost;

root /usr/share/nginx/html;

index index.html; location / {

try_files $uri $uri/ /index.html;

}

}

}

Creating K8S cluster on Azure Containers:

Select resource – Kubernetes service to create cluster:

Give the Resource Group name:

Select one of Node size templates:

Creating Container Registry:

Subscribe to Azure Portal to configure services you need. To build Azure CR, give registry name and select resource group you created before:

Here we are ready:

Creating Pipeline:

On Azure Devops go to project overview and select the repository:

Select Azure Repos Git and project stores code:

We have already subscription to Azure Containers service so select your Azure account:

Select container registry and leave the options as shown:

On review section, Pipeline YAML file is created. Save and run:

After run command pipeline job is started and passed Build and Deploy stage:

Have a look Kubertenes that container is UP and running:

Click on URL that shows with external IP and application is running on docker container: