카카오클라우드 CDN으로 서비스 웹서버 오프로딩

1. Bastion 호스트 설정​

Load Balancer와 MySQL을 사용한 Virtual Machine 기반의 웹 애플리케이션를 배포합니다. 이를 위해 외부에서 접근할 수 있는 Bastion 호스트를 설정합니다.

1. 카카오클라우드 콘솔 > Beyond Compute Service > Virtual Machine에서 아래 표의 Bastion 인스턴스를 생성합니다.인스턴스 이름handson-bastion

개수	1
인스턴스 유형	m2a.large
이미지	Ubuntu 20.04
볼륨 크기	10
서브넷	public
퍼블릭 IP	연결

 

2. Beyond Networking Service > VPC 메뉴에서 보안을 선택합니다. 외부에서 Bastion 인스턴스에 접속할 수 있도록 보안 그룹과 인바운드 규칙을 설정합니다.인바운드 규칙프로토콜패킷 출발지(Source)포트 번호

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

 

3. Bastion 호스트에 퍼블릭 IP를 연결한 뒤, 로컬 환경에서 터미널 실행 후 다음 명령어를 실행하여 SSH 접근합니다.

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

 

4. nginx-proxy-manager를 사용하여 Bastion을 구성합니다. ssh로 인스턴스에 접속하여 아래 명령어를 실행하여 프로비저닝 합니다.

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. 앞 작업을 통해 nginx-proxy-manager가 실행되었습니다. 사용자 로컬 환경에서 브라우저를 실행하여 아래 주소를 입력하면 관리 페이지에 접속할 수 있습니다.

http://${BASTION_PUBLIC_IP}:81/login

# ID : admin@example.com
# 비밀번호 : changeme

 

2. 관리형 MySQL 데이터베이스 생성​

카카오클라우드의 MySQL은 완전 관리형 데이터베이스 서비스로, VPC(Virtual Private Cloud) 환경에서 제공됩니다. 이 서비스를 사용하면 복잡한 설치 과정 없이 콘솔에서 쉽게 MySQL 인스턴스를 프로비저닝할 수 있고, 논리적으로 분리된 네트워크에서 안전하게 사용할 수 있습니다.

카카오클라우드 콘솔 > MySQL에서 [인스턴스 그룹 만들기]를 클릭하고, 필요한 MySQL 인스턴스 그룹을 생성합니다.

생성할 DB 목록​

TypeMySQL

Instance Group Name	handson-mysql
MySQL User Name	admin
MySQL Password	root1234
Quantity	1
Flavor	m2a.large
Volume	100

3. Application 서버 설정​

1. 아래 표를 참조하여 Virtual Machine을 생성합니다.인스턴스 이름handson-app

개수	2
인스턴스 유형	m2a.large
이미지	Ubuntu 20.04
볼륨 크기	20
서브넷	public

 

2. VPC 메뉴에서 보안을 선택합니다. 외부에서 Bastion 인스턴스에 접속할 수 있도록 보안 그룹과 인바운드 규칙을 설정합니다.인바운드 규칙프로토콜패킷 출발지(Source)포트 번호

app ssh policy	TCP	BASTION_PRIVATE_IP/32	22
app ping policy	ICMP	VPC_CIDR	-
app inbound policy	TCP	VPC_CIDR	8080

 

3. nginx-proxy-manager 관리 페이지에 접속한 뒤 Dashboard > Streams에서 Application 호스트의 프라이빗 IP와 22번 포트를 10000~10001 포트로 등록합니다.

 

4. Bastion 인스턴스를 통해 생성한 Application 호스트에 ssh를 사용하여 접속합니다.

#생성한 Application 호스트에 접속
# 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. 예제 프로젝트를 설치한 뒤 작업 디렉터리를 예제 프로젝트가 위치한 폴더로 이동합니다.

# 예제 프로젝트가 위치한 폴더로 이동
git clone https://github.com/kakaoenterprise/kic-library-react
cd kic-library-react

 

6. 예제 프로젝트 빌드와 실행에 필요한 패키지를 설치합니다.

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

 

7. Application 실행에 필요한 환경 변수를 입력합니다. vim 명령어를 이용하여 환경변수를 정의하는 파일을 열고, 아래 코드 예제를 참고하여 환경변수를 입력합니다.

# 환경 변수 입력
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. 환경변수 입력한 뒤, 예제 프로젝트를 빌드합니다.

# 프로젝트 빌드
bash app-build.sh

 

9. 예제 Application을 실행한 뒤 ssh 접속을 종료합니다.

# 접속 종료
 bash start-app.sh

 

4. Application 서버 로드 밸런서 구축​

1. 카카오클라우드 콘솔 > Beyond Networking Service > Load Balancing > Load Balancer로 이동 후, [로드 밸런서 생성] 버튼을 클릭합니다.
2. 생성할 로드 밸런서의 이름과 설명을 입력하고 매핑할 VPC와 서브넷을 설정합니다.
3. 기본 설정을 진행합니다.로드 밸런서 이름handson

   VPC	${PUBLIC}
   서브넷	${PUBLIC}

4. 연결 정보, 리스너 및 대상 그룹을 설정합니다.리스너 프로토콜HTTPS

   리스너 포트	443
   대상 그룹 프로토콜	HTTP
   대상 그룹 알고리즘	Round Robin

5. 연결 정보, SSL 설정을 진행합니다.
   • 로드 밸런서에 소유한 SSL 인증서를 등록합니다.
6. 연결 정보, 헬스체크 설정을 수행합니다.유형HTTP

   HTTP 메서드	GET
   HTTP 버전	1.1
   HTTP 상태코드	200
   체크경로	/api/v1.0/management/category/all
   체크주기	10초
   타임아웃	5초
   상태전환 기준 (성공)	3회 연속
   상태전환 기준 (실패)	3회 연속

7. 연결 리소스를 설정합니다.대상 인스턴스포트

   handson-app-1	8080
   handson-app-2	8080

5. Object Storage 환경 구축​

1. 카카오클라우드 콘솔 > Object Storage로 이동 후,[버킷 생성] 버튼을 클릭하여 버킷을 생성합니다.버킷 이름hands-on

   유형	hot
   암호화	아니오

2. 버킷을 생성한 다음, 외부에서 조회할 수 있도록 퍼블릭 액세스 허용으로 접근 권한을 설정합니다.

6. 예제 프로젝트 업로드​

1. 작업 디렉터리를 사용자 로컬 다운로드 폴더로 설정합니다. 그 후, 예제 프로젝트를 설치하고 해당 예제가 설치된 디렉터리로 이동합니다.

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

 

2. 해당 예제는 웹 개발 프레임워크인 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. 환경 변수를 설정합니다. vim 명령어를 이용하여 환경 변수를 설정하는 파일을 열고 설정을 진행합니다.

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

# config.js

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

 

4. 설정을 완료한 뒤에 프로젝트 디렉터리로 이동하고 예제 react 프로젝트를 빌드합니다.

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

 

5. 예제 프로젝트 빌드 결과를 확인합니다.

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

 

6. 빌드된 파일이 저장된 build 폴더를 생성한 Object Storage에 업로드합니다. 버킷 상세 페이지 > [파일 업로드] > [폴더 추가]를 통해 ${home}/Downloads/kic-library-react/client/build 폴더를 업로드합니다.

7. hands-on 버킷의 build 디렉터리에 파일이 추가되었는지 확인합니다.

7. CDN 설정 및 배포​

CDN은 대규모의 웹 콘텐츠를 많은 사용자들에게 빠르고 안정적으로 제공하는 콘텐츠 전송 네트워크 서비스로, 이를 이용하여 정적 데이터 제공을 가속화 할 수 있습니다.

1. 카카오클라우드 콘솔 > CDN에 접속하여 [서비스 생성] 버튼을 클릭 후, 아래 정보를 확인하여 새로운 CDN을 생성합니다.
   1. 서비스 및 오리진 서버서비스 이름hands-on

      호스트 서버	카카오클라우드 CDN
      오리진 서버	카카오클라우드 Object Storage
      버킷	hands-on
      오리진 서버 프로토콜	https
      오리진 서버 포트 번호	443
      오리진 서버 경로	/build
      Gzip 압축	사용

   2. 캐시만료 정책오리진 서버 참조

      유지 기간	1 시간
      URL Query String	포함
      이미지 파일 최적화	미사용

   3. Access Control뷰어 프로토콜 정책미설정

      리퍼러 헤더	미설정
      루트 경로	설정
      접근 제어 방식	Redirect
      Redirect 경로	/index.html

2. 브라우저에서 생성된 CDN의 서비스 도메인에 접속합니다.
3. 배포된 서비스를 확인합니다.