[React] S3 + CloudFront를 이용해서 배포해보자

AWS에서는 S3를 통해 정적 웹 사이트 호스팅을 할 수 있습니다.

따라서 PHP, JSP처럼 서버 스크립트가 포함된 동적 웹 사이트만 아니라면 웹서버의 역할로도 사용할 수 있습니다.

근데 S3에서는 http의 웹서비스만 제공하고 있다보니 CDN 및 SSL 과 같은 필수 작업들이 필요한데,
이러한 작업은 모두 CloudFront에서 해결해줄 수 있습니다.

따라서 이번 포스팅에서는

React앱을 빌드 후 배포할 때 S3 + CloudFront로 배포를하고 

Jenkins를 이용해서 배포 자동화를 구축해보려고 합니다.

순서는 아래와 같습니다.

1. CRA로 프로젝트 만들기 -> 빌드 실행

2. AWS S3, CloudFront 관련 설정하기

 

 

1. CRA로 프로젝트 만든 후 빌드하기

그럼 첫번째로 

CRA로 간단하게 프로젝트를 만들고 아래 커맨드를 이용해서 Build를 해보면 아래와 같은 사진이 나오면서 빌드가 완료되게 됩니다.

//CRA 프로젝트 생성
npx create-react-app 폴더이름


//build 하기
npm run build

그럼 이제 리액트 앱을 AWS S3에 배포하고, CloudFront를 통하여서 배포를 해보겠습니다.

 

2. IAM 에서 권한 설정 및 CLI 설정

이제 본격적으로 터미널을 통하여 S3에 프로젝트를 배포하려고 합니다.

이를 수행하기 위해서는 AWS에서 권한 설정을 해줘야합니다.

AWS - IAM - 사용자 생성

IAM에 접근하시고 엑세스 관리 - 사용자 - 사용자 생성을 눌러줍니다.

 

사용자 세부 정보 설정

먼저 첫번째 사진과 같이 원하는 사용자 이름을 입력한 후->

권한 설정에서 직접 정책 연결을 선택한 후 AmamazonS3FullAccess를 체크해주고->

마지막으로 검토를 해주시고 사용자 생성을 클릭하면 사용자 생성이 됩니다.

엑세스키 발행

CLI로 접근 할 수 있도록 엑세스키를 만들어줘야합니다.

 

첫번째 사진에서 엑세스 키 만들기를 눌러줍니다 ->

두번째 사진과 같이 CLI를 선택해주시고 ->

세번째 사진에서 태그는 선택 사항이니 필요하면 넣어줍니다 

위 설정이 끝나면 아래와 같이 엑세스키 가 발행되게 됩니다.

잘 복사해서 기록해두거나 CSV파일을 다운받아서 보관해주시면 됩니다.

 

3. S3 설정하기

그럼 이제 우리의 프로젝트를 올릴 S3 관련 설정을 해주겠습니다.

S3 버킷 생성하기

버킷 생성 시 '이 버킷의 퍼블릭 엑세스 차단' 설정으로 꼭 체크가 유지 된 상태로 진행해야합니다.

 

버킷 버전 관리 : 비활성화

기존 암호화 : 비활성화

 

S3 정적 웹 사이트 호스팅 설정 

다음으로 정적 웹 사이트 호스팅 설정을 해줍니다. 

속성 탭에서 정적 웹 사이트 호스팅 편집을 누르시고, 아래와 같이 입력을 해줍니다.

위 와 같이 설정을 해주게 되면 버킷 웹 사이트 엔드포인트가 나타나는데, 우리가 S3에 파일들을 올릴 때 이 링크로 조회할 수 있습니다.

 

S3 권한 설정 - 버킷 정책 편집

잘 생성이 되었으면 권한 설정 - 버킷 정책 편집을 해줍니다.

편집을 누르면 오른쪽 사진과 같이 나오는데 여기에서 정책 생성기를 누릅니다.

 

누르게 되면 아래 첫번째 사진과 같이 나오게 되는데

Select Type of Policy - S3 Bucket Policy

Effect - Allow

Principal - *

AWS Service - Amazon S3

Actions - GetObject

ARN - 정책 편집 페이지에서 나오는 ARN 복사 후 + /* 뒤에 붙여주기

ex) arn:aws:s3:::sample-s3-deploy/*

를 정확하게 입력해주시고, Add Statement를 누르면

아래에 추가되게 되고, Generate Policy를 누르면

아래 왼쪽 사진 처럼 나오게 됩니다. 

이 JSON를 모두 복사해서 오른쪽 사진과 같이 정책 편집란에 넣으시면 됩니다. 

만약 아래와 같이 버킷 정책 변경 사항을 저장할 수 없다는 에러 메세지가 나오면 

퍼블릭 엑세스 차단을 잠시 허용해주면 에러가 해결됩니다. 

설정이 완료되었습니다.

사실 상 객체탭에서 build 폴더를 업로드 할 수 있지만 aws cli를 이용해서 올려보도록 하겠습니다.

 

4. CLI 설치하기

AWS Command Line Interface(AWS CLI)는 AWS 서비스를 관리하는 통합 도구입니다.

저는 Homebrew를 이용해서 설치하고, 아래 커맨드 순서로 진행하겠습니다. 

 // aws cli설치
 brew install awscli
 
 // 설치 경로 확인
 which aws
 
 // 버전확인
 aws --version

잘 설치가 된 것을 확인하실 수 있습니다. 

 

CLI를 이용하여 유저 추가하기

설치가 잘 되셨으면, CLI를 통하여서 아래 커맨드를 입력하여 유저를 추가해야합니다.

 aws configure --profile sample-s3

위 와 같이 잘 입력하면 CLI 관련 설정은 모두 다 끝났습니다.

 

CLI를 이용하여 배포하기

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

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

 EX)
 aws s3 sync ./build s3://sample-s3-deploy --profile=sample-s3

위 명령어는 자주 사용할 명령어 이기 때문에 아래 사진과 같이 package.json에 스크립트로 추가해두자

그럼 명령어를 입력하여서 배포해보겠습니다. 

 

배포 확인

deploy를 하고 S3버킷에 파일들이 잘 업로드 된 것을 확인할 수 있고,

오른쪽 사진에 보면 S3 엔드포인트 주소로 접근했을 때 잘 동작하는 것을 확인할 수 있습니다. 

 

5. CloudFront 적용

잘 배포된 것을 확인했으면 CloudFront을 적용해서 CDN을 입혀보겠습니다.

 

CloudFront에 들어가서 배포 생성을 눌러줍니다.

 

원본 도메인에서 방금 만들어준 s3를 선택해줍니다.

아래와 같이 체크해주고, 제어 설정 생성을 눌러서 제어 설정을 생성해줍니다.

세번째 사진에서 기본 캐시 동작을 설정하게 되는데 여기에서 http접속을 https로 리다이렉트 시킬 수 있습니다. 

 

밑 왼쪽 사진은 도메인이름과 ssl 인증서는 Route53을 통해 개인 도메인 주소를 가지신 분들만 적용하면 될 것 같습니다. 

위 설정을 하고 생성을 누르게 되면 오른쪽 사진과 같이 성공적으로 만들어지게 됩니다.

 

CDN - 캐시 Purge or Invalidation 작업 수행하기

CDN 을 사용한다면, 만약에 프로젝트에 업데이트가 발생했을 때 기존에 CDN 에 퍼져있는 파일들을 새로고침 해주어야 하는데
해당 작업을 처리하기 위해선 Purge, 혹은 Invaldiation 이라는 작업을 해주어야 합니다. 

 

이 작업은 

CDN에 있는 파일을 제거하고 새롭게 받아오게 하는 작업입니다.

이를 하려면 우선 우리가 이전에 만들었던 계정에 아래 사진과 같이 CloudFrontFullAccess 라는 권한도 추가해주어야 합니다. 

이제, AWS CLI로 CloudFront의 앱 정보를 날려주면 됩니다.

아래 커맨드에서 id는 CloudFront 페이지에서 ID 값을 입력하고, 

paths는 invalidation 할 파일들을 지정하는 것인데, 전체를 변경할 때에는 /*를 입력하고, 파일을 지정하고 싶으면 파일 paths를 넣어줍니다.

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

 EX)
 //전체 업데이트 
 aws cloudfront create-invalidation --profile=sample-s3 --distribution-id E3UYHHUOABZQJV --paths /*
 //파일 목록 지정
 aws cloudfront create-invalidation --profile=sample-s3 --distribution-id E3UYHHUOABZQJV --paths / /index.html /error.html /manifest.json /favicon.ico

이 부분도 자주 쓰여지는 커맨드이기에 package.json에 넣어주고, 실행시켜보면 아래 마지막 사진과 같이 잘 실행되는 것을 확인할 수 있습니다.

아래 사진 CloudFront - 배포 - 무효화 탭에서도 잘 적용된 것을 확인하실 수 있습니다.

그리고 바로 왼쪽 사진에 있는 도메인으로 접속해보면 오른쪽 사진처럼 오류가 나게 됩니다.

 

해결방법으로는 기본값 루트 객체를 index.html을 넣어주면 된다.

최종적으로 CloudFront 배포 주소로 접근하였을 때 https가 잘 적용된 것을 확인하실 수 있고, 페이지가 잘 나오는 것을 확인하실 수 있습니다. 

정리

지금까지 React를 S3, CloudFront를 이용해서 아래 커맨드를 입력하여 배포하는 것을 알아보았습니다.

npm run build && npm run deploy && npm run invalidate

다음 포스팅에서는 위 부분을 Jenkins로 자동화 배포 하는 방법을 알아보겠습니다.

---

참고링크

https://aws.amazon.com/ko/blogs/korea/amazon-s3-amazon-cloudfront-a-match-made-in-the-cloud/

실전 Amazon S3와 CloudFront로 정적 파일 배포하기 | Amazon Web Services

https://aws.amazon.com/ko/cli/

Command Line Interface - AWS CLI - AWS

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

AWS CLI 시작 - AWS Command Line Interface