AWS Serverless 인프라 및 GitHub Actions CI/CD 구축

FE 개발 배포 시 따로 웹서버를 띄우지 않고 인프라에 대한 관리 리소스를 줄이기 위해 serverless 인프라 구축을 하여 사용 중입니다. 이번에 개발팀 내에 공유하는 자리와 가이드 역할을 맡게 되어 해당 내용을 정리하게 되었습니다.

 

인프라 구성도

 

기술 스텍

사용하는 기술 스텍을 간단하게 알아보고 인프라 구축 내용으로 넘어가도록 하겠습니다.

AWS S3

• Amazon S3는 데이터를 버킷 내의 객체로 저장하는 객체 스토리지 서비스
• 객체는 해당 파일을 설명하는 모든 메타데이터
• 버킷은 객체에 대한 컨테이너(디렉토리)

⇒ FE에서 build를 통해 만들어내는 산출물(bundle)을 올려두는 용도로 사용합니다.

AWS CloudFront

• Amazon CloudFront는 CDN 서비스
• 콘텐츠 요청이 발생한 곳과 가까운 Edge Location을 통해 응답 속도 향상
• Edge Location에 캐싱 된 콘텐츠를 두어 S3 부하 감소
• 콘텐츠 보안 유지 ⇒ 콘텐츠 접근을 제어

⇒ S3 버킷의 직접적인 접근을 막아 콘텐츠 보안을 유지하며 Edge Location의 장점을 살리기 위해 사용합니다.

AWS Certificate Manager

• AWS 서비스 및 내부 리소스에 사용할 SSL/TLS 인증서 관리

⇒ SSL 인증서 등록을 위해 사용합니다.

AWS Route 53

• Amazon Route 53은 DNS 서비스

⇒ 도메인 생성 및 서브 도메인 관리를 위해 사용합니다.

GitHub Actions

• Github에서 제공하는 CI/CD tool

⇒  작성된 코드를 빌드하고 AWS 서비스에 배포하기 위해 사용합니다.

인프라 구성 및 CI/CD 구축 작업 순서

작업 순서는 아래와 같이 진행됩니다.

S3 버킷 생성 ⇒ CloudFront 배포 생성 ⇒ 생성된 버킷 정책 S3에 추가 ⇒ Route 53 도메인 확인 ⇒ GitHub Actions workflow 생성 ⇒ 빌드 후 확인

 

인프라 구성 작업 내용

1. S3 버킷 생성

AWS S3로 들어가 버킷 만들기를 통해 버킷 생성을 합니다.

버킷 이름은 사용할 도메인(ex. dev-102.tistory.com)으로 적용하고 기존에 사용하고 있는 버킷의 설정을 그대로 들고 올 경우 아래의 설정 복사에서 버킷을 선택하여 적용합니다.

 

모든 퍼블릭 액세스 차단을 해제 후 버킷 생성을 합니다.

 

현재 인프라 구성을 CloudFront를 통한 접근만 허용하도록 설정하기 때문에 아래의 내용은 생략 가능하며 버킷의 직접 접근하는 케이스를 위해 따로 정리해두겠습니다.
버킷으로 들어가 속성 탭에서 정적 웹사이트 호스팅을 편집(호스팅 활성화, 인덱스 문서 등록) 합니다.

 

2. CloudFront 배포 생성

AWS CloudFront로 들어가 배포 생성을 합니다.

Origin domain에서 생성한 버킷을 적용하면 이름까지 자동으로 적용됩니다.

 

버킷 적용 시 원본 액세스 설정이 나오며 해당 부분에서 원본 액세스 제어 설정을 선택하고 OAC를 생성 후 적용합니다.

 

SSL 인증서 연결이 필요하면 적용합니다.

기존에 만들어둔 인증서가 있을 경우 등록하면 되며 없을 경우 AWS Certificate Manager에 인증서 요청에서 생성하여 등록합니다.

 

그 외 프로젝트 환경에 맞게 설정이 필요한 부분을 적용하고 배포 생성합니다.

 

배포 생성 이후 SPA의 경우 url 인식을 못 하는 이슈(메인 도메인 뒤로 붙는 라우터 주소에 대해 403이 발생) 발생을 대비하여 오류 페이지 처리가 필요하기 때문에 설정합니다.

 

3. 생성된 버킷 정책 S3에 추가

CloudFront에서 배포 생성 시 버킷 정책을 복사할 수 있는 alert가 뜨고 복사할 수 있는 링크가 제공됩니다. 해당 링크로 정책을 복사하거나 생성된 배포로 들어가 원본 탭에서 해당 원본 선택 후 편집화면에서 정책 복사를 합니다.

해당 S3 버킷으로 들어가 권한 탭에서 버킷 정책에 해당 정책을 붙여넣기 합니다.

 

4. Route 53 도메인 확인

도메인이 없을 경우 AWS Route 53에서 호스팅 영역 - 호스팅 영역 생성을 합니다.

 

서브도메인으로 연결이 필요한 경우 AWS Route 53에서 호스팅 영역에서 메인 도메인을 클릭하여 레코드 생성을 합니다.

 

레코드 이름은 서브도메인으로 지정하고 레코드 유형에서 A(웹 서버와 같은 리소스로 트래픽을 라우팅) 선택 합니다.

 

별칭을 on 하여 엔드 포인트로 CloudFront 배포에 대한 별칭을 선택하여 아래에 아까 생성된 CloudFront 배포 도메인 이름을 적용 뒤 레코드 생성합니다.

 

인프라 구성을 마치며 CI/CD 구축을 위해 GitHub Actions 설정을 알아보겠습니다.

 

CI/CD 구축 작업 내용

1. GitHub 환경 변수 설정

위에 생성된 AWS 서비스에 배포를 위해 AWS access key와 secret access key가 필요합니다. AWS IAM에서 사용자 생성이 필요할 경우 사용자 생성 후 AmazonS3 FullAccess, CloudFrontFullAcess 추가, 그 후 access key 발급을 진행합니다.

 

AWS access key와 secret access key를 CI/CD를 구축할 GitHub 레포지토리에서 Settings - Secrets and variables - Actions 탭에 추가합니다.

 

추가로 빌드에 사용될 S3 버킷 name과 region 그리고 CloudFront 배포 ID도 변수에 추가해줍니다.

 

2. 빌드 파일 생성

프로젝트의 root에서 github/workflows 디렉토리 내에 빌드 파일을 생성합니다. 빌드 파일 예시는 아래와 같습니다.

name: <build name(workflow name)>
on:
  push:
    branches:
      - <빌드를 발생시킬 트리거가 되는 branch>
jobs:
  run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: set env
        run: |
          if [[ $GITHUB_REF == 'refs/heads/<빌드를 발생시킬 트리거가 되는 branch>' ]]; then
              echo "S3_BUCKET=${{ secrets.<환경변수로 넣어둔 버킷 name> }}" >> $GITHUB_ENV
              echo "S3_BUCKET_REGION=${{ secrets.<환경변수로 넣어둔 버킷 region> }}" >> $GITHUB_ENV
              echo "CLOUDFORNT_DIST_ID=${{ secrets.<환경변수로 넣어둔 cloudfront id> }}" >> $GITHUB_ENV
              echo "BUILD_COMMAND=<패키지 빌드 커맨드>" >> $GITHUB_ENV
          fi

      - name: Caching
        uses: actions/cache@v3
        id: yarn-cache
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-${{ env.BUILD_COMMAND }}-dev-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-${{ env.BUILD_COMMAND }}-dev-yarn-

      - name: Install dependencies
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: |
          yarn

      - name: Build
        env:
          NODE_OPTIONS: "--max_old_space_size=4096"
        run: |
          cd <디렉토리 위치>
          yarn ${{ env.BUILD_COMMAND }}

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v3
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ env.S3_BUCKET_REGION }}

      - name: Deploy
        run: |
          cd <디렉토리 위치>
          aws s3 sync ./dist s3://$S3_BUCKET
          aws cloudfront create-invalidation --distribution-id ${{ env.CLOUDFORNT_DIST_ID }} --paths "/*"

 

빌드 파일 구성은 트리거를 구성(branch merge, PR 등)한 뒤 트리거 발생 시 action job이 실행되는 구조입니다.

env 환경 변수를 설정 뒤 패키지 디펜더시를 체크, 해당 단계 hit 여부 체크 후 추가로 설치되어야 할 디펜더시가 있을 경우 설치, 그 뒤 번들링을 하고 해당 번들을 AWS 구성 서비스에 배포되는 구조입니다.

 

3. 빌드 후 확인

트리거를 통해 GitHub Actions workflow을 실행시켜 Actions 탭에서 해당 빌드가 발생하는지 확인합니다.

 

GitHub Actions을 통한 CI/CD 구축 작업을 마치며 인프라 구성 및 CI/CD 구축 작업을 마무리하겠습니다.

 

마무리

인프라 구성 및 CI/CD 구축을 하면서 추가로 설정해야 할 부분이 있을 수 있고 작업 순서도 상황에 따라 바뀔 수 있으니 작업 환경과 상황에 맞게 작업해야겠습니다. 인프라를 구성한 각각의 AWS 서비스를 왜 사용하는지 어떻게 연결하여 사용하는지에 대해서도 공부가 필요합니다. 다음 기회에 각각의 AWS 서비스와 GitHub Actions에 대해 따로 상세하게 포스팅하겠습니다. 이번 포스팅으로 인프라 구성에 도움이 되었으면 좋겠습니다.

---

참고 자료

https://docs.aws.amazon.com/

https://aws.amazon.com/ko/blogs/korea/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/

https://younyellow.tistory.com/3