Object Storage & CDN으로 정적 웹사이트 호스팅
카카오클라우드 Object Storage와 CDN을 이용하여 정적 웹 사이트를 호스팅하는 방법을 다룹니다.
- 예상 소요 시간: 30분
- 사용자 환경
- 권장 운영 체제: MacOS, Ubuntu
- Region: kr-central-2
시작하기
Step 1. Object Storage 버킷 생성
Object Storage를 이용하기 위해 버킷(Bucket)을 생성합니다. 버킷을 생성하면 내부에 객체 단위로 데이터를 업로드할 수 있습니다. 웹 사이트를 업로드할 버킷을 생성합니다.
-
카카오클라우드 콘솔에 접속 후, Object Storage 메뉴를 선택합니다.
-
버킷 메뉴에서 [버킷 생성] 버튼을 클릭합니다.
-
새 버킷 생성 팝업창에서 다음과 같이 정보를 입력하고, [생성] 버튼을 클릭합니다.
유형 이름 암호화 Hot web-hands-on 미사용
Object Storage 서비스에서 버킷을 만드는 자세한 방법은 Object Storage > 버킷 생성을 참고하시기 바랍니다.
Step 2. 생성한 버킷에 대한 접근 설정
버킷을 생성하여 객체에 대한 접근 권한 및 라이프 사이클 설정 등을 진행할 수 있습니다. 외부 사용자가 웹 사이트에 접속할 수 있도록 접근 권한을 수정하여 퍼블릭 액세스 허용해야 합니다. 버킷에 대한 퍼블릭 접속을 허용하는 방법은 다음과 같습니다.
- 카카오클라우드 콘솔에서 Object Storage 메뉴 > 버킷 목록에서 퍼블릭 접속을 허용할 버킷을 클릭해 상세 페이지로 이동합니다.
- 권한 탭 > 접근(Access-Control) 탭의 [접근 설정] 버튼을 클릭합니다.
- 접근 설정 팝업창에서 퍼블릭 액세스 허용(Read only) 를 클릭한 후, [저장] 버튼을 클릭합니다.
- 접근 설정 검토 팝업창에서 [확인] 버튼을 클릭해 퍼블릭 액세스를 허용합니다.
모든 IP 주소에서의 퍼블릭 액세스를 허용하게 되면 보안상 이슈가 발생할 수 있습니다. 따라서 별도의 접근 허용 IP 설정을 해주시기 바랍니다.
Step 3. 예제 정적 웹 사이트 작성
가이드 진행을 위해 예제로 사용할 웹 페이지를 작성합니다. 로컬 환경의 터미널을 열고 아래 예제 코드를 입력하여 예제 웹 사이트를 작성합니다.
1. 예제 정적 웹 사이트 생성
-
작업 디렉터리를 생성합니다.
디렉터리 생성mkdir -p ~/Downloads/static-web/images
-
접근 웹 html 파일을 작성합니다.
html 파일 작성cat <<EOF > ~/Downloads/static-web/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>kc-hands-on test page</title>
</head>
<body>
<h1>My test page</h1>
<img src="images/hands-on.png" alt="My test image">
</body>
</html>
EOF -
예제 사이트에서 표시될 이미지 파일을 다운로드합니다.
이미지 파일 다운로드curl -o ~/Downloads/static-web/images/hands-on.png \
https://objectstorage.kr-central-2.kakaocloud.com/v1/fe631cd1b7a14c0ba2612d031a8a5619/public/docs/object-storage-cdn-static-website/kakaocloud-docs.png
2. 예제 사이트 업로드
- 카카오클라우드 콘솔 > Beyond Storage Service > Object Storage으로 이동 후, 버킷 목록에서 사이트를 업로드할 버킷을 클릭해 상세 페이지로 이동합니다.
- 객체 탭의 [파일 업로드] 버튼을 클릭합니다.
- 파일 업로드 화면에서 [폴더 추가] 버튼을 클릭해 앞에서 작업한
~/Downloads/static-web
디렉터리를 업로드합니다. - [업로드] 버튼을 클릭하여 버킷에 폴더를 업로드합니다.
- 업로드 대기열의 [업로드] 버튼을 클릭하면 업로드 결과를 확인 할 수 있습니다.
3. 예제 사이트 접속 확인
- 카카오클라우드 콘솔에서 Object Storage 메뉴 > 버킷 목록에서 예제 사이트를 업로드한 버킷을 클릭해 상세 페이지로 이동합니다.
- 객체 탭에서 웹 페이지의 파일들을 확인하기 위해 업로드한
static-web
디렉터리를 선택합니다. index.html
파일의 [더 보기] 아이콘 > 객체 URL 복사를 선택합니다.- 브라우저에 복사한 URL로 붙여넣기 한 후, 접속해 예제로 작성한 페이지를 확인합니다.
Step 4. CDN 설정
CDN 서비스를 생성하고 설정하는 방법은 다음과 같습니다.
1. CDN 서비스 생성
-
카카오클라우드 콘솔에서 CDN 메뉴를 선택합니다.
-
서비스 목록에서 [서비스 생성] 버튼을 클릭합니다.
-
1단계: 서비스 및 오리진 서버에 CDN 정보를 입력하고, [다음] 버튼을 클릭합니다.
설정할 서비스 및 오리진 서버의 정보
항목 값 서비스 이름 web-hands-on 호스트 서버 KC CDN 오리진 서버 KC Object Storage
- 버킷: web-hands-on 선택오리진 서버 프로토콜 HTTPS 오리진 서버 포트 번호 443 오리진 서버 경로 (선택) /static-web Gzip Compression 사용 -
2단계: 캐시와 3단계: Access Control에서 정보를 입력한 후, [다음] 버튼을 클릭합니다.
- 이번 실습에서는 디폴트 값을 유지합니다.
-
4단계: 검토에서 정보를 검토하고, [생성] 버튼을 클릭하여
web-hands-on
생성을 완료합니다.- [이전] 버튼을 클릭하면 이전 단계로 이동해 정보를 수정할 수 있습니다.
-
CDN의 Service 목록에서 생성된 CDN 서비스명을 확인 한 후 [더 보기] 아이콘 > 시작 또는 재시작을 선택합니다.
-
CDN 서비스 시작 팝업창에서 [시작] 버튼을 클릭합니다.
-
상단의 CDN 서비스를 성공적으로 만들었습니다.’ 라는 메시지를 통해 서비스 시작을 확인합니다.
2. 서비스 도메인 접속 확인
CDN > 서비스 목록에서 생성된 CDN의 서비스 도메인을 복사하여 웹 브라우저에서 테스트 페이지로의 정상 접속을 확인합니다.
http://{CDN 서비스 도메인}/index.html
이미지. 테스트 페이지의 정상 접속 확인