Skip to main content

Hosting static website with Object Storage & CDN

This document will cover how to host a static website using KakaoCloud Object Storage and CDN.

Basic information
  • Estimated time: 30 minutes
  • Recommended Operating system: MacOS, Ubuntu
  • Region: kr-central-2

Step 1. Create bucket in Object Storage​

Create a bucket to use Object Storage. Once you create a bucket, you can upload data in units of objects. Create a bucket to upload a website.

  1. Go to KakaoCloud Console > Object Storage.

  2. Click the [Create new bucket] button on the Buckets tab.

  3. In the Create New Bucket pop-up window, enter the information as follows and click the [Create] button.

    TypeNameEncryption
    Hotweb-hands-onNot in use
    info

    For detailed instructions on creating a bucket in the Object Storage service, please refer to Object Storage > Create Bucket.

Step 2. Set access to created bucket​

You can create a bucket and proceed with setting access rights and life cycles for objects. You need to modify the access rights to Allow Public Access so that external users can access the website. Here's how to allow public access to a bucket:

  1. Go to KakaoCloud Console > Object Storage > Bucket List and select a bucket.
  2. Go to Permission tab > Access control and click the [Configure access] button.
  3. In the pop-up window, click Allow public access (Read only), and then click the [Save] button.
  4. In the pop-up, click the [OK] button to allow public access.
caution

Allowing public access from all IP addresses may cause security issues. Therefore, please set separate access-allowed IP settings.

Step 3. Create example static website​

Create a web page to use as an example for the guide. Open a terminal in your local environment and enter the example code below to create an example website.

Create example static website​

  1. Create a working directory.

    Create directory
    mkdir -p ~/Downloads/static-web/images

  2. Create an access web html file.

    Create html file
    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. Download the image file that will be displayed on the example site.

    Download image file
    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

Upload example site​

  1. Go to KakaoCloud Console > Object Storage > Bucket List and select a bucket.
  2. Go to Objects tab and click the [Upload file] button.
  3. Click the [Add folder] button to upload the ~/Downloads/static-web directory you worked on earlier.
  4. Click the [Upload] button to upload the folder to the bucket.

Access tp example site​

  1. Go to KakaoCloud Console > Object Storage > Bucket List and select a bucket.
  2. Go to Objects tab and select the uploaded static-web directory to check the web page files.
  3. Select the [More] icon of the index.html file > Copy object URL.
  4. Paste the copied URL into the browser, then access and check the page created as an example.

Step 4. Set up CDN​

Here are the steps to create and set up a CDN service.

Create CDN service​

  1. Select the CDN menu in the KakaoCloud Console.
  2. Click the [Create Service] button in the Service List.
  3. Enter the CDN information in Step 1: Service and Origin Server and click the [Next] button.
Information on the service and origin server to set​
ItemValue
Service nameweb-hands-on
Host ServerKC CDN
Origin ServerKC Object Storage
- Bucket: Select web-hands-on
Origin Server ProtocolHTTPS
Origin Server Port Number443
Origin Server Path (Optional)/static-web
Gzip CompressionEnable
  1. Enter the information in Step 2: Cache and Step 3: Access Control, and then click the [Next] button.
  • For this exercise, keep the default values.
  1. Review the information in Step 4: Review, and then click the [Create] button to complete the creation of web-hands-on.
  • Click the [Previous] button to go to the previous step and edit the information.

  1. Check the generated CDN service name in the Service list of CDN, and then select the [More] icon > Start or Restart.

  2. Click the [Start] button in the CDN Service Start pop-up window. 8. Confirm the service start with the message CDN service was successfully created’ at the top.

Check service domain access​

CDN > Service list Copy the service domain of the CDN created and confirm normal access to the test page in a web browser.

Service domain address to access
http://{CDN service domain}/index.html

이미지 Access to test page