GitLab CI/CD와 Cloudtype으로 자동 배포 구축하기

나근민·2025년 4월 10일

CI/CD란 무엇일까? - GitLab CI/CD와 Cloudtype으로 자동 배포 구축하기

웹 개발, 앱 개발 등을 하다 보면 CI/CD라는 용어를 자주 듣게 되는데, 정확히 무엇을 의미하는 걸까? 이번 포스팅에서는 CI/CD의 개념과 함께 GitLab CI/CD를 활용해 Cloudtype으로 자동 배포하는 방법까지 알아볼 예정이다!

✏️ CI/CD란?

CI/CD는 Continuous Integration(지속적 통합)과 Continuous Delivery/Deployment(지속적 배포)의 약자로, 애플리케이션 개발 단계를 자동화하여 애플리케이션을 더 짧은 주기로 고객에게 제공하는 방법이다.

✔️ Continuous Integration (지속적 통합)

지속적 통합은 개발자들이 코드 변경사항을 중앙 저장소에 자주 병합하는 개발 방식이다.

👉 개발자가 코드를 커밋할 때마다 자동으로 빌드되고 테스트되어 문제를 빠르게 발견하고 해결할 수 있음

CI의 주요 기능

  • 코드 변경사항 자동 감지
  • 자동 빌드 및 컴파일
  • 자동 테스트 실행
  • 코드 품질 검사

예를 들어, 팀원 A가 기능을 개발하고 있고 팀원 B가 다른 기능을 개발하고 있을 때, 두 개발자가 동시에 같은 파일을 수정하면 충돌이 발생할 수 있다. CI를 사용하면 이러한 충돌을 초기에 발견하고 해결할 수 있다.

✔️ Continuous Delivery/Deployment (지속적 배포)

지속적 배포는 개발자의 변경사항이 테스트를 통과한 후 자동으로 프로덕션 환경까지 릴리스되는 방식이다.

⠀
Continuous Delivery(지속적 전달)와 Continuous Deployment(지속적 배포)는 비슷하지만 약간 다르다.

  • Continuous Delivery: 프로덕션 환경에 자동으로 배포할 준비가 되어 있지만, 최종 배포는 수동으로 승인
  • Continuous Deployment: 테스트를 통과한 코드는 자동으로 프로덕션 환경에 배포됨

CD의 주요 기능

  • 자동화된 릴리스 프로세스
  • 다양한 환경(개발, 테스트, 스테이징, 프로덕션)에 자동 배포
  • 롤백 기능 제공
  • 배포 이력 관리

💡 CI/CD를 사용하는 이유

  1. 개발 생산성 향상
    ➜ 반복적인 작업을 자동화하여 개발자가 코드 작성에 더 집중할 수 있음

  2. 버그 조기 발견
    ➜ 지속적인 통합과 테스트로 버그를 초기에 발견하고 수정 가능

  3. 배포 위험 감소
    ➜ 작은 변경사항을 자주 배포하므로 각 배포의 위험이 적음

  4. 신속한 피드백
    ➜ 개발자가 변경한 내용이 즉시 테스트되고 결과를 확인할 수 있음

  5. 안정적인 릴리스
    ➜ 자동화된 테스트와 배포 프로세스로 안정적인 릴리스 가능

✔️ 주요 CI/CD 도구들

  • Jenkins: 오픈소스 자동화 서버, 다양한 플러그인 지원
  • GitLab CI/CD: GitLab에 내장된 CI/CD 도구
  • GitHub Actions: GitHub에서 제공하는 워크플로우 자동화 도구
  • CircleCI: 클라우드 기반 CI/CD 서비스
  • Travis CI: 오픈소스 프로젝트에 널리 사용되는 CI 서비스
  • Azure DevOps: 마이크로소프트의 CI/CD 솔루션
  • AWS CodePipeline: AWS의 CI/CD 서비스

🌼 GitLab CI/CD와 Cloudtype 연동하기

이제 실제로 GitLab CI/CD를 구성하여 Cloudtype으로 자동 배포하는 방법에 대해 알아보자!

1. Cloudtype 문서 접속

우선 Cloudtype 문서에 접속해야 한다.

https://docs.cloudtype.io/guide/cicd/gitlab-cicd

2. GitLab에 SSH 키 등록하기

2-1. GitLab에서 CI/CD를 구성하고싶은 프로젝트의 SSH를 복사

2-2. 클라우드타입에서 제공하는 디플로이 키 확인

ssh-rsa --- @cloudtype

2-3. 디플로이 키를 GitLab에 등록하기 위해 Edit Profile > SSH Keys 화면으로 이동

2-4. 그리고 add key 버튼 누르기

이렇게 나오면 정상적으로 생성된 거임

3. API 키 생성하기

이제 API key 생성해야함.

인증 메뉴를 선택하고 API 키 항목의 새로운 API 키 생성 버튼을 클릭합니다.

생성된 API 키는 아래와 같다.

eyJ --- 6aAI

4. GitLab CI/CD 변수 설정

Settings > CI/CD 페이지로 이동하고 Variable 항목의 Add variable 버튼 클릭

다음 설정값으로 변수를 추가합니다.

  • Flags
    • Protect variable: 체크
    • Mask variable: 체크
    • Expand variable reference: 체크
  • Key: API_KEY_TOKEN
  • Value: 클라우드타입 API key

5. .gitlab-ci.yml 파일 구성하기

이제 설정 다 끝나서, 프로젝트에서 .gitlab-ci.yml 파일만 설정하고 gitlab에 푸쉬하면 자동으로 배포됨

# CI/CD 파이프라인의 단계를 정의하는 섹션
# 여기서는 'deploy'라는 하나의 단계만 사용
stages:
  - deploy

# 'deploy-job'이라는 작업을 정의
# 이 작업은 위에서 정의한 'deploy' 단계에서 실행됨
deploy-job:
  # 작업이 실행될 Docker 컨테이너 이미지 지정
  # Node.js 16 버전 환경에서 실행됨 (Vue.js 프로젝트에 적합)
  image: node:16
  
  # 캐시 설정: 빌드 간에 특정 파일이나 디렉토리를 캐시하여 성능 향상
  # 여기서는 'node_modules' 디렉토리를 캐시하여 npm 패키지 재설치 시간 절약
  cache:
    paths:
      - node_modules/
  
  # 작업 실행 조건 설정
  # 'main' 브랜치에 변경사항이 푸시될 때만 작업이 실행됨
  # 다른 브랜치 변경은 이 작업을 트리거하지 않음
  only:
    - main
  
  # 이 작업이 속한 단계 지정
  # 위에서 정의한 'deploy' 단계에 속함
  stage: deploy
  
  # 실제 작업 내용을 정의하는 스크립트 섹션
  # 각 명령어는 순차적으로 실행됨
  script:
    # Cloudtype CLI 전역 설치
    # 클라우드타입 서비스와 상호작용하기 위한 명령줄 도구
    - npm i -g @cloudtype/cli
    
    # Cloudtype 계정에 로그인
    # $API_KEY_TOKEN: GitLab 저장소에 설정된 시크릿 변수
    # 이 토큰으로 인증하여 클라우드타입 API에 접근 권한 얻음
    - ctype login -t $API_KEY_TOKEN
    
    # 올바른 프로젝트로 전환
    # 이 명령어로 배포 대상을 '@rmsals8/mariadb' 프로젝트의 'main' 스테이지로 지정
    # 이전에는 다른 프로젝트('@rmsals8/capston')에 배포되고 있었음
    - ctype use @rmsals8/mariadb:main
    
    # .cloudtype 디렉토리 생성
    # 클라우드타입 설정 파일을 저장할 디렉토리
    # -p 옵션은 상위 디렉토리가 없을 경우 함께 생성
    - mkdir -p ./.cloudtype
    
    # 배포 설정 파일(vue-login.yaml) 생성
    # | 문자와 함께 여러 줄의 텍스트를 작성하는 YAML 문법
    # cat <<EOF > 파일명: 여러 줄의 텍스트를 파일에 작성하는 쉘 명령어
    - |
      cat <<EOF > ./vue-login.yaml
      # 앱 이름 지정: 클라우드타입 대시보드에 표시되는 이름
      name: vue-login
      # 앱 유형: 'web'은 정적 웹사이트를 의미
      app: web
      # 앱 설정 옵션들
      options:
        # Node.js 버전 지정: Vue.js 프로젝트에 적합한 버전
        nodeversion: "16"
        # 빌드 명령어: npm run build로 Vue.js 프로젝트 빌드
        build: npm run build
        # SPA(Single Page Application) 모드 활성화
        # 이는 Vue Router와 같은 클라이언트 측 라우팅을 지원
        spa: true
        # 빌드 환경 변수: 현재는 비어 있음
        buildenv: []
        # URL 경로 재작성 규칙: 현재는 비어 있음
        rewrites: []
      # 컨텍스트 정보: 소스 코드 위치 및 프리셋 정의
      context:
        # Git 저장소 정보
        git:
          # 저장소 URL: GitLab CI/CD 변수를 사용하여 현재 저장소 경로 지정
          # $CI_PROJECT_NAMESPACE: 현재 GitLab 프로젝트의 네임스페이스(사용자/그룹)
          # $CI_PROJECT_NAME: 현재 GitLab 프로젝트의 이름
          url: git@gitlab.com:$CI_PROJECT_NAMESPACE/$CI_PROJECT_NAME.git
          # 배포할 브랜치: main 브랜치의 코드가 배포됨
          branch: main
        # 프리셋: Vue.js 프로젝트에 맞는 빌드 및 배포 설정
        preset: vue
      EOF
    
    # 생성된 설정 파일 내용 출력 (디버깅용)
    # 이 명령어로 생성된 설정 파일 내용을 CI/CD 로그에서 확인 가능
    - cat ./vue-login.yaml
    
    # 클라우드타입에 배포 실행
    # 위에서 생성한 설정 파일을 사용하여 애플리케이션 배포
    # 이 명령어가 성공적으로 실행되면 앱이 클라우드타입에 배포됨
    - ctype apply -f ./vue-login.yaml

이 파일을 프로젝트 루트 디렉토리에 생성하고 GitLab에 푸시합니다.

6. 자동 배포 확인하기

GitLab에 코드를 푸시하면 CI/CD 파이프라인이 자동으로 실행되고 로그가 출력됩니다. 그리고 cloudtype으로 돌아가보면, 변경사항이 적용되서 배포되었음을 확인할 수 있다.

마무리

CI/CD는 현대 소프트웨어 개발에서 필수적인 프로세스로, 개발팀의 생산성을 높이고 소프트웨어의 품질을 향상시키는 데 큰 도움이 된다. 이 글에서는 CI/CD의 개념부터 GitLab CI/CD와 Cloudtype을 연동하여 자동 배포하는 방법까지 알아봤다.

이렇게 구성된 자동화 파이프라인을 통해 개발자는 코드 작성에만 집중할 수 있고, 배포 과정은 자동화되어 생산성이 향상될 수 있다! 작은 변경사항을 자주 통합하고 배포함으로써 개발 주기를 단축하고 고객에게 더 빠르게 가치를 전달할 수 있게 된다.

추가적인 내용이나 질문이 있다면 댓글로 남겨주세요!

profile
나근민
개발 공부중인 학생입니다~
이전 포스트

로컬에서 쿠버네티스 + GitLab CI/CD 구축하기 (2)

다음 포스트

AWS Lambda와 Python LangChain 활용하기

0개의 댓글