프론트엔드의 꽃, 리액트 5주차 정리 (AWS S3 버킷, Route 53 이용해서 정적 웹 호스팅, Firebase로 배포하기)

AWS S3 버킷

S3 버킷이란?

• S3(Simple Storage Service) : 단순 스토리지 서비스
• 이미지, html, css, js 같은 정적 파일을 저장할 수 있고 정적 웹 호스팅이 가능함

정적 웹 사이트란?

• 서버 측 스크립트(PHP, JSP, ASP 등) 사용 유무를 기준으로 동적 웹 페이지와 정적 웹 페이지로 나눌 수 있음
• 정적 웹 사이트는 html, css, js 같은 정적 자원으로만 이루어진 웹 사이트

 

S3 버킷 설정하기

1. 버킷 생성하기 (사이트 도메인과 버킷 이름이 같아야함)

2. 권한 탭에서 ARN([ARN: arn:aws:s3:::[도메인 주소]])를 복사

3. 정책 생성기를 눌러서 정책 생성

• Step 1) Select Type of Policy : S3 Bucket Policy
• Step 2) Actions : GetObjcet

4. 생성한 정책을 복사해서 버킷 정책 편집기에 붙여넣기

• arn 뒤에 반드시 /* 써주기!!

5. S3 버킷에 결과물 올리기

• 빌드하기

yarn build

• build 폴더 내의 파일을 버킷에 올리기

6. 정적 웹 사이트 호스팅 설정하기

7. 엔드포인트 주소를 클릭해서 호스팅 확인

 

도메인 연결하기

• Route 53에서 호스팅 영역 생성
• 도메인 이름 작성, 유형은 퍼블릭 호스팅 영역 선택
• 네임서버를 가비아(도메인을 산 곳)에 등록함 (레코드 이름, 값/트래픽 라우팅 대상)
• 레코드 생성

---

Firebase로 배포하기

Firebase 호스팅

• Firebase 대시보드에서 호스팅 신청
• 프로젝트에 cli 설치

yarn global firebase-tools

• Firebase에 로그인 후 init 실행

yarn firebase login #웹브라우저에서 내 구글 계정으로 로그인
yarn firebase init

• Hosting 선택, Use an existing project, Firebase 프로젝트 선택
• What do you want to use as your public directory? → public

 

Firebase에 결과물 올리기

• firebase.json 확인
• 빌드한 결과물 올리기

yarn firebase deploy

• Firebase 대시보드 → 호스팅 이동, 도메인으로 들어가서 확인