[20주차 - DAY3] 웹 기반 문서 편집기 제작 프로젝트(7)

 

 

코드 커버리지

1. 프로젝트의 루트 아래에 있는 /frontend/tsconfig.json 파일과 backend/tsconfig.json 파일의 exclude가 다음과 같이 설정되어 있는지 확인한다.

"exclude": ["src/**/*.test.ts", "src/**/__mocks__/*.ts"]

2. 터미널에서 아래 명령어를 입력하여 코드 커버리지 패키지를 설치한다.

sudo npm i -g c8

3. 프론트엔드의 단위 테스트 (코드 커버리지)는 다음과 같이 수행한다.

c8 -r html -o coverage --all npm test -- --watchAll=false

4. 커버리지 보고서는 프로젝트 루트 아래에 있는 /frontend/coverage/index.html로 접속하면 확인할 수 있다.

5. 프로젝트 루트 폴더 아래의 /frontend/Makefile의 test 부분을 다음과 같이 수정한다.

test:
  npm ci
  c8 -r html -o coverage --all npm test -- --watchAll=false

6. 젠킨스 빌드 에이전트를 제작하기 위해 다음과 같이 Dockerfile을 작성한다.

그리고 젠킨스가 접근할 수 있도 컨테이너 이미지를 빌드하고, 레지스트리에 push 한다. 

FROM ubuntu:22.04

RUN apt update && apt upgrade -y
RUN apt install -y curl
RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
RUN apt install -y nodejs
RUN apt install -y make
RUN npm i -g c8

7. 젠킨스에서 새로운 파이프라인을 만들고, 파이프라인 스크립트를 다음과 같이 입력한다.

6에서 만들었던 젠킨스 빌드 에이전트를 builder라는 이름의 컨테이너에서 실행한다.

pipeline {
  agent {
    kubernetes {
      yaml'''
      apiVersion: v1
      kind: Pod
      spec:
        containers:
        - name: builder
          image: sheayun/jenkins-agent-node-18
          command:
          - cat
          tty: true
      '''
    }
 }
 stage("Checkout") {
    steps {
      git url: "git@github.com:sheayun/lecture.git",
        branch: "main",
        credentialsId: "github-credentials"
    }
  }
  stage("UT") {
    steps {
      script {
        container("builder") {
          sh'''
          (cd backend && make test)
          (cd frontend && make test)
          chmod -R 777 backend/coverage
          chmod -R 777 frontend/coverage
          '''
      }
    }
  }
  stage("Code Coverage") {
    steps {
      publishHTML(target: [
        reportDir: 'backend/coverage’,
        reportFiles: 'index.html’,
        reportName: 'Backend Coverage’
      ])
      publishHTML(target: [
        reportDir: 'frontend/coverage’,
        reportFiles: 'index.html’,
        reportName: 'Frontend Coverage’
      ])
    }
  }
}

8. JVM에서 예외가 발생했다는 에러가 뜨면  Manage Jenkins의 Nodes의 Built-In-Node의 Script Console에 다음과 같이 입력한다.

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

 

 

빌드 및 패키징

1. Production Build 스테이지를 추가한다.

stage("Production Build") {
  steps {
    script {
      container('builder') {
        sh '(cd backend && make node)’
        sh '(cd frontend && make node)’
      }
    }
  }
}

2. Agent 대체와 추가를 위해 파이프라인 스크립트를 다음과 같이 작성한다.

containers:
- name: jnlp
  image: sheayun/jnlp-agent-docker
  env:
  - name: DOCKER_HOST
    value: "tcp://localhost:2375"
- name: dind
  image: docker:latest
  command:
  - /usr/local/bin/dockerd-entrypoint.sh
  env:
  - name: DOCKER_TLS_CERTDIR
    value: ""
  securityContext:
    privileged: true

3. Dockerfile을 다음과 같이 작성한다.

FROM jenkins/inbound-agent

USER root

COPY entrypoint.sh /entrypoint.sh
RUN chown jenkins:jenkins /entrypoint.sh
RUN chmod +x /entrypoint.sh

RUN apt update
RUN apt install -y ca-certificates curl gnupg unzip

RUN curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
RUN echo \
    "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
    $(. /etc/os-release && echo \"$VERSION_CODENAME\") stable" > /etc/apt/sources.list.d/docker.list
RUN apt update
RUN apt install -y docker-ce-cli

# 아래 <arch> 의 자리에는 amd64, arm64 등 적절한 것을 기재해야 함 (두 군데)
ADD https://releases.hashicorp.com/terraform/1.6.6/terraform_1.6.6_linux_386.zip .
RUN unzip terraform_1.6.6_linux_386.zip
RUN mv terraform /bin && chmod +x /bin/terraform

USER jenkins

ENTRYPOINT ["/entrypoint.sh"]

4. 젠킨스 파이프라인 스크립트에서 환경 변수 설정을 다음과 같이 한다.

environment {
  REGISTRY_URI = "레포지토리 URL"
  IMG_NAME_BE = "notes-be"
  IMG_NAME_FE = "notes-fe"
  VERSION_TAG = "${BUILD_TIMESTAMP}"
  IMG_TAG_BE = "${REGISTRY_URI}/${IMG_NAME_BE}:${VERSION_TAG}"
  IMG_TAG_FE = "${REGISTRY_URI}/${IMG_NAME_FE}:${VERSION_TAG}"
  STAGING_URL = "http://localhost:30030"
}

5. 도커 빌드와 푸시를 수행하는 스테이지를 추가한다.

stage("Docker") {
  steps {
    script {
      def beImg = docker.build(
        "${IMG_NAME_BE}",
        "--platform=linux/amd64 -f backend/Dockerfile backend"
      )
      def feImg = docker.build(
        "${IMG_NAME_FE}",
        "--platform=linux/amd64 -f frontend/Dockerfile frontend"
      )
      docker.withRegistry(
        "https://${REGISTRY_URI}", "ecr:ap-northeast-2:AWS_CREDENTIALS"
      ) {
          beImg.push("${VERSION_TAG}")
          feImg.push("${VERSION_TAG}")
      }
    }
  }
}

6. Manage Jenkins의 Plugins에서 Amazon ECR plugin을 설치한다.

7. Manage Jenkins의 Credentials에서 AWS Credentials를 생성한다.

Access Key ID와 Secret Access Key에 AWS Console > IAM > Users에서 발급한 키를 각각 넣어준다.

8. 젠킨스에서 빌드한다.

 

 

스테이징 배포

1. /iac/staging.conf 파일을 다음과 같이 작성한다.

terraform {
  required_providers {
    kubernetes = {
      source = "hashicorp/kubernetes"
    }
    aws = {
      source = "hashicorp/aws"
    }
  }
  backend "s3" {
    bucket = "<Your bucket name here>"
    key = "staging"
    region = "ap-northeast-2"
  }
}

2. /iac/setup.conf 파일을 다음과 같이 작성한다.

variable "kubernetes_config_path" {
    default = "~/.kube/config"
}
provider "kubernetes" {
    config_path = var.kubernetes_config_path
}
provider "aws" {
    region = "ap-northeast-2"
}
resource "kubernetes_namespace" "ns" {
    metadata {
        name = "prgms-notes"
    }
}

3. /iac/frontend.tf 파일과 /iac/backend.tf 파일을 배포된 파일로 수정한다.

4. Staging 환경 변수 설정을 위해 /iac/staging.tfvars 파일을 다음과 같이 작성한다.

db_host = "notes-staging.prgms-fullcycle.com"
db_port = "3306"
db_user = "prgms"
db_passwd = "prgms"
db_name = "prgms_notes"
frontend_url = "https://notes-staging.prgms-fullcycle.com"
backend_url = "https://notes-staging.prgms-fullcycle.com/api"

5. 파이프라인 스크립트의 환경 변수를 다음과 같이 설정한다.

environment {
    REGISTRY_URI = "180993267331.dkr.ecr.ap-northeast-2.amazonaws.com"
    IMG_NAME_BE = "notes-be"
    IMG_NAME_FE = "notes-fe"
    VERSION_TAG = "${BUILD_TIMESTAMP}"
    IMG_TAG_BE = "${REGISTRY_URI}/${IMG_NAME_BE}:${VERSION_TAG}"
    IMG_TAG_FE = "${REGISTRY_URI}/${IMG_NAME_FE}:${VERSION_TAG}"
    STAGING_URL = "http://notes-staging.prgms-fullcycle.com"
}

6. ECR 접근 절차를 추가해 준다.

stage("Staging") {
    steps {
        withCredentials([
            file(credentialsId: 'KUBECONFIG_STG',
                variable: 'KUBECONFIG_PATH’),
    aws(credentialsId: 'AWS_CREDENTIALS')
    ]) {
        sh'''
        cd iac
        IMG_BE = "${IMG_TAG_BE}" \
            IMG_FE = "${IMG_TAG_FE}" \
            ./dpy-staging.sh on
        '''
        }
    }
}

7. 생성한 아이템을 빌드한다.

 

 

배운 점

• node, make, c8로 build agent를 제작하는 방법을 배웠다.
• 제작한 build agent로 SCM Checkout, Unit Test, Coverage Report Publishing 하는 법을 알게 되었다.