Skip to main content

Offloading web server using CDN

Offload static data delivery for Virtual Machine-based web applications using CDN services.

info
  • Estimated time: 60 minutes
  • User environment
    • Recommended OS: MacOS, Ubuntu
    • Region: kr-central-2
  • Reference documentation

Before you start​

To proceed with this tutorial, ensure you have verified your access key and VM access key pair.

Step 1. Configure bastion host​

Deploy a Virtual Machine-based web application using Load Balancer and MySQL. To enable external access, configure a bastion host.

  1. In KakaoCloud Console > Beyond Compute Service > Virtual Machine, create a bastion instance using the table below:

    Instance namehandson-bastion
    Count1
    Instance typem2a.large
    ImageUbuntu 20.04
    Volume size10
    Subnetpublic
    Public IPConnected

  2. In Beyond Networking Service > VPC, select Security and configure security groups and inbound rules for bastion access:

    Inbound ruleProtocolSourcePort number
    bastion inbound policy 1TCP0.0.0.0/010000-10010
    bastion inbound policy 2TCP0.0.0.0/081
    bastion ssh policyTCP0.0.0.0/022

  3. Associate a public IP with the bastion host, then access it via SSH from your local terminal:

    Access bastion host
    ssh -i ${PRIVATE_KEY}.pem ubuntu@${BASTION_PUBLIC_IP}

  4. Configure the bastion host using nginx-proxy-manager by running the following commands:

    Provision bastion host
    sudo curl -o /tmp/init-bastion.sh https://raw.githubusercontent.com/kakaoenterprise/kc-handson-config/vm-3tier/init-bastion.sh
    bash /tmp/init-bastion.sh

  5. The nginx-proxy-manager is now running. Open your local browser and enter the following address to access the management page:

    http://${BASTION_PUBLIC_IP}:81/login
    # ID: admin@example.com
    # Password: changeme

Step 2. Create managed MySQL database​

KakaoCloud MySQL is a fully managed database service provided in a VPC (Virtual Private Cloud) environment. It allows easy provisioning of MySQL instances from the console without complex installation processes, and ensures secure operation within a logically isolated network.

In KakaoCloud Console > Data Store > MySQL, click [Create instance group] and follow the MySQL instance group creation guide.

Database creation details​

TypeMySQL
Instance Group Namehandson-mysql
MySQL User Nameadmin
MySQL Passwordroot1234
Quantity1
Flavorm2a.large
Volume100

Step 3. Configure application server​

  1. Create Virtual Machine instances using the following table:

    Instance namehandson-app
    Count2
    Instance typem2a.large
    ImageUbuntu 20.04
    Volume size20
    Subnetpublic

  2. In the VPC menu, select Security and configure the inbound rules to allow external access via the bastion instance.

    Inbound ruleProtocolSourcePort number
    app ssh policyTCPBASTION_PRIVATE_IP/3222
    app ping policyICMPVPC_CIDR-
    app inbound policyTCPVPC_CIDR8080

  3. In the nginx-proxy-manager management page, navigate to Dashboard > Streams and register the private IPs of application hosts with ports 10000-10001.

  4. Access the application hosts via SSH through the bastion instance:

    Access application host
    # app-1
    ssh -i ${PRIVATE_KEY}.pem ubuntu@${BASTION_PUBLIC_IP} -p 10000

    # app-2
    ssh -i ${PRIVATE_KEY}.pem ubuntu@${BASTION_PUBLIC_IP} -p 10001

  5. Clone the example project and navigate to the project folder:

    Navigate to example project folder
    git clone https://github.com/kakaoenterprise/kic-library-react
    cd kic-library-react

  6. Install the necessary packages for building and running the example project:

    Install required packages
    bash install-requirements.sh

  7. Enter the environment variables required to run the application. Use the vim command to open the environment variable configuration file, and refer to the example below to set the variables:

Enter environment variables
 vim app-env.sh

 # app-env.sh

 # export PROFILE='dev'
 # export MYSQL_HOST='${MYSQL_PRIMARY_ENDPOINT}'
 # export DB_USERNAME='admin'
 # export DB_PASSWORD='root1234'

  1. Build the example project after entering the environment variables:

    Build the project
    bash app-build.sh

  2. Run the example application and then exit the ssh session:

    Exit session
    bash start-app.sh

Step 4. Set up an application server load balancer​

  1. Navigate to KakaoCloud Console > Beyond Networking Service > Load Balancing > Load Balancer and click the [Create load balancer] button.

  2. Enter the name and description of the load balancer, and configure the VPC and subnet.

  3. Proceed with the basic settings:

    Load balancer namehandson
    VPC${PUBLIC}
    Subnet${PUBLIC}

  4. Configure connection settings, listener, and target groups:

    Listener protocolHTTPS
    Listener port443
    Target group protocolHTTP
    Target group algorithmRound Robin

  5. Proceed with SSL configuration:

    • Register your SSL certificate with the load balancer.

  6. Perform health check settings:

    TypeHTTP
    HTTP methodGET
    HTTP version1.1
    HTTP status code200
    Check path/api/v1.0/management/category/all
    Check interval10 seconds
    Timeout5 seconds
    Healthy threshold3 consecutive successes
    Unhealthy threshold3 consecutive failures

  7. Configure connection resources :

    Target instancePort
    handson-app-18080
    handson-app-28080

Step 5. Set up object storage​

  1. In KakaoCloud Console > Object Storage, click the [Create bucket] button to create a bucket.

    Bucket namehands-on
    Typehot
    EncryptionNo

  2. After creating the bucket, configure Public Access Allowed permissions to enable external access.

    Image

Step 6. Upload the example project​

  1. Set your working directory to your local download folder. Then, clone the example project and navigate to the appropriate directory:

    Download and navigate to the example project
    cd ~/Downloads
    git clone https://github.com/kakaoenterprise/kic-library-react
    cd kic-library-react/client

  2. This example is built using the React web development framework. Install the required packages for building:

    Install required packages
    # mac(homebrew)
    brew install nodejs

    # ubuntu 20.04
    wget -c https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.gz && tar xzv -f node-v18.13.0-linux-x64.tar.gz
    sudo cp -r ./node-v18.13.0-linux-x64/* /usr

  3. Configure environment variables. Use the vim command to open the configuration file and set the variables. Update the BASE_URL value to point to the public domain address of the application server load balancer using the https protocol:

    vim ~/Downloads/kic-library-react/client/src/config.js

    # config.js

    # const BASE_URL = "https://${APP_LB_PUBLIC_DOMAIN_NAME}"
    # ...

  4. After completing the configuration, navigate to the project directory and build the example React project:

    Build the example React project
    cd ~/Downloads/kic-library-react/client
    bash ~/Downloads/kic-library-react/client/web-build.sh

  5. Verify the build results:

    Verify build results
    ls ~/Downloads/kic-library-react/client/build

  6. Upload the contents of the build folder to the created Object Storage. Go to the bucket details page and use [Upload file] > [Add folder] to upload the ${home}/Downloads/kic-library-react/client/build folder.

    Image

  7. Verify that the files have been added to the build directory in the hands-on bucket.

    Image

Step 7. Configure and deploy CDN​

CDN (Content Delivery Network) is a service that accelerates the delivery of static data, ensuring fast and reliable delivery of web content to a large number of users.

  1. Go to KakaoCloud Console > CDN, click the [Create service] button, and use the following information to create a new CDN:

    1. Service and origin server

    Service namehands-on
    Host serverKakaoCloud CDN
    Origin serverKakaoCloud Object Storage
    Buckethands-on
    Origin server protocolhttps
    Origin server port number443
    Origin server path/build
    Gzip CompressionEnabled

    2. Cache

    Expiration policyRefer to origin server
    Retention period1 hour
    URL Query StringInclude
    Image file optimizationDisabled

    3. Access control

    Viewer protocol policyNot set
    Referer headerNot set
    Root pathSet
    Access control methodRedirect
    Redirect path/index.html

  2. Access the service domain of the created CDN in your browser.

  3. Verify the deployed service.