Skip to main content

Offloading web server using CDN

Offload a Virtual Machine-based web application by delivering static content using a CDN service.

Basic information
  • Estimated time: 60 minutes
  • Recommended user environment:
    • Operating system: macOS, Ubuntu
    • Region: kr-central-2
  • Reference document

Prework​

To proceed with this practice, you need to check the Access Key and the Key Pair for VM access.

Step 1. Configure Bastion host​

Deploy a Virtual Machine-based web application using a Load Balancer and MySQL. To do this, set up a Bastion host that can be accessed externally.

  1. Go to KakaoCloud Console > Beyond Compute Service > Virtual Machine and create the Bastion instance as specified in the table below.

    Instance Namehandson-bastion
    Count1
    Instance typem2a.large
    ImageUbuntu 20.04
    Volume Size10
    Subnetpublic
    Public IPConnected

  2. In the Beyond Networking Service > VPC > Security. Create and configure a security group to allow external access to the Bastion instance. The inbound policies are as follows.

    Inbound PolicyProtocolSourcePort Number
    bastion inbound policy 1TCP     0.0.0.0/0     10000-10010
    bastion inbound policy 2TCP0.0.0.0/081
    bastion ssh policyTCP0.0.0.0/022

  3. After connecting a public IP to the Bastion host, open the terminal on your local environment and execute the following command to access it via SSH.

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

  4. Configure the Bastion using nginx-proxy-manager. Connect to the instance via ssh and run the following command to provision it.

    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. Once nginx-proxy-manager is running, open a browser on your local environment 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. With this service, you can easily provision a MySQL instance through the console without a complex installation process and use it securely within a logically isolated network.

In the KakaoCloud Console > MySQL, click [Create instance group] and create the required MySQL instance group.

Database list to create​

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

Step 3. Configure the application server​

  1. Create a Virtual Machine by referring to the table below.

    Instance Namehandson-app
    Count2
    Instance typem2a.large
    ImageUbuntu 20.04
    Volume Size20
    Subnetpublic

  2. In the VPC menu, select Security. Create and configure a Security Group to allow external access to the Bastion instance. The inbound policies are as follows.

    Inbound PolicyProtocolSourcePort Number
    app ssh policyTCP     BASTION_PRIVATE_IP/3222
    app ping policyICMPVPC_CIDR-
    app inbound policyTCPVPC_CIDR8080

  3. Access the nginx-proxy-manager management page, and in Dashboard > Streams, register the private IP and port 22 of the application host to ports 10000–10001.

  4. Use SSH to access the created application host through the Bastion instance.

    Connect to the 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. Install the example project and navigate to the directory where the example project is located.

    Move to folder of example projects
    git clone https://github.com/kakaoenterprise/kic-library-react
    cd kic-library-react

  6. Install the packages required for building and running the example project.

    패키지를 설치
    bash install-requirements.sh

  7. Enter the environment variables needed to run the application. Use the vim command to open the file where environment variables are defined, and input the environment variables as shown in the code example below.

    Enter 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'

  8. After entering the environment variables, build the example project.

    Build project
    bash app-build.sh

  9. Run the example application and then exit the ssh session.

    Exit
     bash start-app.sh

Step 4. Set up an application server load balancer​

  1. Go to KakaoCloud Console > Beyond Networking Service > Load Balancing > Load Balancer.

  2. Click the [Create load balancer] button and enter information.

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

  3. Perform listener and target group settings.

    Listener ProtocolHTTPS
    Listener Port443
    Target Group ProtocolHTTP
    Target Group AlgorithmRound Robin

  4. Connection Information, SSL Settings

    • Register the SSL certificate you own with the load balancer.

  5. 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

  6. Configure the target resources(Public IP).

    Target InstancePort
    handson-app-18080
    handson-app-28080

Step 5. Set up Object Storage​

  1. Go to KakaoCloud Console > Object Storage, and click the [Create New Bucket] button. Then, create a new bucket by verifying the information below.

    Bucket Namehands-on
    Typehot
    EncryptionNo

  2. After creating the bucket, set the access permission to Allow Public Access so that it can be accessed externally.

    Image

Step 6. Upload the example project​

  1. Set your working directory to your local download folder. Then, install the example project and navigate to the directory where the example is installed.

    cd ~/Downloads
    git clone https://github.com/kakaoenterprise/kic-library-react
    cd kic-library-react/client

  2. Install the packages required for the build. This example is created using the web development framework react.

    # 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 the environment variables. Open the environment variable configuration file using the vim command and proceed with the settings. Modify the BASE_URL value to access the public domain address of the created 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.

    cd ~/Downloads/kic-library-react/client
    bash ~/Downloads/kic-library-react/client/web-build.sh

  5. Verify the build results of the example project.

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

  6. Upload the built files stored in the build folder to the created Object Storage. Navigate to the bucket details page > [Upload files] > [Add folder] and upload the ${home}/Downloads/kic-library-react/client/build folder.

    이미지

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

    이미지

Step 7. CDN configuration and deployment​

CDN is a content delivery network service that delivers large-scale web content quickly and reliably to many users. It can be used to accelerate the delivery of static data.

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

    • Service and origin server

      Service Namehands-on
      Host ServerKC CDN
      Origin ServerKC Object Storage
      Buckethands-on
      Origin Server Protocolhttps
      Origin Server Port Number443
      Origin Server Path/build
      Gzip CompressionEnabled

    • Cache

      Expiration PolicyRefer to origin server
      Retention Period1 hour
      URL Query StringIncluded
      Image File OptimizationDisabled

    • Access control

      Viewer Protocol PolicyNot set
      Referrer HeaderNot set
      Root PathEnabled
      Access Control MethodRedirect
      Redirect Path/index.html

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

  3. Verify the deployed service.