[AWS] 정적 웹페이지 배포하기 ( S3 + CloudFront )

S3 배포

버킷 만들기

• AWS 리전 서울로 지정

• 퍼블릭 엑세스 차단 해제

버킷 권한 정책 설정

• 권한 > 버킷 정책 수정

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::{ BucketName }/*" // 버킷네임 적용
		}
	]
}

• 예시

• 배포 파일 업로드
  • 🙏배포 파일은 루트 디렉토리 안의 내용물만 올려야한다
• 속성 > 정적 웹사이트 호스팅 설정
  1. 정적 웹사이트 호스팅 활성화
  2. 인덱스 문서 index.html 로 설정
  • 설정 후 엔드포인트 생성

S3 배포

배포할 프로젝트 디렉토리에서 명령어를 입력

aws s3 sync ./build s3://[s3 버킷 이름] --profile=[사용자 아이디] (bundangline)

or

aws s3 sync ./out s3://[s3 버킷 이름] --profile=[사용자 아이디] (bundangline)

CloudFront 연결

CloudFront 연결 이유

1. https가 아닌 http 통신을 해야 한다는 점
2. 버킷이 퍼블릭 공개라는 점
3. AWS S3의 엔드포인트 주소를 그대로 사용해야 한다는 점

배포 생성

• 원본 도메인 연결
• S3 버킷 엑세스 OAI 사용
• 새 OAI 생성
• 버킷 정책 업데이트 선택

• 기본 캐시 동작 > 뷰어 > 뷰어 프로토콜 정책 설정

• tjfwjd > 기본값 루트 객체 설정

배포 생성 완료

• 배포 생성 후 2 ~ 3분 기다리면 생성된 도메인으로 연결 가능

캐시 Invalidation하기

• 캐시 Invalidation은 프로젝트가 업데이트 되었을 때 CloudFront에 적용하려면 직접 파일을 업데이트 해주는 작업
• CloudFront 는 S3파일이 엣지 로케이션에 캐싱되어 저장되는데, S3에 파일을 새로 업로드 하여도 바로 적용되지 않는게 이 때문
• CloudFront 로 배포되는 파일의 캐시가 유지되는 기본 시간은 24시간이며 오리진 HTTP 헤더의 캐시 설정을 이용하여 캐시가 유지되는 시간을 자유롭게 설정할 수 있다
• 캐시가 만료되기 전에 CloudFront 내의 파일 내용을 갱신하고 싶다면 무효화(Invalidation) 기능을 사용하면 된다
• 즉, S3에 업데이트된 파일을 업로드하고 CloudFront가 가지고있는 캐시를 비워준다면 사용자가 해당 파일을 요청하면 CloudFront 의 엣지 로케이션은 캐시를 가지고 있지 않기 때문에 다시 오리진(S3)에서 새 파일을 가져오기 때문에 내용을 업데이트시킬 수 있는 것

읽어보면 좋을 것들

• 정적인 페이지와 동적인 페이지의 차이점이란?
  • https://titus94.tistory.com/4
• 사례별로 알아본 안전한 S3 사용 가이드
  • https://techblog.woowahan.com/6217/
• Route53 DNS 구축. AWS 도메인 연결하기
  • https://velog.io/@nari120/Route53-DNS-구축.-AWS-도메인-연결하기
• 리액트 앱 AWS S3, CloudFront 에 배포하기
  • https://react-etc.vlpt.us/08.deploy-s3.html
• https://42place.innovationacademy.kr/archives/9784
• https://hell-of-company-builder.tistory.com/m/244