AWS에 React 배포하기 - 1, S3 웹호스팅 설정

리액트 클라이언트를 배포하는 방법은 다양하게 있다.

AWS EC2에 직접 배포하거나 다른 PaaS 플랫폼을 활용하여 배포할수도 있다.

 

많은 방법중에서 AWS S3 정적 웹 호스팅을 활용하여 배포한 이유는 아래와 같다.

1. 간편하다 : 설정이 매우 단순하고 간편해서 쉽게 배포가 가능하다
2. 확장성이 좋다 : CDN을 통해서 다른 국가에서도 빠른 속도로 접근이 가능하다
3. 비용 : S3 자체의 비용이 매우 저렴한편이고 웹호스팅을 위한 S3 비용이 매우 저렴했다

 

 

● AWS IAM 사용자 권한부여

우선 IAM 사용자에게 S3 서비스에 대한 사용권한(AmazonS3FullAccess)을 부여해준다.

 

해당 방법은 이전에 S3 이미지업로드 구현하는 글에서 적어뒀으니 링크로 대체한다.

 

https://iamiet.tistory.com/entry/Nodejs-AWS-S3-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-feat-AWS-SDK-V3

Node.js AWS S3 이미지 업로드하기 feat. AWS-SDK v3

 

 

● 웹 호스팅을 위한 AWS S3 버킷 생성

우선 클라이언트의 파일을 업로드하기 위한 S3 버킷을 생성해준다.

 

버킷생성 - 1

버킷이름 : 원하는 버킷의 이름을 설정해준다. 나는 도메인이름과 동일하게 설정하여 알아보기 쉽게 해두었다.

객체 소유권 : 엑세스 권한을 좀더 세밀하게 컨트롤하기 위해 ACL 활성화됨으로 체크해준다

 

버킷생성 - 2

버킷의 퍼블릭 엑세스 차단 설정 : 모든 퍼블릭 엑세스 차단 체크해제, 아래 인지했음 체크하기

 

예를들어 s3에 index.html 이라는 파일을 배포하게되면 일반 사용자들이 접근했을때 내용을 확인할 수 있어야한다.

이를 위해서 퍼블릭접근을 허용시켜준다.

 

위 설정 이후에 버킷생성 버튼을 클릭해서 버킷을 만들어준다.

 

 

 

● S3 버킷 정적 웹 호스팅 설정

 

버킷 - 속성 진입

 

생성한 버킷을 누르고 속성을 들어가준다. 

 

정적 웹 사이트 호스팅

아래로 쭉 내리다보면 정적 웹 사이트 호스팅이라는 메뉴가 존재한다. 편집을 눌러준다.

 

정적 웹 사이트 호스팅 설정

우선 정적 웹 사이트 호스팅을 선택해준다. 이후 인덱스, 오류문서의 경로를 설정해준다.

리액트와 같은 SPA의 경우 index.html에서 모든 페이지를 처리하기때문에 둘다 index.html을 입력해준다.

 

 

 

● S3 버킷 정책 설정

권한 - 버킷 정책

버킷 상세보기에서 권한탭에 들어가서 버킷 설정에서 편집을 눌러준다

 

정책 생성기

정책을 생성하기 위해서 정책 생성기를 클릭해준다.

 

버킷 ARN

이 때 하단에 있는 버킷 ARN을 미리 복사해둔다.

 

버킷 정책 생성기

버킷 엑세스에 대한 정책을 생성하기 위해 위 사진과 같이 설정해준다.

 

Select Type of Policy : S3 버킷에 대한 정책을 생성하기위해 S3 Bucket Policy 를 선택

Effect : 허용을 할 예정이므로 Allow 를 체크해준다

Actions : S3 버킷에 대한 접근을 위해 GetObject를 선택해준다.

ARN : 좀전에 위에서 복사한 ARN 우측에 /* 를 입력해서 ARN에 모든 데이터에 대한 접근권한을 부여해준다. (arn/*)

 

그 이후 Add Statement를 클릭하면 하단에 테이블모양의 표가 생성되는데 Generate Policy를 클릭하면 정책이 생성된다.

 

생성된 정책

생성된 정책을 복사해준다.

 

 

정책 설정

복사한 정책을 하단 칸에다가 붙여넣고 저장을 눌러준다.

 

 

● AWS CLI를 사용하여 사용자 설정하기

AWS CLI 설치 : https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

최신 버전의 AWS CLI 설치 또는 업데이트 - AWS Command Line Interface

유저 설정

터미널에서 "aws configure --profile <IAM 사용자 이름> 을 입력해서 사용자 설정이 가능하다.

ex) aws configure --profile dongwoo

 

유저 설정 상세창

AWS Access Key ID : IAM 에서 추가한 사용자의 KEY ID

AWS Secret Access Key : IAM 사용자의 엑세스 키

Default region name : 기본 설정 국가. 서울로 지정하거나 기타 사용하는 region을 설정해준다.

Default output format : json 형태로 지정한다

 

 

● AWS CLI를 사용하여 S3에 파일 업로드하기

우선 파일을 업로드 하기전에 React를 빌드하여 실행가능한 파일로 만들어줘야야 한다.

 

리액트 프로젝트 경로에 들어가서 npm run build 명령어를 입력해준다.

 

빌드 성공

빌드가 성공되면 build 폴더가 생성된다.

 

이제 AWS CLI를 사용해서 S3에 빌드한 파일을 업로드해주면 된다.

 

S3에 빌드한 파일 업로드하는 명령어

aws s3 sync ./build s3://hdev.site --profile=dongwoo 이런식으로 자신의 버킷명과 사용자명에 맞게 입력해주면 된다.

 

업로드가 성공하면 아래처럼 별도의 메세지 없이 끝난다.

 

 

업로드가 완료된 모습

 

그리고 내부 파일을 외부에서 접근이 가능하도록 객체 데이터를 퍼블릭으로 설정해준다.

 

객체 데이터를 퍼블릭으로 설정

 

● 호스팅한 사이트를 접속해보기

이제 리액트 프로젝트를 빌드하고 S3에 업로드 및 웹사이트 호스팅까지 모든 설정이 끝났다.

 

실제로 내가 배포한 사이트를 어디에서든 접속이 가능한지 확인해봐야 한다.

 

이전에 설정한 정적 웹 사이트 호스팅 메뉴에 가면 URL이 있다. 해당 URL에 접속해보자

 

웹사이트 URL

 

호스팅 성공

 

 

● 마무리

우선 S3에 배포까진 성공적으로 끝났다. 하지만 조금더 추가해야하는 부분이 있다.

 

1. S3에서 호스팅한 URL은 사용자가 외우기에 힘들다. 사설 도메인을 구입하여 연동할 필요가 있다.
2. S3는 퍼블릭이므로 파일 내부에 아무나 접근할 수 있다는 단점이 있다. 이는 보안에 취약하므로 조치가 필요하다.
3. S3로 배포할경우 사용자가 직접 버킷에 엑세스해서 파일을 다운로드 하기때문에 데이터 처리비용이 증가한다.
4. 3번에서 추가로 버킷은 하나의 지역에서만 호스팅되기 때문에 다른 국가에서는 속도가 느릴수 있다
5. 3, 4번의 단점을 해결하기위해 CDN을 지원하는 CloudFront로 배포를 설정해주면 다양한 이점을 누릴수 있다.

 

여러가지 해결방안이 있지만 우선 위 5가지를 해결을 진행해볼 예정이다.