deploy angular and sprint boot app in azure kubernetes using docker and azure container registry

4/28/2021

I'm new to AKS, ACR, and DevOps Pipelines and I'm trying to setup a CI/CD pipeline for my application which uses Spring Boot backend and Angular frontend. Below is the azure pipeline yaml file that I am using

# Deploy to Azure Kubernetes Service
# Build and push image to Azure Container Registry; Deploy to Azure Kubernetes Service
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker

trigger:
- master

resources:
- repo: self

variables:

  # Container registry service connection established during pipeline creation
  dockerRegistryServiceConnection: 'c2ed88c0-0d3b-4ea1-b8e0-7cc40c5c81d3'
  imageRepository: 'pvedanabhatlarepoui'
  containerRegistry: 'pkvcontainerregistry.azurecr.io'
  dockerfilePath: '**/Dockerfile'
  tag: '$(Build.BuildId)'
  imagePullSecret: 'pkvcontainerregistry2152213e-auth'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'


stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)
    steps:
    - task: Maven@3
      inputs:
        mavenPomFile: 'party_ui_backend/pom.xml'
        goals: 'clean verify'
        publishJUnitResults: false
        javaHomeOption: 'JDKVersion'
        mavenVersionOption: 'Default'
        mavenAuthenticateFeed: false
        effectivePomSkip: false
        sonarQubeRunAnalysis: false
    - task: Docker@2
      displayName: Build and push an image to container registry
      inputs:
        command: buildAndPush
        repository: $(imageRepository)
        dockerfile: $(dockerfilePath)
        containerRegistry: $(dockerRegistryServiceConnection)
        tags: |
          $(tag)

    - upload: manifests
      artifact: manifests

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build

  jobs:
  - deployment: Deploy
    displayName: Deploy
    pool:
      vmImage: $(vmImageName)
    environment: 'pvedanabhatlarepoui-7912.default'
    strategy:
      runOnce:
        deploy:
          steps:
          - task: KubernetesManifest@0
            displayName: Create imagePullSecret
            inputs:
              action: createSecret
              secretName: $(imagePullSecret)
              dockerRegistryEndpoint: $(dockerRegistryServiceConnection)

          - task: KubernetesManifest@0
            displayName: Deploy to Kubernetes cluster
            inputs:
              action: deploy
              manifests: |
                $(Pipeline.Workspace)/manifests/deployment.yml
                $(Pipeline.Workspace)/manifests/service.yml
              imagePullSecrets: |
                $(imagePullSecret)
              containers: |
                $(containerRegistry)/$(imageRepository):$(tag)

Here is the deployment.yaml and service.yaml

apiVersion: apps/v1 
kind: Deployment    
metadata:              
  name: springboot-k8s-mssql
spec:                
  selector:         
    matchLabels:
      app: springboot-k8s-mssql
  replicas: 3        
  template:
    metadata:
      labels:        
        app: springboot-k8s-mssql
    spec:
      containers:
        - name: springboot-k8s-mssql
          image: pkvcontainerregistry.azurecr.io/pvedanabhatlarepoui
          ports:
            - containerPort: 80             
        
---
apiVersion: v1
kind: Service
metadata:
  name: springboot-k8s-mssql
  labels:
    name: springboot-k8s-mssql
spec:
    type: LoadBalancer
    ports:
    - port: 80      
    selector:           
        app: springboot-k8s-mssql
         

As you can see, I am using party_ui_backend/pom.xml in the azure pipeline yaml, and this pom is the one for spring boot back end. This got deployed successfully, as shown below.

NAME                                   READY   STATUS    RESTARTS   AGE
springboot-k8s-mssql-66876d98c-5rsj9   1/1     Running   0          58m
springboot-k8s-mssql-66876d98c-67xz5   1/1     Running   0          58m
springboot-k8s-mssql-66876d98c-rqzn6   1/1     Running   0          58m

Now I want to deploy angular front end also in the same deployment.yaml. How can I do this? Please let me know in case more details are needed.

-- Phani
angular
azure
docker
kubernetes
spring-boot

1 Answer

4/28/2021

You need to do build the docker container for the Angular application separately. Ideally, it should be deployed alongside the SpringBoot application. You will need a new build and deploy pipeline with a potentially separate manifests file.

Reference articles on how to build docker images for Angular apps:

-- Faheem
Source: StackOverflow