使用 docker 和 azure 容器注册表在 azure kubernetes 中部署 Angular 和 Spring Boot 应用程序

Posted 2023-02-27

【中文标题】使用 docker 和 azure 容器注册表在 azure kubernetes 中部署 Angular 和 Spring Boot 应用程序

【英文标题】：deploy angular and sprint boot app in azure kubernetes using docker and azure container registry

【发布时间】：2021-07-22 02:09:05

【问题描述】：

我是 AKS、ACR 和 DevOps 管道的新手，我正在尝试为使用 Spring Boot 后端和 Angular 前端的应用程序设置 CI/CD 管道。 下面是我正在使用的天蓝色管道 yaml 文件

# 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)

这里是deployment.yaml和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
         

如您所见，我在 azure 管道 yaml 中使用了 party_ui_backend/pom.xml，而这个 pom 是用于 spring boot 后端的。这样就部署成功了，如下图。

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

现在我想在同一个 deployment.yaml 中部署 Angular 前端。我怎样才能做到这一点？如果需要更多详细信息，请告诉我。

【参考方案1】：

您需要单独为 Angular 应用程序构建 docker 容器。理想情况下，它应该与 SpringBoot 应用程序一起部署。您将需要一个新的构建和部署管道，其中包含一个可能单独的清单文件。

关于如何为 Angular 应用构建 docker 镜像的参考文章：

https://dzone.com/articles/how-to-dockerize-angular-app https://developer.okta.com/blog/2020/06/17/angular-docker-spring-boot#create-a-docker-container-for-your-angular-app