파이널 프로젝트 - 16주차 2일(4/4)

최수환·2023년 4월 4일

CI/CD final project kubernetes

Kubernetes

목록 보기

71/75

Frontend-User 도커라이징

이전까지 작업으로 Frontend-Admin 과 Backend , DB 연결을 마무리하였고, Frontend-Admin과 Backend의 CI/CD 파이프라인 구축작업을 마무리하였다.
이제 실제로 User가 보는 웹페이지를 배포하기 위해 Frontend-User 코드를 빌드하여 이미지화 시키는 도커라이징 작업을 진행할 것이다.

1 . 테스트용 인스턴스 접속

이전에 Frontend-Admin 도커라이징 테스트하였던 인스턴스에 접속하거나, 새로 인스턴스를 생성하여 접속한다
-> 만약 새로운 인스턴스라면 docker , mysql, nginx 등의 환경을 구성해야 한다.

2 . git 가져오기

개발자분의 Frontend - User 코드를 clone을 통해 가져온다

3 . nginx환경 변수파일 생성 및 기타 설정

Frontend-Admin에서 사용하였던 nginx.conf파일을 그대로 다시 작성한다.
Frontend-Admin과 마찬가지로 vite.config.js에서 Backend 퍼브릭 주소를 등록한다.

4 . Dockerfile 작성

이것도 마찬가지로 Frontend-Admin에서 사용하였던 Dockerfile을 그대로 가져와 다시 작성한다.

5 . Dockerfile 빌드

docker build -t test . # Dockerfile 빌드
docker run -it --name testweb -p 8080:80 test:latest # 생성한 이미지로 컨테이너 실행

브라우저에 인스턴스 퍼블릭IP:8080 을 입력했을 때 정상적으로 User페이지가 나타나는 것을 확인
User페이지는 Admin페이지에서 학생을 등록해주지 않는다면
ID / Passwd 정보가 DB에 없기 때문에 로그인이 되지않고 에러가 발생한다.

K8s 오브젝트 생성 및 수정

도커라이징 테스트가 완료되었기 때문에 기존의 EKS 클러스터의 오브젝트를 수정할 것이다
Admin과 User 웹페이지를 구성하는 이미지가 각각 존재한다. 따라서 각 이미지로 서로 다른 파드를 띄울 것이다. 그러기위해 기존에 Front-Deployment를 복사하여 하나 더 만들고,
Front-Deployment-User와 Front-Deploymnet-Admin으로 나눈다. 마찬가지로 Front-svc-User와 Front-Deployment-Admin으로 서비스도 나눈다.
이렇게 나눈 서비스와 디플로이먼트의 yaml파일에는 이름을 User와 Admin을 구분해서 수정하고, label이 match되도록 유의해서 수정한다.
아직 User에 대한 파이프라인은 구축하지 않았기 때문에 User Deployment에는 임시적으로 위에서 도커라이징한 이미지를 사용한다.

Front-ingress.yaml 수정

. . . 

spec:
  rules:
  - host: "k8s-finalproject.com"
    http:
      paths:
      - path: / # 루트경로
        pathType: Prefix
        backend:
          service:
            name: front-svc-user # 유저페이지 연결 
            port:
              number: 80
      - path: /manager # manager 경로
        pathType: Prefix
        backend:
          service:
            name: front-svc-admin # Admin페이지 연결 
            port:
              number: 80

User가 그냥 https://도메인 만 입력했을 경우 유저 페이지에 접속할 수 있고, Admin이 https://도메인/manager 를 입력한 경우 어드민 페이지에 접속할 수 있도록 Front-ingress에서 다중경로를 설정하였다.

클러스터 오브젝트 추가 및 수정이 완료되면 add, commit, Push를 통해 ArgoCD가 변화를 감지할 수 있게 하였다.

ArgoCD는 추가되고 수정된 오브젝트들을 반영해서 새로 배포하는 것을 확인.
📌 이때 기존에 존재하던 Front-svc의 NodePort가 지워지지않아 새로운 Front-svc-User의 NodePort와 중복되는 현상이 발생했는데 수동으로 Front-svc를 삭제하니 해결되었다.
📌 마찬가지로 새로운 Front-Deploy-User / Admin이 기존의 Deployment와 Affinity가 충돌하는 경우가 발생하였는데 이때도
수동으로 기존의 Deployment를 삭제하니 해결되었다.

ArgoCD의 배포가 완료된 후 브라우저에 https://도메인 을 입력했을 때 User페이지 , https://도메인/manager 를 입력했을 때는 Admin페이지가 정상적으로 나타나는 것을 확인하였다.

Frontend-User CI/CD 파이프라인

User-Frontend 코드를 도커라이징한 이미지를 ArgoCD로 배포했을 때 User와 Admin이 구분되어 페이지가 나타는 것을 확인하였고, 각 페이지가 Backend와 연결되어 DB와의 상호작용에도 문제가 없는 것을 확인하였다.
그러므로 Jenkins를 이용하여 Front-User의 CI/CD 파이프라인을 구축할 것이다.

1 . git 코드 가져오기

개발자분의 User-Frontend 코드를 Fork해서 가져온뒤 ssh주소를 나의 WorkDir에 Clone했다.

2 . nginx 환경변수 파일 생성 및 기타 설정

위의 도커라이징 단계와 마찬가지로 nginx.conf파일 작성 및 vite.config.js파일을 수정하였다.

3 . Dockerfile 작성

FROM node:lts-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:stable-alpine
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx",  "-g", "daemon off;"]

Admin-Frontend의 도커파일과 동일하기 때문에 자세한 설명은 생략하겠다.

4 . Jenkinsfile

pipeline{
    agent{
        kubernetes{
yaml '''
apiVersion: v1
kind: Pod
spec:
  containers:
  - name: gradle
    image: gradle:8.0.2-jdk11
    command: ['sleep']
    args: ['infinity']
  - name: kaniko
    image: gcr.io/kaniko-project/executor:debug
    command: ['sleep']
    args: ['infinity']
    volumeMounts:
    - name: registry-credentials
      mountPath: /kaniko/.docker
  volumes: 
  - name: registry-credentials
    secret:
      secretName: regcred  
      items:
      - key: .dockerconfigjson
        path: config.json
'''
      }
    }

    stages{
        stage('checkout'){
          steps{
            container('gradle'){
              git branch: 'main', url: 'https://github.com/suhwan12/course-registration-GoormUniversity-user.git'
              } 
            }
        }
        stage('npm install & npm Build & Docker Build & Tag Docker image'){
          steps{
            container('kaniko'){
                    sh "executor --dockerfile=Dockerfile \
                    --context=dir://${env.WORKSPACE} \
                    --destination=suhwan11/frontend-user:latest \
                    --destination=suhwan11/frontend-user:${env.BUILD_NUMBER}"
                }
            }
        }
        stage('Update K8s to New Frontend Deployment'){
          steps{
            container('gradle'){
                git branch: 'main' , url:'https://github.com/suhwan12/finalproject-argocd.git'
                sh 'sed -i "s/image:.*/image: suhwan11\\/frontend-user:${BUILD_NUMBER}/g" front-deployment-user.yaml'
                sh 'git config --global user.name suhwan12'
                sh 'git config --global user.email xman0120@naver.com'
                sh 'git config --global --add safe.directory /home/jenkins/agent/workspace/Frontend-Pipeline-User'
                sh 'git add front-deployment-user.yaml'
                sh 'git commit -m "Jenkins Build Number - ${BUILD_NUMBER}"'
                withCredentials([gitUsernamePassword(credentialsId: 'github-credentials', gitToolName: 'Default')]) {
                    sh 'git push origin main'
                }
            }
          }
        }
    }
}