npx cra 명령어를 이용해 리액트 프로젝트를 만들고,
이를 S3를 통해 배포하는 과정을 알아볼 것 이다.
AMAZON S3
: 아마존 웹 서비스에서 제공하는 온라인 스토리지 웹 서비스이다.
빌드파일을 서브한다,
시작
React bulid
: 먼저 다음의 명령어를 사용하여 배포 가능한 상태로 빌드 해준다.
Terminal : npx react-create-app '프로젝트명'
ㄴ localhost 3000이 아닌 누구나 접속할 수 있는 퍼블릭 링크로 만든다.
이제 build 폴더가 생성되었을 것이다.
Create Bucket
[1] 버킷생성
AWS S3
S3에 접속하여 버킷을 생성한다.
--
[2] 버킷만들기 버튼
--
[3] 버킷 기본정보 설정
region과 bucket name을 입력한다.
--
[4] 버킷 생성 완료
그러나 접근 가능한 퍼블릭 상태가 아니다.
--
[5] 속성>정적 웹사이트 호스팅
속성 ->정적 웹사이트 호스팅 -> 편집
--
[6] 정적 웹사이트 호스팅 편집
-
인덱스 문서
엔트리포인트가 되는 index.html을 적어주고, -
오류 문서
에러핸들링 문서가 없으니 index.html
저장
--
[7] 정적 웹사이트 엔드포인트가 생성됨
public access
(권한 설정)
[1] 퍼블릭 엑세스설정
유저들이 접근할 수 있도록,
권한 > 퍼블릭 엑세스 차단(버킷설정)에서 체크해제
--
[2] 버킷정책
json type의 아마존에서 요구하는 내용들을 입력
그러나 익숙하지 않아, 정책 생성기를 활용하여 생성한다.
--
[3] 정책 생성기
principal = *
actions = GetObject
AMAZON Resource Name (ARN) = `arn:aws:s3:::react-first-deploy/*`
으로 설정해주었다.
Add statement로 추가 후 , Generate Policy를 누르면
정책 객체가 생성된다
다음, 복사하여 객체들을 버킷정책에 붙여넣고 저장한다.
그러면 퍼블릭 액세스 권한이 있는 버킷이 된다.
생성 후 버킷정책에 저장버튼
upload build file
[1] 빌드파일을 업로드
--
[2] 엔드포인트 접속
엔드포인트 접속하면 로컬호스트 3000이 아닌 퍼블릭 링크로 접속 가능하다.
AWS EC2, AWS RDS 까지 완료해야, 앱을 정상적으로 배포할 수 있다.
