AWS S3 ,CloudFront로 리액트앱 프론트앤드 웹페이지 배포하기

0. 들어가기 전에

0-1 사전 준비 체크 리스트

1. 리액트 프로젝트가 CRA 혹은 순수 리액트 등으로  이미 만들어져 있어야 합니다.

2. AWS 계정이 필요합니다.

3. 처음 시도해보거나 중요한 프로젝트라면 새롭게 branch를 만들거나 fork로 먼저 진행해봅니다.

4. 프로젝트는 npm run build로 빌드를 미리 해놓아야 합니다.

 

0-2 S3 를 이용하는 이유

아마존 웹서비스의 S3라는 서비스는 Simple Storage Service이다.

즉 쉽게 파일을 저장할 수 있는 서비스이다.

서버를 구축해서 파일을 저장할 수도 있겠지만, 아마존에서 제공하는 S3를 사용한다면

저장에만 초점을 맞춰서 서비스를 사용할 수 있는 장점이 있다.

 

출처 : https://new93helloworld.tistory.com/179

 

 

0-3 CloudFront 를 사용하는 이유

출처:https://musma.github.io/2019/06/29/publish-static-assets-over-https-using-cloudfront.html#fn:1

0-4. 전반적인 과정 순서

1. IAM 권한 설정
2. S3 버킷 만들기
3. 빌드된 프로젝트 S3 버킷에 업로드
4. CloudFront 배포 생성

 

1. IAM 권한 설정

1-1 사용자 생성

오른쪽 위 사용자 추가를 누릅니다.

사용자 이름을 입력하시고 액세스 키 - 프로그래밍 방식 액세스에 체크하고 생성합니다.

 

1-2 권한 설정

AmazonS3FullAcess

cloudfront를 하실 분들은 미리 체크해주세요

기존 정책 직접 연결 탭에서 AmazonS3FullAcess와 CloudFrontFullAccess 를 체크해줍니다.

 

1-3 액세스키 발급

 

.csv 다운로드를 하거나 .env 파일에 직접 적어서 보관할 수 있습니다.

 

2. S3 버킷 만들고 설정하기

2-1. 버킷 만들기

s3에 들어갑니다

오른쪽 위 주황색 버킷만들기를 누릅니다

버킷 이름을 정하고 acl 활성화됨을 클릭해줍니다

모든 퍼블릭 액세스 차단을 풀어주고 알고있다고 체크해줍니다

여기에서 다르게 건드릴 부분이 있으시다면 건드리시고 버킷 만들기를 누릅니다

 

2-2. 속성 – 정적 웹사이트 호스팅

 

버킷 안에서 속성을 누릅니다

맨 아래 정적 웹 사이트 호스팅에서 편집을 눌러줍니다

인덱스 문서와 오류 문서를 index.html로 설정해줍니다

 

2-3. 권한 – 버킷 정책 편집

권한 탭으로 갑니다

버킷 정책 편집을 해줍니다

오른쪽 위 정책 생성기를 눌러줍니다 그리고 버킷 ARN를 복사해줍니다

s3, allow, * , getObject를 선택해주시고 ,arn 에는 아까 복사한 것을 붙여넣기 하신 후 /*을 뒤에 붙혀줍니다  arn:aws:s3:::productlist-devvv/* 처럼 적어줍니다

getObject

다 하시고 생성한 뒤 파일을 열 수 있게 되는데 복사해줍니다.

 

아까 권한탭에 버킷정책편집에 붙혀 넣어줍니다

 

3. 생성한 S3 버킷에 코드 업로드 (with CLI)

여기에서 build 폴더를 업로드할수도 있지만 더 편한 aws cli를 이용해보도록 하겠습니다.

3-1. AWS CLI 설치

공식 문서를 이용해 설치합니다. WSL2 유저는 Linux 방법을 따라 설치하면 됩니다.

https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/cli-chap-install.html

AWS CLI 설치, 업데이트 및 제거 - AWS Command Line Interface

3-2. 유저 추가

아까 IAM 에서 추가한 사용자 이름을 통해서 CLI에 유저를 추가해줍니다.

 

aws configure --profile [유저명]

 

유저 key , secret  key , region(지역) , output format 을 다음과 같이 입력해줍니다.

• Default region name : ap-northeast-2
• Default output format : json

3-3 배포하기 

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

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

EX)
aws s3 sync ./build s3://productlist-devvv --profile=productlistuser

앞으로 자주 사용할 명령어기 때문에 package.json 에 스크립트로 추가해두면 편리합니다.

이렇게 설정해두면 npm run deploy 혹은 yarn deploy 로 입력하면 됩니다.

 

3-4. 중간 체크

 

배포를 해줍니다.

s3 속성탭 맨 아래에 정적 웹 사이트 호스팅에 보면 배포 주소를 볼 수 있습니다

잘 나오는지 확인하시면 됩니다.

 

4. CloudFront 배포 생성

이제 더 빠릿하게 작동시키거나 https 사이트 혹은 각자의 도메인주소를 적용시킬 분들은 CloudFront 를 적용시켜줍니다.

 

필요없으신분들은 안하셔도 됩니다.

 

오른쪽 위 배포생성을 눌러줍니다

누르시면 자동으로 s3 목록이 뜹니다 그중에서 선택하시면 됩니다.

 

oai 를 사용함으로 체크해주시고 새  oai 생성을 누르면 자동으로 생성해줍니다

아래로 내려 두번째를 선택해줍니다

이렇게 하면 http 접속을 https 로 리다이렉트 시킬 수 있습니다.

밑의 대체 도메인이름과 ssl 인증서는 route53을 통해 개인 도메인 주소를 가지신 분들만 적용하시면 됩니다.

배포 생성을 하시면 됩니다

 

5. 캐시 Invalidation하기

 

aws cloudfront create-invalidation --profile=[사용자 아이디] --distribution-id [CloudFront ID] --paths /*

EX)
aws cloudfront create-invalidation --profile=productlistuser --distribution-id E22ALUD2HHBWFL --paths /*

사용자 아이디는 IAM 에서 설정한 아이디를 입력

distribution-id 는 CloudFront 페이지에서 ID 값을 입력

 

paths 는 invalidation 할 파일들을 지정하는 것인데, 전체를 변경할 것이기 때문에 /* 을 입력하였습니다. (업데이트 할 항목만 입력하여도 됩니다)

build , deploy , invalidate 순서로 하시면 됩니다

 

입력시 화면 이렇게 끝나면 ctrl + c 로 종료해주면 됩니다

 

무효화 탭에 가보면 잘 적용된 모습

 

 

그리고 이제 바로 cloudfront 에서 준 배포사이트를 들어가면 오류가 납니다.

 

 

오류가 난 화면

 

해결 방법

 

1

cloudfront 메인에서 편집을 들어갑니다

기본값 루트 객체에 index.html 을 넣어줍니다

 

2

오류 페이지 탭에 들어갑니다 사용자 정의 오류 응답 생성을 눌러줍시다

403,404에 체크를 해주시고 응답 페이지 경로에 /index.html 을 넣어줍니다

http 응답 코드는 안해도 되지만 오류가 나신다면 설정해보시는 것을 추천드립니다.

 

완성!

http 사이트에서 https 사이트로 적용된 모습입니다.

netflify , heroku , gh-pages 등등을 이용하다가 https를 적용시켜주는 aws가 필요한 것 같아 공부하였습니다.

참고 사이트

https://42place.innovationacademy.kr/archives/9784

AWS S3, CloudFront로 리액트(프론트) 배포하기

https://stackoverflow.com/questions/34060394/cloudfront-s3-website-the-specified-key-does-not-exist-when-an-implicit-ind

CloudFront + S3 Website: "The specified key does not exist" when an implicit index document should be displayed

https://musma.github.io/2019/06/29/publish-static-assets-over-https-using-cloudfront.html#fn:1

CloudFront를 이용해 HTTPS로 정적 리소스 배포하기