본문으로 건너뛰기

CDN으로 서비스 웹서버 오프로딩

Virtual Machine 기반 웹 애플리케이션의 정적 데이터 제공을 위해 CDN 서비스를 이용하여 오프로딩합니다.

안내

사전 준비​

이 실습을 진행하기 위해서는 액세스 키와 VM 접근용 키 페어 확인이 필요합니다.

Step 1. Bastion 호스트 설정​

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

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

    인스턴스 이름handson-bastion
    개수1
    인스턴스 유형m2a.large
    이미지Ubuntu 20.04
    볼륨 크기10
    Subnetpublic
    공인 아이피연결

  2. Beyond Networking Service > VPC 메뉴에서 Security를 선택합니다. 외부에서 Bastion 인스턴스에 접속할 수 있도록 Security Group을 생성 및 설정합니다. 인바운드 정책은 아래와 같습니다.

    인바운드 정책프로토콜패킷 출발지(Source)포트 번호
    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. 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

    # 아이디 : admin@example.com
    # 비밀번호 : changeme

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

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

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

생성할 DB 목록​

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

Step 3. Application 서버 설정​

  1. 아래 표를 참조하여 Virtual Machine을 생성합니다.

    인스턴스 이름handson-app
    개수2
    인스턴스 유형m2a.large
    이미지Ubuntu 20.04
    볼륨 크기20
    Subnetpublic

  2. VPC 메뉴에서 Security를 선택합니다. 외부에서 Bastion 인스턴스에 접속할 수 있도록 Security Group을 생성 및 설정합니다. 인바운드 정책은 아래와 같습니다.

    인바운드 정책프로토콜패킷 출발지(Source)포트 번호
    app ssh policyTCP     BASTION_PRIVATE_IP/3222
    app ping policyICMPVPC_CIDR-
    app inbound policyTCPVPC_CIDR8080

  3. nginx-proxy-manager 관리 페이지에 접속한 뒤 Dashboard > Streams에서 Application 호스트의 사설 아이피와 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

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

카카오클라우드 콘솔 > Beyond Networking Service > Load Balancing > Load Balancer > [로드밸런서 만들기] 버튼을 클릭합니다. 생성할 로드밸런서의 이름과 설명을 입력하고 매핑할 VPC와 Subnet을 설정합니다. 아래 정보를 참조하여 리스너/타겟 그룹/헬스체크 설정을 진행합니다. 예제 진행을 위해 생성한 로드밸런서에 공인 아이피를 연결합니다.

  1. 기본 설정

    로드밸런서 이름handson
    VPC     ${PUBLIC}
    Subnet${PUBLIC}

  2. 연결 정보, 리스너 및 타겟 그룹 설정

    리스너 프로토콜HTTPS
    리스너 포트443
    타겟 그룹 프로토콜HTTP
    타겟 그룹 알고리즘Round Robin

  3. 연결 정보, SSL 설정

    • 로드밸런서에 소유한 SSL 인증서를 등록합니다.

  4. 연결 정보, 헬스체크 설정을 수행합니다.

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

  5. 연결 자원을 설정합니다.

    타겟 인스턴스포트
    handson-app-18080
    handson-app-28080

Step 5. Object Storage 환경 구축하기​

  1. 카카오클라우드 콘솔 > Object Storage에 접속하여 [새 버킷 만들기] 버튼을 클릭합니다. 그 후, 아래 정보를 확인하여 새로운 버킷을 생성합니다.

    버킷 이름hands-on
    유형hot
    암호화아니오

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

    이미지

Step 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 명령어를 이용하여 환경 변수를 설정하는 파일을 열고 설정을 진행합니다. 생성한 애플리케이션 서버 로드밸런서의 공인 도메인 주소를 https 프로토콜로 접속하도록 BASE_URL 값을 수정합니다.

    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 디렉터리에 파일이 추가되었는지 확인합니다.

    이미지

Step 7. CDN 설정 및 배포​

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

  1. 카카오클라우드 콘솔 > CDN에 접속하여 [서비스 만들기] 버튼을 클릭 후, 아래 정보를 확인하여 새로운 CDN을 생성합니다.

    1. 서비스 및 오리진 서버

      서비스 이름hands-on
      호스트 서버KC CDN
      오리진 서버KC Object Storage
      버킷hands-on
      오리진 서버 프로토콜https
      오리진 서버 포트 번호443
      오리진 서버 경로/build
      Gzip Compression사용

    2. 캐시

      만료 정책오리진 서버 참조
      유지 기간1 시간
      URL Query String포함
      이미지 파일 최적화미사용

    3. Access Control

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

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

  3. 배포된 서비스를 확인합니다.

최종 수정: 에