Azure DevOps에서 CI/CD 파이프라인 구성하기

---

🚀 Azure DevOps에서 CI/CD 파이프라인 구성하기

지난 글에서는 Azure DevOps의 개념과 구성 요소를 소개했어요.
이번에는 실제로 Azure DevOps를 사용해서
CI/CD 파이프라인을 구성하는 방법을
단계별로 소개해볼게요!

목표: GitHub에 커밋하면 → 자동으로 빌드 → Azure에 배포되는 흐름 만들기!

---

💡 CI/CD란 다시 한번 간단히?

• CI (Continuous Integration):
  코드 변경 사항을 자주 통합하고, 자동 테스트/빌드를 수행해 품질 유지
• CD (Continuous Delivery/Deployment):
  테스트된 코드를 자동으로 배포해, 빠르고 안정적인 릴리즈 가능

---

🧩 Azure DevOps 파이프라인 구성 흐름

Azure DevOps에서 파이프라인은 크게 두 가지 방식이 있어요:

1. Classic Editor (GUI 기반)
   • 드래그 앤 드롭 방식, UI 친숙함
   • 초보자에게 좋음
2. YAML 기반 Pipeline
   • 코드로 파이프라인 작성 (버전 관리 가능)
   • DevOps 숙련자에게 추천

이번에는 YAML 기반으로 실습 구성해볼게요!

---

🛠️ 실습: React 앱을 Azure에 CI/CD로 배포하기

목표: GitHub → 빌드 → Azure Static Web App 자동 배포

---

1. Azure DevOps 프로젝트 생성

• https://dev.azure.com 접속
• 새 프로젝트 생성 (my-react-cicd-project 등)

---

2. GitHub 저장소 연결

• Pipelines > New pipeline 클릭
• 코드 저장 위치: GitHub 선택
• 저장소 인증 → 리포지토리 선택

---

3. azure-pipelines.yml 파일 생성

프로젝트 루트에 아래와 같은 파일 작성:

---

 

trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: 'Install Node.js'

  - script: |
      npm install
      npm run build
    displayName: 'Install and Build'

  - task: CopyFiles@2
    inputs:
      SourceFolder: 'build'
      Contents: '**'
      TargetFolder: '$(Build.ArtifactStagingDirectory)'

  - task: PublishBuildArtifacts@1
    inputs:
      pathToPublish: '$(Build.ArtifactStagingDirectory)'
      artifactName: 'drop'

---

💡 이 파이프라인은 main 브랜치에 커밋이 발생할 때
React 앱을 빌드하고, build 폴더 결과물을 아티팩트로 저장합니다.

---

4. 배포 파이프라인 추가 (예: Azure Static Web App, App Service 등)

• 배포 타겟에 따라 달라져요:
  • Static Web App이면 GitHub Actions 추천 (자동 설정 가능)
  • Azure App Service면 Release Pipeline 구성

간단한 예시로 App Service 배포할 때는 Release 단계에서
Azure App Service deploy 작업을 추가하면 돼요.

---

✅ 배포까지 완성된 흐름

1. GitHub에 커밋
2. Azure DevOps Pipeline 실행
3. 빌드 및 아티팩트 생성
4. 자동으로 Azure에 배포 완료!

---

🔍 팁 & 추천 설정

• 단계별 캐시 추가: npm install 캐싱으로 속도 향상
• 환경별 분리: dev, staging, prod 분리해서 관리
• 테스트 통합: npm test 추가해서 자동 테스트
• Slack/Email 알림 연동 가능

---

🎯 마무리

Azure DevOps는 깔끔하고 강력한 CI/CD 플랫폼이에요.
한 번 설정만 해두면,
코드 커밋 → 빌드 → 테스트 → 배포까지 완전 자동화된
개발 환경을 만들 수 있습니다.