React CI/CD (feat. AWS, Gitlab)

 

React 애플리케이션을 GitLab을 사용한 CI/CD와 AWS를 통한 배포로 구성하는 방법을 단계별로 설명드리겠습니다. 이 구성에서는 GitLab CI/CD 파이프라인을 사용하여 React 애플리케이션을 AWS S3와 CloudFront에 자동으로 배포하는 인프라를 구축합니다.

React 애플리케이션을 위한 CI/CD 파이프라인 과정

1. AWS S3와 CloudFront 설정

Step 1: S3 버킷 생성

1. S3 버킷 생성:
   • AWS Management Console에서 S3로 이동한 후 새로운 버킷을 생성합니다.
   • 버킷 이름은 고유해야 하며, AWS가 지원하는 모든 리전에 걸쳐 사용됩니다.
   • 버킷을 정적 웹사이트 호스팅용으로 설정:
     • S3 설정에서 '정적 웹사이트 호스팅'을 활성화하고, 인덱스 문서(index.html) 및 오류 문서(error.html)를 설정합니다.
2. 버킷 정책 설정:
   • S3 버킷에 접근할 수 있는 권한을 설정하기 위해 버킷 정책을 추가합니다. 정적 파일이 모든 사용자에게 읽기 가능하도록 설정하는 정책은 다음과 같습니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Step 2: CloudFront 생성

1. CloudFront 배포 설정:
   • AWS Management Console에서 CloudFront로 이동하여 새로운 배포를 생성합니다.
   • 오리진 도메인으로 S3 버킷을 선택합니다.
   • CloudFront의 Default Root Object를 index.html로 설정합니다.
   • HTTPS를 사용하려면 SSL 인증서를 설정합니다 (AWS Certificate Manager를 사용하여 인증서를 발급 가능).

2. GitLab CI/CD 파이프라인 설정

Step 1: AWS 자격 증명 설정

GitLab에서 AWS 자격 증명(AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY)을 CI/CD에서 사용할 수 있도록 GitLab 프로젝트에 환경 변수로 설정합니다.

1. GitLab 프로젝트 설정으로 이동:
   • GitLab 프로젝트의 Settings > CI/CD > Variables로 이동합니다.
   • AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY를 환경 변수로 추가합니다.

Step 2: GitLab CI 구성 파일 생성

프로젝트 루트 디렉토리에 .gitlab-ci.yml 파일을 생성하여 GitLab CI/CD 파이프라인을 설정합니다.

image: node:16

stages:
  - build
  - deploy

# Build React app
build:
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - build/

# Deploy to AWS S3
deploy:
  stage: deploy
  script:
    - apt-get update -y
    - apt-get install -y python3-pip
    - pip3 install awscli
    - aws s3 sync build/ s3://your-bucket-name --acl public-read --delete
    - aws cloudfront create-invalidation --distribution-id your-distribution-id --paths "/*"
  only:
    - main
  environment:
    name: production

 

설명:

1. 빌드 단계:
   • npm install: 의존성을 설치합니다.
   • npm run build: 프로덕션 빌드를 생성합니다.
   • 빌드된 파일을 아티팩트로 저장하여 이후 단계에서 사용합니다.
2. 배포 단계:
   • AWS CLI 설치: apt-get을 사용하여 AWS CLI를 설치합니다.
   • S3에 배포: aws s3 sync 명령을 사용하여 build/ 디렉토리의 파일들을 S3 버킷으로 동기화합니다.
   • CloudFront 캐시 무효화: aws cloudfront create-invalidation 명령을 사용하여 CloudFront의 캐시를 무효화하여 변경된 파일이 즉시 반영되도록 합니다.

Step 3: GitLab CI/CD 트리거

GitLab에서 main 브랜치에 푸시할 때마다 이 파이프라인이 자동으로 트리거됩니다. 푸시된 후에는 React 앱이 빌드되고, S3에 배포되며, CloudFront 캐시가 무효화되어 최신 콘텐츠가 제공됩니다.

3. 최종 결과

• 지속적 통합(CI): GitLab에서 코드를 푸시하면 자동으로 애플리케이션이 빌드되고 테스트됩니다.
• 지속적 배포(CD): 성공적으로 빌드되면 AWS S3 버킷에 정적 웹사이트가 자동으로 배포되고, CloudFront는 최신 파일을 즉시 제공할 수 있도록 캐시가 무효화됩니다.

4. 추가 개선 사항

• 테스트 단계: npm test를 추가하여 배포 전에 자동으로 테스트를 실행할 수 있습니다.
• Linting: eslint를 사용하여 코드 스타일을 확인할 수 있습니다.
• 멀티 환경 배포: 여러 AWS S3 버킷을 사용해 개발, 스테이징, 프로덕션 환경을 구분하여 배포할 수 있습니다.

이와 같이 GitLab과 AWS S3, CloudFront를 사용하여 React 애플리케이션의 CI/CD 인프라를 손쉽게 구축할 수 있습니다.