S3으로 배포하기
클라이언트 코드는 AWS S3으로, 서버는 EC2로 배포하는 과정에서 만난 에러와 해결 과정에 대해 기록해두고자 한다.
S3이란 AWS에서 제공하는 온라인 스토리지 웹 서비스로, 버킷을 생성해 빌드파일을 올려주기만 하면 간편하게 배포할 수 있는 서비스이다.
Amazon Simple Storage Service(Amazon S3)는 업계 최고의 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스입니다. 모든 규모와 업종의 고객은 Amazon S3를 사용하여 데이터 레이크, 웹 사이트, 모바일 애플리케이션, 백업 및 복원, 아카이브, 엔터프라이즈 애플리케이션, IoT 디바이스, 빅 데이터 분석 등 다양한 사용 사례에서 원하는 양의 데이터를 저장하고 보호할 수 있습니다. Amazon S3는 특정 비즈니스, 조직 및 규정 준수 요구 사항에 맞게 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공합니다.
AWS S3 공식문서
버킷 등록 후 권한 설정
퍼블릭으로 설정해 놓지 않으면 외부에서 접근할 수 없기 때문에 퍼블릭으로 설정해 주어야 한다.
퍼블릭으로 설정하고 엔드포인트에 접속하려고 하면 403 Forbidden 에러를 만날 수 있는데,
403 에러는 서버 자체 또는 서버에 있는 파일에 접근할 권한이 없을 경우 발생하는 에러로 서버가 클라이언트 접근을 거부할 때 반환하는 HTTP 응답 코드이자 오류 코드 이다.
당황하지 말고 권한 > 버킷 정책 에 아래와 같은 코드를 추가해주자.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Stmt1654095607580",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::{생성한 버킷 명 넣어주기}/*"
}
]
}이렇게 작성하고, 다시 버킷 웹 사이트 엔드포인트에 접속하면 CORS 에러를 만나게 된다.
SOP, CORS에 대해서 정리해놓은 글 에서도 알 수 있듯 CORS는 교차 출처 리소스 공유 정책이다. 한마디로 출처가 다를 경우 동일 출처 정책(SOP)에 의해 리소스 상호작용(공유)이 불가한 상황이라는 것!
에러 해결
S3에서는 권한 > CORS(Cross-origin 리소스 공유) 탭에 이 코드를 추가해주고,
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"HEAD",
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]서버쪽 코드가 올라가 있는 EC2에는 백엔드 개발자분께서 컨트롤러에 @CrossOrigin 이라는 어노테이션을 붙여서 해결해 주셨다.
이렇게 권한 설정을 모두 마친 뒤 성공적으로 웹사이트 배포를 성공했고, 서버와의 연동도 성공했다.
