✨ 도메인 등록을 위한 Route53 호스팅영역 생성
가비아에서 도메인을 구입한 후, AWS의 Route53에 호스팅영역을 생성해 줄 겁니다!
Route53 초기화면에서 호스팅영역 생성을 눌러줍니다.
도메인 이름에는 구입한 도메인 이름을 그대로 적어주면 되고, 유형은 퍼블릭 호스팅 영역을 선택 후 생성버튼을 눌러줍니다.
그러면, NS 유형의 값/트래픽 라우팅 대상의 총 4개의 값이 있는 걸 확인할 수 있습니다.
해당 값을 가지고 가비아의 마이페이지로 이동합니다.
구입한 도메인의 상세 페이지로 이동하면 네임서버가 기본 1차~4차까지 설정되어 있을 겁니다.
이 값들을 방금 받은 값으로 바꿔주겠습니다.
설정버튼을 클릭합니다.
1차부터 4차까지 Route53 호스팅영역을 생성하면서 받은 값/트래픽 라우팅 대상 값을 입력해줍니다. (참고로 맨 끝 .은 생략하고 입력해줍니다.)
자, 일단 여기까지하고 S3, CloudFront로 배포하면서 다시 연결하겠습니다.
✨ 리액트 빌드 + S3 버킷 생성
📌 React 빌드
우선, S3버킷에 담아줄 빌드파일을 생성하겠습니다.
npm run build위 명령어를 실행하면 build 폴더가 생성되고, 그 안에 빌드된 파일이 담겨져 있는 것을 확인할 수 있습니다.
이 파일들은 추후 S3 버킷에 넣어줄 겁니다!
📌 S3버킷 생성
S3에서 버킷 만들기를 눌러줍니다.
리전은 서울로 설정해주고, 고유한 버킷 이름을 입력해줍니다.
그 외 설정은 일단 건들지말고 버킷만들기를 눌러줍니다!
해당 버킷에 들어간 후 업로드를 눌러줍니다.
아까 빌드했던 파일들 (build 폴더 안에 있는 파일들)을 업로드 해 줍니다.
이 때, 저의 시행착오를 하나 알려드리자면, build폴더를 그대로 업로드해주는 것이 아니라 반드시 build 폴더 안의 파일들을 드래그해서 업로드해 줘야 합니다!
✨ CloudFront 배포
자 이제 CloudFront로 배포를 해보겠습니다.
AWS CloudFront에서 CloudFront 배포 생성을 클릭해 줍니다!
원본 도메인은 방금 만든 S3 버킷을 선택해주고, 원본 엑세스는 Legacy access identities를 선택해 줍니다.
그리고 새 OAI 생성을 눌러 원본 엑세스 ID를 발급받고 버킷 정책은 예를 선택해줍니다.
우리가 아까 만든 S3의 속성을 보면, 퍼블릭 엑세스 차단으로 설정되어 있을 겁니다.
그렇기때문에, CloudFront가 해당 S3에 접근할 수 있도록 위와 같은 설정을 해 줘야 합니다.
뷰어 프로토콜 정책에서 Redirect HTTP to HTTPS로 선택하게 되면, CloudFront가 자동으로 HTTPS로 리디릭션 시켜줍니다.
만약, HTTP and HTTPS를 선택하면 http, https 둘다 접속 가능합니다.
원하는 설정으로 체크하고 밑으로 내려갑니다.
📌 도메인 연결
이제 도메인을 연결해줄 겁니다.
우선 대체 도메인 이름에 우리가 Route53으로 등록했던 도메인이름을 입력해줍니다.
그리고, 아직 SSL 인증서를 발급받지 않았기 때문에 인증서 요청을 클릭해줍니다.
그러면, ACM의 인증서 요청 화면으로 이동하게 됩니다.
퍼블릭 인증서 요청을 체크하고 다음으로 넘어가 줍니다.
도메인 이름을 입력해주고, 검증방법은 DNS 검증을 선택해줍니다.
일단 지금은 검증 대기 중이라고 뜰 겁니다.
해당 인증서 ID를 클릭해줍니다.
Route 53에서 레코드 생성을 클릭해줍니다.
다음 페이지에서도 레코드 생성을 눌러주면 Route 53에 CNAME 레코드가 추가되게 되고, 인증서를 다시 확인해보면
상태가 발급됨으로 변경된 것을 확인할 수 있습니다!
다시, CloudFront 배포 설정 창으로 돌아와서, 방금 발급한 SSL 인증서를 등록해줍니다.
그리고 기본값 루트 객체를 /index.html로 설정해주고 배포 생성을 클릭해줍니다.
📌 Route 53 레코드 생성
도메인 연결 관련 마지막 과정입니다.
Route 53에서 우리가 생성해준 호스팅 영역을 선택합니다.
레코드 생성을 클릭합니다.
단순 라우팅을 선택해주고, 다음 화면에서 단순 레코드 정의를 클릭해주면,
이런 모달이 뜰 겁니다.
여기서, 값/ 트래픽 라우팅 대상을 CloudFront 배포에 대한 별칭으로 설정해주고, 밑의 값은 배포된 CloudFront를 선택해줍니다.
모든 설정을 마치고 레코드 생성을 클릭해줍니다.
📌 배포 마무리
자, 이제 마지막으로 CloudFront 속성 하나만 만져주고 마무리하겠습니다.
CloudFront의 방금 작업한 배포를 클릭해서 들어가 준 후, 오류 페이지로 이동합니다.
사용자 정의 오류 응답 생성을 클릭해줍니다.
위처럼 속성값을 설정해줍니다.
기본적으로 리액트 같은 경우는 index.html 문서 안에서 라우팅이 이루어지는 구조입니다.
그렇기 때문에, 만약 라우팅이 잡혀있지 않은 주소로 이동했을 경우, 예외를 핸들링 할 수 있도록 index.html로 응답 페이지를 설정해주는 것 입니다.
해당 도메인으로 배포가 잘 되었습니다~!
레퍼런스
