React 프로젝트를 KC CDN, Object Storage를 사용하여 정적 웹 사이트 호스팅하기
개요
React 프로젝트 빌드 파일을 Object Storage에 업로드한 후 CDN 서비스와 연동하여 정적 웹 호스팅을 진행하도록 하겠습니다.
* 공공기관용 리전에서 진행했습니다.
Object Storage Bucket 생성
리액트 빌드 파일을 업로드 하기 위한 Object Storage Bucket을 생성합니다.
Object Storage Bucket에 빌드 파일 업로드
React Build 파일을 업로드 합니다.
Object Storage 접근 권한 변경
버킷 접근 권한을 허용으로 변경합니다.
CDN 생성
CDN 생성완료
서비스 도메인으로 접속해 보겠습니다.
루트 경로를 설정해 주지 않았기 때문에 오류가 발생합니다.
아래에서 해당 설정을 진행하겠습니다.
루트 경로 설정
Redirect 경로를 /index.html로 설정합니다.
SPA(Single Page Application)를 정적 웹 호스팅할 때 리다이렉트 설정이 필요한 이유는 클라이언트 사이드 라우팅을 처리하기 위해서입니다.
사용자가 브라우저 주소창에 특정 SPA 내부 페이지의 URL을 직접 입력하거나 새로고침을 할 경우
브라우저는 해당 URL로 서버의 리소스를 요청합니다.
하지만 SPA는 서버에 실제로 해당 경로의 파일이 존재하지 않기 때문에 서버는 오류를 반환합니다.
따라서 SPA를 호스팅할 때는 모든 요청을 SPA의 진입점인 index.html로 리다이렉트하도록 설정해야 합니다.
해당 서비스 도메인으로 접속이 잘 됩니다~
'클라우드 > 카카오 클라우드' 카테고리의 다른 글
| [카카오 클라우드] LB에 하위도메인 등록해서 HTTPS 통신하기(Mixed Content 에러 해결) (0) | 2024.02.08 |
|---|---|
| [카카오 클라우드] Application Load Balancer 생성 및 연동 (0) | 2024.02.07 |
| [카카오 클라우드] NAT Instance 생성하기 (0) | 2024.02.05 |
| [카카오 클라우드] Bastion Instance 생성하기 (0) | 2024.01.28 |
| [카카오 클라우드] SSL 인증서 발급, 인증서 등록 (0) | 2024.01.15 |