본문으로 건너뛰기

Object Storage & CDN으로 정적 웹사이트 호스팅

카카오클라우드 Object Storage와 CDN을 이용하여 정적 웹 사이트를 호스팅하는 방법을 다룹니다.

안내
  • 예상 소요 시간: 30분
  • 사용자 환경
    • 권장 운영 체제: MacOS, Ubuntu
    • Region: kr-central-2

Step 1. Object Storage > 버킷 생성하기​

Object Storage를 이용하기 위해 버킷(Bucket)을 생성합니다. 버킷을 생성하면 내부에 객체 단위로 데이터를 업로드할 수 있습니다. 웹 사이트를 업로드할 버킷을 생성합니다.

  1. 카카오클라우드 콘솔에 접속 후, Object Storage 메뉴를 선택합니다.

  2. 버킷 메뉴에서 [버킷 생성] 버튼을 클릭합니다.

  3. 새 버킷 생성 팝업창에서 다음과 같이 정보를 입력하고, [생성] 버튼을 클릭합니다.

    유형이름암호화
    Hotweb-hands-on미사용
안내

Object Storage 서비스에서 버킷을 만드는 자세한 방법은 Object Storage > 버킷 생성을 참고하시기 바랍니다.

Step 2. 생성한 Bucket 접근 설정하기​

버킷을 생성하여 객체에 대한 접근 권한 및 라이프 사이클 설정 등을 진행할 수 있습니다. 외부 사용자가 웹 사이트에 접속할 수 있도록 접근 권한을 수정하여 퍼블릭 액세스 허용해야 합니다. 버킷에 대한 퍼블릭 접속을 허용하는 방법은 다음과 같습니다.

  1. 카카오클라우드 콘솔에서 Object Storage 메뉴 > 버킷 목록에서 퍼블릭 접속을 허용할 버킷을 클릭해 상세 페이지로 이동합니다.
  2. 권한 탭 > 접근(Access-Control) 탭의 [접근 설정] 버튼을 클릭합니다.
  3. 접근 설정 팝업창에서 퍼블릭 액세스 허용(Read only) 를 클릭한 후, [저장] 버튼을 클릭합니다.
  4. 접근 설정 검토 팝업창에서 [확인] 버튼을 클릭해 퍼블릭 액세스를 허용합니다.
주의

모든 IP 주소에서의 퍼블릭 액세스를 허용하게 되면 보안상 이슈가 발생할 수 있습니다. 따라서 별도의 접근 허용 IP 설정을 해주시기 바랍니다.

Step 3. 예제 정적 웹 사이트 작성하기​

가이드 진행을 위해 예제로 사용할 웹 페이지를 작성합니다. 로컬 환경의 터미널을 열고 아래 예제 코드를 입력하여 예제 웹 사이트를 작성합니다.

예제 정적 웹 사이트 생성​

  1. 작업 디렉터리를 생성합니다.

    디렉터리 생성
    mkdir -p ~/Downloads/static-web/images

  2. 접근 웹 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

  3. 예제 사이트에서 표시될 이미지 파일을 다운로드합니다.

    이미지 파일 다운로드
    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

예제 사이트 업로드​

  1. 카카오클라우드 콘솔 > Beyond Storage Service > Object Storage으로 이동 후, 버킷 목록에서 사이트를 업로드할 버킷을 클릭해 상세 페이지로 이동합니다.
  2. 객체 탭의 [파일 업로드] 버튼을 클릭합니다.
  3. 파일 업로드 화면에서 [폴더 추가] 버튼을 클릭해 앞에서 작업한 ~/Downloads/static-web 디렉터리를 업로드합니다.
  4. [업로드] 버튼을 클릭하여 버킷에 폴더를 업로드합니다.
  5. 업로드 대기열의 [업로드] 버튼을 클릭하면 업로드 결과를 확인 할 수 있습니다.

예제 사이트 접속 확인​

  1. 카카오클라우드 콘솔에서 Object Storage 메뉴 > 버킷 목록에서 예제 사이트를 업로드한 버킷을 클릭해 상세 페이지로 이동합니다.
  2. 객체 탭에서 웹 페이지의 파일들을 확인하기 위해 업로드한 static-web 디렉터리를 선택합니다.
  3. index.html 파일의 [더 보기] 아이콘 > 객체 URL 복사를 선택합니다.
  4. 브라우저에 복사한 URL로 붙여넣기 한 후, 접속해 예제로 작성한 페이지를 확인합니다.

Step 4. CDN 설정하기​

CDN 서비스를 생성하고 설정하는 방법은 다음과 같습니다.

CDN 서비스 생성하기​

  1. 카카오클라우드 콘솔에서 CDN 메뉴를 선택합니다.

  2. 서비스 목록에서 [서비스 생성] 버튼을 클릭합니다.

  3. 1단계: 서비스 및 오리진 서버에 CDN 정보를 입력하고, [다음] 버튼을 클릭합니다.

    설정할 서비스 및 오리진 서버의 정보​
    항목값
    서비스 이름web-hands-on
    호스트 서버KC CDN
    오리진 서버KC Object Storage
    - 버킷: web-hands-on 선택
    오리진 서버 프로토콜HTTPS
    오리진 서버 포트 번호443
    오리진 서버 경로 (선택)/static-web
    Gzip Compression사용

  4. 2단계: 캐시와 3단계: Access Control에서 정보를 입력한 후, [다음] 버튼을 클릭합니다.

    • 이번 실습에서는 디폴트 값을 유지합니다.

  5. 4단계: 검토에서 정보를 검토하고, [생성] 버튼을 클릭하여 web-hands-on 생성을 완료합니다.

    • [이전] 버튼을 클릭하면 이전 단계로 이동해 정보를 수정할 수 있습니다.

  6. CDN의 Service 목록에서 생성된 CDN 서비스명을 확인 한 후 [더 보기] 아이콘 > 시작 또는 재시작을 선택합니다.

  7. CDN 서비스 시작 팝업창에서 [시작] 버튼을 클릭합니다.

  8. 상단의 CDN 서비스를 성공적으로 만들었습니다.’ 라는 메시지를 통해 서비스 시작을 확인합니다.

서비스 도메인 접속 확인​

CDN > 서비스 목록에서 생성된 CDN의 서비스 도메인을 복사하여 웹 브라우저에서 테스트 페이지로의 정상 접속을 확인합니다.

접속할 서비스 도메인 주소
http://{CDN 서비스 도메인}/index.html

이미지 이미지. 테스트 페이지의 정상 접속 확인