[Azure/Spring] FrontEnd 컨테이너화 및 CI/CD 구축

현재 BackEnd Server와 데이터베이스는 정상적으로 Azure 환경에서 구동 되었다. 다음으로 Vue.js 기반으로 구성되어진 Front(Web) 서버를 Azure AKS에 구동시켜 보겠다.

Front CI 구성

백엔드와 동일하게 Frontend 레포지터리에 .github/workflows/docker-image.yml 을 작성한다.

  # 업데이트된 Kustomize 설정 적용
  - name: Apply Kustomize resoureces
    run: |
      pwd
      cd gitops/frontend/overlays/dev
      kustomize edit set image $/jinni:front_$
      cat kustomization.yaml

Backend와 마찬가지로 현재 날짜를 기반으로 태그를 작성하며 Backend 이미지와 차별성을 위해 앞에 front_ 태그를 추가한다.

또한 Backend와 별도의 레포지터리로 운용되기에 Secret 항목 또한 설정해준다.

CI 파이프 라인도 백엔드와 동일하게 gitops 레포지터리에 FrontEnd용 디렉토리(gitops/frontend/overlays/dev)를 새로 생성하고 이미지로 말아 Azure Container Registry에 push 하도록 설정한다.

Action을 통한 ACR 이미지 push 하기

정상적으로 ACR에 백엔드 이미지와 프론트 이미지가 업로드 되어진 것을 확인할 수 있다.

Front CD 구축

구현 목표는 BackEnd용 Pod과 FrontEnd Pod을 별개의 Pod과 Service로 구현하는 것이다.

이를 통해 독립적인 배포 작업(BackEnd 수정시 BackEnd Action만 깃에서 수행되고 롤링 업데이트)를 추구한다. 또한 특정 부분만 스케일링이 가능하다.

단, 두 Pod의 통신 방식에 대해 별도의 설정이 필요하다.. (이 부분이 결국 큰 이슈가 되었다.)

독립적인 Pod으로 기동 위해 gitops에 별도의 쿠버네티스 yml 파일을 업로드하였다.

새로 작성된 yml 파일을 바탕으로 ACR에서 이미지를 pull 받아 정상적으로 pod 실행된 것을 ArogCD에서 확인 할 수 있다.