리액트 배포를 하는 방법은 S3 + CloudFront ( https 보안 및 도메인 설정 가능 )를 쓰는 방법이 있는데
우선 S3배포부터 진행 후(보안이슈가 있겠지만 단순 테스트 용이라면 S3배포만 하는게 간단하긴 하다.) CloudFront 작업을 할 예정이다.
[S3설정]
1. 프론트 프로젝트 빌드
리액트 프로젝트를 진행하던 IDE 터미널에서 build를 실행해준다.
npm run build
사진 설명을 입력하세요.
해당 명령어를 치고 조금 기다리면 build폴더가 생기며 하단부에도 새로운 디렉토리 및 파일들이 생긴다. 이 파일들을 S3에 올리는 작업을 하면 된다.
2. S3 버킷 설정
2-1. 버킷 만들기
퍼블릭 액세스 차단 설정에 관련된 부분만 퍼블릭 설정으로하고 나머지 설정은 손 댈 것이 없다.
버킷 생성 후 리스트에 보면 '객체를 퍼블릭으로 설정할 수 있음' 이 떠있을 것이다.
* 혹시 본인이 CloudFront를 연결해서 배포할 예정이라면 '모든 퍼블릭 액세스 차단'을 체크해둔 채로 쭉 넘어가자. 정책 설정도 굳이 할 필요 없다. 바로 CloudFront 설정으로 넘어가면 됨.
2-2. 버킷 권한 및 정책 설정
하단의 버킷 정책 -> 편집에 들어가서 '편집 생성기' 버튼을 누르면
새로운 사이트가 뜬다. 아래와 같이 설정하자.
Principal : *
AWS Service : Amazon S3
Actions : GetObject
Amazon Resources Name(ARN) : S3 마지막 페이지(버킷 정책 편집) 화면에 있던 ARN을 붙여놓고 +/* 까지 해줘야 한다.
작성 후 Add Statement를 누르면
이렇게 줄이 추가 되며, Generate Poilicy를 눌러 뜨는 Json형태의 정책을 복사하여 S3 정책 편집에다 붙여넣어주면 된다. 그리고 퍼블릭으로 뜨는지 확인하면 되겠다.
2-3. 버킷 정적 웹사이트 호스팅 설정
버킷 - 속성 탭으로 이동 후 제일 하단부로 내려보면 '정적 웹 사이트 호스팅' 이 보일 것이다.
편집을 눌러서 편집을 하자.
2-4. 파일 업로드
파일 추가를 눌러 제일 처음 만들었던 빌드 폴더가 생각날 것이다. 해당 위치로 이동하여 build아래에 있는 파일을 전부 업로드 하면된다. static폴더도 마찬가지.
이 설정까지하고 난 후 S3 엔드포인트로 접속하면 화면을 볼 수 있다.
[CloudFront설정]
1.CloudFront 생성
그 아래도 마찬가지. 혹시 본인이 구매한 개인 도메인이 있다면 해당 설정방법은 따로 알아보길..
나는 안해서 쭉 패스했다.
그러고 정말 마지막 즈음에
기본값 루트 객체를 index.html로 바꿔주고 생성하면 끝이다.
그러고 나온 배포 도메인으로 접속해보면 웹사이트가 잘 열린다.
번외 ) 터미널에서 S3 빌드파일 업로드
S3들어가서 직접 빌드한 파일을 매번 업로드해도 되지만, 사실 계속 고쳐가는 단계에서는 상당히 귀찮다.
그래서 간편하게 쓰라고 만들어둔게 AWS CLI로 맥을 쓰는 사용자는 맥에서 다운로드 받자.
https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html
AWS CLI를 시스템에 설치하거나 업데이트합니다.
docs.aws.amazon.com
뭐 IAM어쩌구저쩌구 하는데 굳이 신경안쓰고 본인 OS에 맞는 CLI설치하면 된다.
그러고나서 S3관련 IAM설정한 사용자 이름을 입력해서 CLI에 유저를 추가한다.
aws configure --profile {IAM유저명}
당시 IAM 생성할 때 발급 받은 AccessKey, Secret AccessKey입력 고고
여기까지하고 빌드는 본인이 쓰는 IDE에서 이미 했을 거라 생각하고
aws s3 sync ./build s3://{s3버킷이름} --profile={IAM유저명}해당 명령어를 치면 build 폴더 하위에 있는 파일 및 폴더들을 S3에 올리겠다. 쯤 되는 명령어다.
어쩌구저쩌구 하면서 열심히 파일을 업로드하는게 보일 것이다.
이렇게 하고나면 CloudFront에서 만들어 준 도메인으로 배포된 내역과 함께 접속 완료!
- 이곳저곳 찾아봤는데 여기가 제일 설명 잘 해줬음. IAM설정을 이미 해뒀던터라 나는 건너뛰었는데 여기 참고하면 될 듯 https://hell-of-company-builder.tistory.com/244
