[AWS 실습 프로젝트] 8. S3에 프론트엔드 배포하기

✅ 개요

---

스프링부트 백엔드 서버 배포까지 완료되었다.

이제 프론트엔드 코드를 S3를 통해 배포해보도록 하겠다.

aws_practice/frontend at main · jhk01007/aws_practice

 

✅ S3 버킷 만들기

---

우선 프론트엔드 코드를 배포하기 위한 S3 버킷을 만들도록 하겠다.

실습 목적으로 하는 프로젝트이기 때문에 퍼블릭 액세스 차단은 해제시켜주었다.

 

버킷이 잘 생성되었다.

 

✅ 프론트엔드 코드 배포하기

---

앞서 잘 구현해둔 프론트엔드 코드를 배포해보도록 하겠다.

 

1️⃣ 파일 업로드하기

우선 프론트엔드 파일들을 S3에 업로드 한다.

1. 파일들을 드래그해서 업로드한다.

❗️이때 주의해야할 것이 루트 폴더를 올리는 것이 아니라 그 루트 폴더 내의 있는 파일 및 폴더를 업로드 해야한다.

 

2. 모두 체크해주고 업로드 버튼을 클릭한다.

 

3. 업로드 확인

업로드가 정상적으로 잘되었다.

 

2️⃣ 버킷 정책 설정

S3는 별다른 액세스 접근제어를 하지 않아도 기본적으로 액세스가 거부된다.

따라서 버킷 정책을 설정해주어야 한다.

 

1. 해당 버킷에 권한 탭에 들어간다.

 

2. 밑으로 내려 ‘버킷 정책’에서 ‘편집’ 클릭

 

다음의 정책을 추가해주었다.

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "Statement1",
			"Principal": "*",
			"Effect": "Allow",
			"Action": "s3:GetObject",
			"Resource":"arn:aws:s3:::aws-practice-frontend/*"
		}
	]
}

해당 버킷의 객체들을 모든 사람들이 접근하게 하겠다는 의미이다.

 

3️⃣ 정적 웹사이트 호스팅

버킷 웹사이트 엔드 포인트를 통해 들어가보면 배포가 정상적으로 된것을 알 수 있다.

 

✅ 문제점

---

로그인까지는 되지만 세션저장이 안되는 모습이다.(세션 저장이 정상적으로 됐다면 화면에 'xxx님 환영합니다.'라고 떴어야 함)

프론트엔드와 백엔드가 서로 다른 도메인에 배포된 상황에서 세션 쿠키를 사용하려면, 백엔드 쪽에서 SameSite=None과 Secure=true 설정이 모두 필요하며, 이 설정들은 HTTPS 환경에서만 동작한다.

따라서 HTTPS를 적용시켜야하는데 세션 및 쿠키를 관리하는 백엔드 쪽을 HTTPS로 만들어줘야 한다. 

 

✅ 마치며

---

다음 포스트에선 백엔드에 HTTPS를 적용시켜보도록 하겠다.