Frontend 와 Backend 연결

• 지난번 작업에서의 405에러를 잡기위해 많은 자료조사를 한 결과 백엔드에 연결이 안되어있다는 것을 알 수 있었고, nginx가 405에러를 지원을 하지 않기 때문이라는 자료를 찾았다.
• 따라서 nginx에러를 잡는다면 해결될 것이라 생각하였다.
• 또한 Frontend 설정에서도 Backend 주소를 등록해서 연결해줘야하지만, nginx에서도 Backend 주소를 입력해 연결해주어야 한다.

<nginx 에러 해결>

vi nginx.conf

server {
  listen 80;
  client_max_body_size 5M;
  server_name _;

  location /api {
    proxy_pass <Backend 주소>; # http 주소 사용 
    proxy_buffer_size   128k;
    proxy_buffers       4 256k;
    proxy_busy_buffers_size 256k;
  }


  location / {
    root /usr/share/nginx/html/;
    index index.html;
    error_page 405 =200 $uri; # 405에러 설정 
    try_files $uri $uri/ /index.html;
  }
}

• 405에러를 해결하기 위한 코드를 추가하였다.
• nginx자체에서도 Backend주소를 등록함으로써 Backend와 연결시켰다
• 처음에는 https를 사용한 주소를 입력하였는데 , 에러가 발생했다. 하지만 http를 사용하니 에러가 발생하지 않았다.
  -> 브라우저에서는 https를 이용하여 접속 가능

vi vite.config.js

. . .
    server:{
          proxy:{
            "/api":{
              target: "<Backend 주소>/api/", # http 주소 사용 
              rewrite: (path)=>path.replace(/^\/api/,""),
            },
          }
        }
. . .

• 개발자분의 Frontend 코드에서도 설정파일에서 Backend주소를 등록해준다.

결과 테스트

• 브라우저에 https://도메인 을 입력하여 로그인페이지에서 정상적으로 회원가입과 로그인되는 것을 확인
• DB에도 정보가 저장되있는 것을 확인

• 로그인후 서비스에 접속하면 admin페이지 이므로 교직원, 학생 ,교수 ,전공 , 강의등을 관리할 수 있는 기능이 존재한다.

📒 아직은 개발이 완료되지 않았기 때문에 파이프라인 구축 후 계속해서 개발이 추가될 것이다.

Frontend CI/CD 파이프라인

• 지금까지 개발한 Frontend 코드의 도커라이징을 해보았고, 생성한 이미지를 배포하여 Backend와 연결이 잘 되는지 확인하였다.
• 또한 Backend와 DB연결을 확인하였기 때문에 3-Tier 구성이 완료되었다. 이미 Backend CI/CD 파이프라인 구축은 완료가 되었기 때문에 앞으로는 Frontend CI/CD 파이프라인 구축을 진행할 것이다.
• Jenkins 파이프라인 구축에 앞서 NodeJS 플러그인을 설치해준다

1 . 설정파일 추가 및 백엔드 연결

• 일단 개발자분의 프론트엔드 코드를 Fork해서 가져온뒤 ssh주소를 나의 workDIR에 clone하여 연결시킨다
• 이후 위에서와 같이 vite.config.js에 들어가 Backend 주소를 연결한다.
• 이후 위에서와 같이 현재 디렉터리에 nginx.conf파일을 생성해준다.

2 . Jenkinsfile

pipeline{
    agent{
        kubernetes{
yaml '''
apiVersion: v1
kind: Pod
spec:
  containers:
  - name: gradle
    image: gradle:8.0.2-jdk11 # nodejs가 아닌 gradle 선택 
    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'){ # gradle에서 작업
              git branch: 'main', url:'https://github.com/suhwan12/course-registration-GoormUniversity-admin.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:latest \
                    --destination=suhwan11/frontend:${env.BUILD_NUMBER}"
                }
            }
        }
        stage('Update K8s to New Frontend Deployment'){
          steps{
            container('gradle'){ # gradle에서 작업 
                git branch: 'main' , url:'https://github.com/suhwan12/finalproject-argocd.git'
                sh 'sed -i "s/image:.*/image: suhwan11\\/frontend:${BUILD_NUMBER}/g" front-deployment.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'
                sh 'git add front-deployment.yaml'
                sh 'git commit -m "Jenkins Build Number - ${BUILD_NUMBER}"'
                withCredentials([gitUsernamePassword(credentialsId: 'github-credentials', gitToolName: 'Default')]) {
                    sh 'git push origin main'
                }
            }
          }
        }
    }
}

• 이전에 Backend 파이프라인 구축에서는 dockerfile을 빌드하기 이전에 gradle을 이용하여 install 및 build를 진행하였고, 이후에 kaniko를 이용해 dockerfile을 빌드해서 이미지를 Docker Hub에 Push하였다.
• 하지만 Frontend 파이프라인에서는 굳이 dockerfile을 빌드하기 이전에 npm install & npm build를 하지 않고, 그냥 multi-builder를 사용하여 dockerfile내에서 npm install & npm build를 진행하고 nginx 웹서버에 올리기 & 설정파일 전달 의 작업을 하였다.
• nodejs 이미지를 이용하여 Agent에 container로 생성해놓았고, 마지막 stage에서 해당 container를 일시적으로 띄워서 작업을 수행했는데 git 명령어를 찾을 수 없다는 에러가 발생했다. 이를 해결하기위해 nodejs이미지가 아닌 Backend에서 사용했던 gradle이미지를 이용하여 container를 생성했고, 해당 container를 지정해서 마지막 stage를 작업하였더니 신기하게도 정상적으로 수행되었다.

📒 내 생각으로는 nodejs를 통해 자동으로 설치된 npm에는 git명령어가 내장되어 있지 않지만, gradle은 git명령어가 내장되어있기 때문이라고 생각한다.
📒 그게 아니라면 stage를 나누지 않고, multi-builder를 이용하여 kaniko 컨테이너에서 모두 작업을 했기 때문에 마지막 stage에서 nodejs컨테이너의 환경에는 필요한 설정들이 존재하지 않기 때문이라고 생각한다.

3 . Dockerfile

FROM node:lts-alpine AS builder # nodejs 이미지 사용 
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build 
# npm install & npm build

FROM nginx:stable-alpine # nginx 이미지 사용 
COPY ./nginx.conf /etc/nginx/conf.d/default.conf # nginx환경변수 설정파일 전달
COPY --from=builder /app/dist /usr/share/nginx/html 
# npm build를 통해 나온 dist파일을 nginx에 전달 = nginx 웹서버에 올리기
EXPOSE 80
CMD ["nginx",  "-g", "daemon off;"]

• multi-builder를 사용한 Dockerfile 작성

결과 테스트

• Jenkins를 이용하여 구축한 Frontend-pipeline의 빌드가 정상적으로 되는 것을 확인

• Docker Hub에 빌드순서와 latest로 각각 tag가 생성되어 Push된 것을 확인

• ArgoCD와 연동중인 Git의 front-deployment.yaml에 새로운 commit이 Push된 것을 확인

• 해당 yaml파일을 들어가보면 실제로 Docker Hub에 Push되었던
  새 이미지로 교체되어있는 것을 확인

• 새로운 이미지로 생성된 컨테이너를 가진 파드를 Deployment가 Rolling Update로 배포하는 것을 ArgoCD로 확인

• 브라우저에 https://도메인 을 입력하면 로그인페이지가 나타나고 회원가입 및 로그인을 하면 정상적으로 수강신청 관리자 페이지가 나타나는 것을 확인할 수 있다.

명일 계획

• 오늘까지해서 Frontend 파이프라인 구축을 완료하였다.
• 3-Tier 연결도 완료하였다.
• 하지만 Frontend는 유저가 보는 페이지와 관리자가 보는 페이지가 나누어져서 개발되었고, 각각을 따로 이미지화 시켜서 파드로 배포할 것이다. 따라서 지금까지의 Frontend는 관리자페이지를 위한 작업이였고, 앞으로 할 것은 User페이지를 위한 Frontend 작업을 수행할 것이다.
• User Frontend의 도커라이징 테스트 및 파이프라인 구축 작업을 마무리하면 추가 Deployment와 Service를 구축할 것이고, Ingress의 다중경로를 이용하여 User웹과 Admin웹을 나눌 것이다.