ReadRiddle 개발기 - 6

EC2를 활용하지 않고 React 배포 하는 방법
-> ECS로 ECR컨테이너를 띄워서 ColudFront의 proxy처리(말이 proxy지, AWS는 "동작"이라 표현한다)를 통해 백엔드와 프론트엔드를 연결함

---

S3 버킷 생성

버킷 만들기

• 리전 : 아시아 태평양
• 퍼블릭 액세스 차단 설정 해제
• 버킷 만들기 선택

---

React 디렉터리 build

build 하기
(목적 : S3 버킷에서 정적 페이지를 알아듣기 위한 용도)

1. 필요한 패키지 다운

• frontend 디렉터리로 가서 (보통 npm install을 하는 위치) npm install

2. 프로젝트 빌드

• npm run build

하면은

위와 같은 구조의 새로운 build 디렉터리가 생성된다.

---

build 디렉터리 S3에 업로드

이제 build 디렉터리를 S3에 업로드해서 웹페이지로 볼 수 있게 하는 작업을 진행할 것이다.

이때 주의할 점은 build 디렉터리 자체를 올리는 것이다!!!!!!!!!!
(이걸 놓쳐서 멍고생을...)

---

S3 페이지 호스팅

1. 버킷 > 속성의 아래로 쭉 내려서 정적 웹 사이트 호스팅 편집

• 정적 웹 사이트 호스팅 활성화
• 정적 웹 사이트 호스팅
• 인덱스 문서 : index.html
• 오류 문서 : index.html

---

S3 버킷 권한 정책 수정

1. 버킷 > 권한 > 버킷 정책

• 정책 생성기 선택

=== 정책 생성기 ===

• S3 Bucket Policy
• Effect : Allow
• Principal : all
• Actions : GetObject
• arn : 버킷의 arn

=================

로 생성된 정책 복사

2. 정책 부분에 복사
   (이때 뒤에 /* 를 꼭꼭 붙여줘야 함!!!)

---

이제 정적 웹페이지 주소를 클릭하면 제대로 접속이 되는 것을 확인할 수 있다!

---

S3와 Cloud Front 연동

Cloud Front를 연결하는 이유?

• 빠르다
• proxy 역할을 해줄 수 있음 (백엔드-프론트엔드)

1. CloudFront > 배포 > 생성

• 아까 S3 버킷 선택
• 웹사이트 엔드포인트 사용
• 원본 액세스 공개
• 원본 도메인 -> 버킷 웹 주소
• 프로토콜 > HTTP > 80
• 설정 : 모든 엣지 로케이션에서 사용
• WAF는 비활성화
• 배포 생성

---

이제 배포 도메인 이름을 복사 후 접속하면 사이트가 잘 보임

---

참고한 블로그 :
https://coding-orca.tistory.com/12

---

추후 계획

백엔드 연결을 위한 구성 및 연결