Offloading web server using CDN
Offload a Virtual Machine-based web application by delivering static content using a CDN service.
- Estimated time: 60 minutes
- User environment:
- Operating system: MacOS, Ubuntu
- Region: kr-central-2
- Reference document
Before you start
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.
-
Go to KakaoCloud Console > Beyond Compute Service > Virtual Machine and create the Bastion instance as specified in the table below.
Instance Name handson-bastion Count 1 Instance type m2a.large Image Ubuntu 20.04 Volume Size 10 Subnet public Public IP Connected -
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 Policy Protocol Source Port Number bastion inbound policy 1 TCP 0.0.0.0/0 10000-10010 bastion inbound policy 2 TCP 0.0.0.0/0 81 bastion ssh policy TCP 0.0.0.0/0 22 -
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}
-
Configure the Bastion using
nginx-proxy-manager
. Connect to the instance viassh
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 -
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
Type | MySQL |
---|---|
Instance Group Name | handson-mysql |
MySQL User Name | admin |
MySQL Password | root1234 |
Quantity | 1 |
Flavor | m2a.large |
Volume | 100 |
Step 3. Configure the application server
-
Create a Virtual Machine by referring to the table below.
Instance Name handson-app Count 2 Instance type m2a.large Image Ubuntu 20.04 Volume Size 20 Subnet public -
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 Policy Protocol Source Port Number app ssh policy TCP BASTION_PRIVATE_IP/32 22 app ping policy ICMP VPC_CIDR - app inbound policy TCP VPC_CIDR 8080 -
Access the
nginx-proxy-manager
management page, and inDashboard > Streams
, register the private IP and port 22 of the application host to ports 10000–10001. -
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 -
Install the example project and navigate to the directory where the example project is located.
Move to folder of example projectsgit clone https://github.com/kakaoenterprise/kic-library-react
cd kic-library-react -
Install the packages required for building and running the example project.
패키지를 설치bash install-requirements.sh
-
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 variablesvim app-env.sh
# app-env.sh
# export PROFILE='dev'
# export MYSQL_HOST='${MYSQL_PRIMARY_ENDPOINT}'
# export DB_USERNAME='admin'
# export DB_PASSWORD='root1234' -
After entering the environment variables, build the example project.
Build projectbash app-build.sh
-
Run the example application and then exit the
ssh
session.Exitbash start-app.sh
Step 4. Set up an application server load balancer
-
Go to KakaoCloud Console > Beyond Networking Service > Load Balancing > Load Balancer.
-
Click the [Create load balancer] button and enter information.
Load Balancer name handson VPC ${PUBLIC}
Subnet ${PUBLIC}
-
Perform listener and target group settings.
Listener Protocol HTTPS Listener Port 443 Target Group Protocol HTTP Target Group Algorithm Round Robin -
Connection Information, SSL Settings
- Register the SSL certificate you own with the load balancer.
-
Perform Health Check Settings.
Type HTTP HTTP Method GET HTTP Version 1.1 HTTP Status Code 200 Check Path /api/v1.0/management/category/all Check Interval 10 seconds Timeout 5 seconds Healthy Threshold 3 consecutive successes Unhealthy Threshold 3 consecutive failures -
Configure the target resources(Public IP).
Target Instance Port handson-app-1 8080 handson-app-2 8080
Step 5. Set up Object Storage
-
Go to KakaoCloud Console > Object Storage, and click the [Create New Bucket] button. Then, create a new bucket by verifying the information below.
Bucket Name hands-on Type hot Encryption No -
After creating the bucket, set the access permission to Allow Public Access so that it can be accessed externally.
Step 6. Upload the example project
-
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 -
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 -
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 thehttps
protocol.vim ~/Downloads/kic-library-react/client/src/config.js
# config.js
# const BASE_URL = "https://${APP_LB_PUBLIC_DOMAIN_NAME}"
# ... -
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 -
Verify the build results of the example project.
ls ~/Downloads/kic-library-react/client/build
-
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. -
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.
-
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 Name hands-on Host Server KC CDN Origin Server KC Object Storage Bucket hands-on Origin Server Protocol https Origin Server Port Number 443 Origin Server Path /build Gzip Compression Enabled -
Cache
Expiration Policy Refer to origin server Retention Period 1 hour URL Query String Included Image File Optimization Disabled -
Access control
Viewer Protocol Policy Not set Referrer Header Not set Root Path Enabled Access Control Method Redirect Redirect Path /index.html
-
-
Access the service domain of the created CDN from your browser.
-
Verify the deployed service.