Day 63 - 웹 기반 문서 편집기 제작 프로젝트 (3)

이유승·2025년 3월 17일

* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.


6-01. AWS 활용 계획

주요 내용

AWS 인프라 활용 전략

  • 다양한 응용(웹/모바일, 빅데이터/인공지능 등)을 on-demand로 서비스할 수 있도록 AWS 인프라 활용
  • IaaS 모델에 가까운 AWS 서비스를 통해 유연한 확장 및 안정적 운영이 가능

실습에서의 AWS 활용

  • EC2:
    • Minikube 클러스터, 웹 서버(Nginx), DB(MariaDB) 등 구성
  • ECR:
    • 컨테이너 이미지 관리
  • S3:
    • Terraform 상태 데이터 저장
  • AMI:
    • 동일한 구성의 인스턴스를 빠르게 실행할 수 있도록 AMI 생성

장단점 및 고려 사항

  • 장점: 유연한 확장, Pay-as-you-go, 다양한 도구 및 문서 지원
  • 단점: 비용 관리, 복잡한 초기 설정 및 익숙해지는 데 시간 소요

6-02. 배포 환경의 설정

주요 내용

EC2 인스턴스 생성 및 네트워크 설정

  • 각자 부여된 도메인 네임 및 Elastic IP를 이용하여 EC2 인스턴스 생성
  • .pem 키 파일을 통한 SSH 접속 및 보안 그룹(Security Group) 설정
    (포트: 22, 80/443, 3306, 8443 등)

Minikube 클러스터 준비

  • EC2 인스턴스에서 Minikube를 활성화하여 Kubernetes 클러스터 구성
  • 클러스터 접근을 위해 로컬 컴퓨터에 필요한 인증 파일 설정
    (예: ~/.minikube/ca.crt, client.crt, client.key 등)

실습 순서 및 확인 사항

  • AWS 콘솔 로그인, 비밀번호 및 MFA 설정
  • 인스턴스 생성 후 Elastic IP 연결, SSH 접속 및 Minikube 활성화
  • 클러스터 상태 및 각종 서비스(브라우저, MySQL) 접근 확인

6-03. 배포 도구의 설정

주요 내용

Amazon ECR 및 S3 활용

  • ECR:
    • ECR 리포지토리 생성, AWS CLI를 이용한 Docker 로그인 및 이미지 푸시/풀
  • S3:
    • S3 버킷 생성하여 파일 업로드 및 Terraform 상태 데이터 저장

실습 절차

  • AWS 액세스 키 생성 및 CLI 설정
  • 이미지에 태그 부여 후 ECR에 푸시
    → 로컬에서 이미지 삭제 및 재풀 테스트 진행

6-04. 배포 환경 테스트

주요 내용

테스트 대상 환경

  • Minikube 클러스터(EC2 상)와 실제 운영 환경을 유사하게 구성한 배포 환경
  • FE, BE, DB, Nginx Reverse Proxy 등이 포함된 환경에서 동작 검증

실습 절차 및 확인 사항

  • 배포 후 kubectl, 브라우저, MySQL 접속을 통해 서비스 정상 동작 확인
  • 이미지 태그 문제, 이미지 풀 실패, Docker Pull Secret(Secret 생성 및 적용) 등 문제 해결 방법 논의

7-01. CI-CD 파이프라인 설계

주요 내용

파이프라인 단계

SCM Checkout → Unit Test (코드 커버리지 포함) → Production Build → Packaging → Image Push → Staging 배포 → Acceptance Test → Release → Smoke Test

CI/CD Pipeline 구성 요소

  • Jenkins를 중심으로 여러 Agent (JNLP, builder, dind, tester 등) 구성
  • Jenkins에서 git clone, npm test, docker build/ push, Terraform을 이용한 배포 자동화

전체 시스템 배포 관점

  • FE, BE, DB, 컨테이너 오케스트레이션 및 테스트 환경(예: Selenium) 모두 포함하는 구조도 제시

7-02. 단위 테스트 및 코드 커버리지

주요 내용

단위 테스트의 적용

  • 프론트엔드와 백엔드 각각의 모듈 단위 테스트 작성
  • 테스트 대상에서 모킹(mock)을 활용하여 독립적으로 검증

코드 커버리지 도구

  • c8 등을 이용하여 테스트 커버리지를 측정
  • tsconfigMakefile 설정을 통해 테스트 실행 시 제외 파일 지정 및 HTML 보고서 생성

Jenkins와 연계

  • Jenkins Pipeline 내에서 테스트 스테이지를 구성하고, HTML Coverage Report를 게시하도록 설정

7-03. 빌드 및 패키징

주요 내용

코드 빌드

  • Makefile을 활용하여 프론트엔드와 백엔드 각각의 코드를 빌드
  • npm build 명령을 통해 build 디렉토리 산출물 생성

컨테이너 이미지 빌드 및 푸시

  • Dockerfile을 통해 각 서비스(BE, FE) 컨테이너 이미지 생성
  • Jenkins의 Docker 플러그인 및 Makefile의 make image 타겟을 사용하여 이미지 빌드 후 ECR에 푸시

예시 Pipeline 스크립트 (Docker Build & Push)

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}")
            }
        }
    }
}

7-04. 스테이징 배포

주요 내용

Terraform을 활용한 배포 자동화

  • 스테이징 환경과 프로덕션 환경을 구분하는 변수(예: kubeconfig, 이미지 URI 등)를 사용하여 Terraform 설정 파일 구성

배포/삭제를 위한 Shell Script 작성

  • 예: dpy-staging.sh를 작성하여 리소스 적용 및 제거 자동화

Shell Script 예시

# dpy-staging.sh
VAR_FILE="staging.tfvars"
: ${KUBECONFIG_PATH:="~/.kube/config"}
: ${IMG_BE:="<Your image URI here>"}
: ${IMG_FE:="<Your image URI here>"}
if [ "$1" = "on" ] ; then
    cat staging.conf setup.conf > notes.tf
    terraform init -reconfigure -no-color
    terraform apply --auto-approve -no-color \
        -var-file="${VAR_FILE}" \
        -var "kubernetes_config_path=${KUBECONFIG_PATH}" \
        -var "container_image_be=${IMG_BE}" \
        -var "container_image_fe=${IMG_FE}"
elif [ "$1" = "off" ] ; then
    cat staging.conf setup.conf > notes.tf
    terraform init -reconfigure -no-color
    terraform destroy --auto-approve -no-color \
        -var-file="${VAR_FILE}" \
        -var "kubernetes_config_path=${KUBECONFIG_PATH}"
else
    echo "Usage: $0 <on/off>"
fi

추가 고려사항

  • AWS ECR에서 이미지 pull 시 필요한 Secret 생성 및 적용
  • 변수와 환경 설정을 통해 스테이징과 프로덕션 환경을 유연하게 전환

7-05. 인수 테스트

주요 내용

인수 테스트의 목적

  • 스테이징 서버에서 실제 사용자 관점의 테스트(로그인, 노트 조회, 상세보기, alert 처리 등)를 수행하여 시스템의 통합 동작을 검증
  • 스모크 테스트와 달리, 사용자 인터페이스 및 핵심 기능의 정확한 동작 여부를 확인

Selenium 기반 테스트

  • Selenium WebDriver를 이용한 E2E 테스트 스크립트 작성 (Python, pytest 사용)

예시 테스트 코드 (로그인/로그아웃, 노트 선택, alert 처리 등)

class TestLoginlogout():
  def setup_method(self, method):
    options = webdriver.ChromeOptions()
    options.add_argument('--headless=new')
    self.driver = webdriver.Remote(
      command_executor='http://localhost:30050/wd/hub',
      options=options
    )
    self.vars = {}

  def teardown_method(self, method):
    self.driver.quit()

  def test_loginlogout(self):
    self.driver.get("https://notes-staging.prgms-fullcycle.com/")
    self.driver.implicitly_wait(10)
    self.login()
    self.driver.implicitly_wait(10)
    self.logout()
  # login() and logout() methods defined similarly...

파이프라인 연계

  • Jenkins Pipeline 내 인수 테스트 스테이지 구성
    (테스트 실행 후 배포 리소스 삭제 등 포함)
profile
프론트엔드 개발자를 준비하고 있습니다.

0개의 댓글