[AWS] FrontEnd 배포 실습 (S3 + CloudFront)

개요

1. AWS IAM 설정
2. S3 생성 및 설정
3. CloudFront 설정
4. Github Action으로 CI / CD 구축

 

✅ AWS IAM 설정

---

📦 IAM(Identity and Access Management)이란?

AWS리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스로 AWS 계정을 최초로 생성할 때 만들어지는 루트 사용자는 모든 엑세스 권한을 가지기에 보안에 주의해서 사용해야하므로 IAM을 통해 리소스를 사용할 수 있는 인증 및 권한 부여된 대상을 제어한다.

• 리소스에 대해 여러 사람에게 다양한 권한을 부여할 수 있다.
• 사용자에게 직접 정책을 설정할 수도 있지만 그룹에 대해서도 부여할 수 있다.

 

📦 IAM 사용자 추가하기

• AWS > IAM > 사용자 생성 > 1 ~3단계 수행 > 생성

IAM 생성 + 그룹에 사용자 추가하기

• S3FullAccess, CloudFrontFullAccess 두개의 권한 옵션을 설정해준다.
• IAM을 통해 발급 받는 access key는 추후에 자주 사용되므로 꼭 발급 받자
• 이때 그룹은 권합 옵션을 공유해주는 집단이므로 프로젝트 팀명으로 구분이 쉽게 하였다.

access key 발급

 

---

 

✅ S3 생성 및 설정

---

📦 S3(Simple Storage Service)란?

인터넷 스토리지 서비스로 데이터를 객체 형태로 저장하는 파일 저장 서비스이며, 주로 이미지, 동영상 파일 저장을 위해 사용된다.

• SSL을 통해 데이터를 전송 및 암호화하여 높은 내구성과 보안성을 가지고 있다.
• EC2보다 이미지, 영상을 저장할 때 비용이 저렴하다.
• 파일 저장에 최적화 되어 업로드 / 다운로드 속도가 빠르고 정적 웹페이지의 경우 성능을 높이고 비용을 절감할 수 있다.
• 저장 용량이 크다.

 

📦 S3 버킷 생성

• AWS > S3 > 버킷만들기 > 생성

• ACL 활성화 여부는 외부 노출을 원천 봉쇄하기 위함

버킷 생성 과정

• 버킷에 대한 접근을 CloudFront에서 할 것이기에 퍼블릭 엑세스 차단
• 버킷 버전에 대한 관리 필요성이 없기에 비활성화

 

📦 S3 버킷 설정

• AWS > S3 > [버킷 네임] > 속성

• 정적 웹 사이트 호스팅을 활성화하여 S3 버킷을 웹사이트로 이용할 수 있게끔 할 수 있다. 이는 S3 버킷에 저장된 파일을 웹 브라우저에서 직접 엑세스할 수 있게 해주기 때문이다.

• 설정을 완료하면 버킷 웹 사이트 엔드포인트가 부여가 되지만 정책 설정 및 프로젝트를 올리지 않았기에 접속시 403Error가 발생한다

 

• AWS > S3 > [버킷 네임] > 권한

• 버킷 정책 설정을 하기 위해서는 기존에 퍼블릭 엑세스 차단을 비활성화로 바꾼 뒤 진행하면 된다.
• 버킷 정책은 버킷을 사용할 권한을 가진 여러 명의 사용자 별로 각각의 행위에 대한 권한 범위를 설정하는 것이다. 이를 통해 읽기, 쓰기 등 행동에 대한 제한을 가할 수도 있고 허용할 수도 있다.
• 정책 생성기를 통해 간편하게 정책을 생성할 수 있으며 아래와 같은 방식으로 정책을 생성해보자.

🎉 정책 생성

정책 생성기

 

4가지를 설정하면 된다

1. Select Type of Policy에서 S3 Bucket Policy를 선택한다.
2. Effect는 Allow 설정
3. Principa은 * 설정
4. Action은 GetObjcet 설정 
5. Amazon Resorce Name에 복사해놓은 ARN에 끝에 /*를 붙인다.

• 이 정책 문서는 IAM의 정책으로 사용되어 특정 사용자 또는 그룹, 리소스가 S3 버킷에 대한 어떤 작업을 수행할 수 있는지를 제어하고 일반적으로 다음과 같은 내용을 포함한다.

1. 어떤 작업이 허용되는지 (GetObject ...)
2. 어떤 리소스에 대한 엑세스가 허용되는지 (특정 버킷, 버킷의 모든 객체 ...)
3. 엑세스를 요청할 수 있는 조건 (IP 주소, IAM 역할 ...)

 

이 정책은 S3 버킷 자체에 직접 연결되지 않고 IAM 사용자, 그룹 또는 역할에 연결되어 AWS의 엑세스 제어 매커니즘을 통해 사용자의 권한을 관리하고 제어할 수 있다.

 

📦 AWS CLI를 통한 S3 버킷에 프로젝트 업로드 🔗 

 - Install

• 가이드 내용에 따라 설치 후 aws에 대한 설치 상태를 확인

- User setting (CLI)

aws configure --profile [IAM 사용자 이름]
Key ID : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Access key ID
Access Key : IAM 사용자 추가할 때 다운받았던 CSV 파일의 Secret access key
region name : ap-northeast-2output
format : json

 

- Uploading 

// package.json

{
	...
    "script": {
    	...
        "deploy": "aws s3 sync ./dist s3://[S3 버킷 이름] --profile=[IAM 사용자 이름]"
    }
}
// ./dist는 vite를 사용해서 그런거고 CRA를 이용했다면 ./build로 나올 것임

 

---

 

✅ CloudFront에 배포하기

---

📦 CloudFront의 이점? 

1. 성능
   정적 리소스에 대해 캐시를 사용하여 데이터를 관리할 수 있으며 캐시를 짧게 하거나 날리는 등 적절하게 설정한다면 성능상 많은 개선을 할 수 있다.
2. 보안
   CloudFront만을 통해서 유저가 S3로 접근할 수 있어 보안을 높일 수 있다(public Access를 비활성화할 수 있다.)
3. 글로벌 서비스
   CloudFront는 생성한 region에 속하지 않고 엣지 로케이션이라는 캐싱 서버에 캐싱되기에 전 세계 사용자들에게 빠르게 응답할 수 있다.

 

📦 CloudFront 배포 생성 

• AWS > CloudFront > 배포 > 생성

• Origin domain에 대해 S3 버킷을 선택한 뒤 버킷을 CloudFront에서만 접근할 수 있게 하기위해 원본 엑세스 설정 후 OAC를 생성하자

• Origin Shield를 활성화함으로 엣지 로케이션에서 가져오는 콘텐츠의 요청을 최적화할 수 있다.

🎉 Origin Shield

Origin Shield의 유무

여러 지역에 엣지 로케이션이 존재하고 요청하는 객체를 캐시에 가지고 있지 않을 때에는 각 엣지 로케이션이  동시에 Origin으로 요청을해서 S3 버킷에 대해 과부화가 일어날 수 있다. 이때 Origin Shield가 있다면 요청은 Shield로 가게되고 Origin Shield가 S3 버킷에서 객체를 가져오게 된다. 모든 엣지 로케이션은 Shield로 요청을 하므로 S3에 대한 부하를 줄일 수 있고 이를 통해 전번적인 성능과 신뢰성을 향상시킬 수 있다.

 

• 기본 캐시 동작은 뷰어 프로토콜 정책만 변경 후 나머지는 기본값으로 사용한다.
• WAF는 악의적인 HTTP/S 트래픽을 필터링, 모니터링 및 타단하여 웹 앱을 보호하고, 승인되지 않은 데이터가 앱에서 나가는 것을 방지하지만 비용이 청구되는 옵션이기에 비활성화

• 배포 완료 후 사용자 정의 오류 응답편집을 설정하여 마무리를 하면 된다.
•  이후 CloudFront의 배포 도메인을 통해서 접근할 수 있다.

 

---

 

✅ Github Action으로 CI / CD 구축

---

 

📦 CI / CD(Continuous Integration / Continuous Deployment)란?

지속적 통합은 개발 팀이 코드를 지속적으로 통합하고 이를 자동으로 테스트하여 버그를 최소화하는 프로세스이다. 코드 변경 시(push)에 자동으로 빌드 및 테스트를 진행하여 프로덕트 품질 관리 및 버그 발견이 빨라질 수 있으며, 지속적 배포를 통해 새로운 기능을 사용자에게 빠르게 전달하고 구축 시간을 단축시킬 수 있습니다. 

• github aciton뿐만아니라 Jenkins, Travis... 여러 CI / CD 툴이 존재한다.
• 위와 같은 도구를 통해서 배포에 대한 파이프라인을 설정한다.
• 파이프라인 구축을 통해 불필요한 비용도 줄이고, 개발에만 집중할 수 있는 환경을 조성할 수 있다.

 

📦 .github/workflows/cicd.yaml 만들기

name: front-dev-deploy

on:
  push:
    branches: main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v3

      - name: Install Dependencies
        run: pnpm

      - name: Build
        run: pnpm run build

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: S3 Deploy
        run: aws s3 sync ./dist s3://${{ secrets.AWS_S3_BUCKET }} --acl bucket-owner-full-control

      - name: Invalidate CloudFront Cache
        run: aws cloudfront create-invalidation --distribution-id ${{secrets.CLOUD_FRONT_ID}} --paths "/*"

 

📦 secret 설정하기 🔗

Build 및 Deploy 환경에 사용될 환경 변수를 등록하는 것으로 각 환경변수가 무슨 값인지 헷갈리지 않도록 주의해야한다.

 

 

📌 Reference

• [AWS] IAM 개념, 기능 및 IAM 사용자 추가하기  
• AWS-S3-Cloudfront-배포   
• S3 버킷 권한 설정  
• [AWS] 정적 웹 페이지 배포하기 (S3 + CloudFront)   
• CICD GitHub Action으로 CICD 구축하기