AWS 프론트엔드 배포

개미·2023년 12월 4일

aws 배포

Introduction

이전 포스팅에서 CI/CD 구축을 설명하며 간단하게 AWS 설정에 대해 짚고 넘어갔지만, CloudFront와 연결 방식은 제대로 설명하지 않아서 따로 포스팅을 하게 되었다.

AWS 프론트엔드 배포

1. S3 버킷 생성하기

버킷 이름은 원하는 것으로 설정하기
ACL 활성화하기
2-1. 객체 소유권은 객체 라이터로 지정하기
퍼블릭 액세스 차단 활성화 (체크 표시 그대로 둘것!) 🌟
버킷 생성하기
객체 탭에서 build한 폴더/파일 그대로 넣기

2. ACM 인증서 생성하기

버지니아 북부에서 생성해야 함! 🌟

도메인 이름 섹션에 Route53에서 산 도메인(example.com) 넣기
1-1. 서브도메인도 사용하려면 *.example.com도 추가해주기 🌟
유효성 검사 방법은 DNS 유효성 검사 선택하기
키 알고리즘은 RSA 2048 선택하기 .

3. CloudFront 생성하기

원본 도메인은 생성한 S3 버킷 선택하기 (이때, 토글에서 존재하는 S3 버킷을 생성해야 한다. 정적 웹사이트 호스팅한 주소로 하면 OAI 연결이 안뜬다!) 🌟
S3 버킷을 생성하면 원복 엑세스 항목이 등장
2-1. 새 OAI를 생성하여 등록하기 🌟
2-2. 버킷 정책은 '예, 버킷 정책 업데이트' 선택하기 (=> 자동으로 해당 S3 버킷의 정책을 업데이트하여 줌)
뷰어 프로토콜 정책은 Redirect HTTP to HTTPS로 설정하기 🌟
WAF는 비활성화하기
대체 도메인은 등록하기 (example.com) 🌟
사용자 정의 SSL 인증서에서 아까 생성한 ACM 인증서 등록하기 🌟
기본값 루트 객체는 index.html 🌟

4. Route53 설정하기

도메인에서 레코드를 생성하기
레코드 유형은 A
트래픽 라우팅 대상 별칭 토글 클릭하기
3-1. CloudFront 배포에 대한 별칭 선택하기
3-2. 생성한 CloudFront 선택하기

트러블 슈팅

로그인 이후 Home 페이지로 갈때, 403 Access Denied 에러가 났다. 찾아보니, 개인별 페이지시에는 CloudFront 가 S3에 없는 객체를 요청한것이 원인이였다.

따라서 CloudFront 오류페이지 탭에서 사용자 정의 오류 응답을 생성한다. 403 에러에 대해서는 200 코드를 반환하게 하고 /index.html을 응답 페이지 경로로 설정하면 해결된다.

완성

일반적인 프론트엔드 프로젝트 배포는 위와 같이 하면된다. CloudFront로 연결하면 S3를 퍼블릭으로 열어두는 것보다 안정성이 보장된다. 그리고 CloudFront가 CDN의 일종이기 때문에, 캐싱된 파일을 가져오는 시간도 줄여줄 것이다.

번외. 퍼블릭 S3 버킷 만들기

나는 프로젝트에서 모든 사용자가 접근할 수 있는, PDF 파일 전용 버킷을 따로 만들어야 했다. 이럴때는 어떻게 버킷을 어떻게 설정하면 될까?

퍼블릭 차단 비활성화 하기
버킷 정책으로 모든 사용자에 대한 접근 가능하게 하기

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*", 
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{버킷 이름}/*"
        }
    ]
}

Principal에서 *이 모든 사용자에 대한 접근을 허용한다는 의미.

CORS 설정하기

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            {허용하는 도메인 주소}
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]