React UI 만들기 (3) : AWS Amplify로 배포

React의 배포는 생각보다 간단하다.

React를 build하면 하나의 정적인 static file들만 나오고, 여기에 연관되는 database같은게 없이 API로 데이터를 받아 오기 때문에 AWS S3에 빌드 된 파일들을 올려놓고 앞단에 AWS CloundFront를 붙여 놓으면 된다.

이걸 쌩으로 S3 구성하고 CloudFront를 설정하는 방법이 있다.(중간에 S3와 React 간의 redirect해결 설정 듯) 이거에 대한 자세한 설명이 나와있는 블로그는 다음을 참고 한다.

https://wormwlrm.github.io/2020/11/15/SPA-hosting-via-AWS.html

AWS를 이용해 SPA 호스팅하기 - 재그지그의 개발 블로그

하지만 좀더 편한 방법이 있다. 바로 AWS Amplify다.

AWS Amplify

aws에서 web또는 application을 배포할 때 사용하라고 만들어준 서비스이다.

기본적으로 amlplify는 S3 , CloudeFront에 대한 설정과 관리를 해주며, github과의 연동이 돼서 push, merge pull 등이 될 때 자동으로 배포 및 알림이 되게 해준다. (CI / CD가 해결된다.)

Amplify로 배포

• 시작하기 선택

• github 선택

• repository 선택

• 빌드 설정 구성 (기본값으로 하면 된다.)

• 검토 및 배포

• 도메인 관리에서 도메인 추가

• 가지고 있는 도메인으로 도메인 구성

• 배포 확인

url이 좀 다르게 나왔는데 device-ui.lachani.com이 맞습니다

위 작업이 다 끝나면 성공적으로 배포 된 걸 확인할 수 있다.

CORS ISSUE

Aplify가 기본적으로 https ssl인증서를 붙여서 https 서버로 만들어 버려서 기존 http로 만들어 놨던 api로 서버로 요청을 못보내는 상황이 발생했다....

이를 해결하는 방법은 다음 포스팅에서 다룰 예정이다.