클라이언트 배포 기초

💡 배포 실습에는 개인별 도메인이 필요합니다. 웹 호스팅 업체에서 도메인을 구매해주세요.

AWS 배포 흐름 및 역할

• S3 : Simple Storage Service (단위: 1 Bucket)
  무제한 용량을 제공하는 온라인 스토리지 서비스 입니다.
  데이터를 객체 형태로 저장하여 관리하며, 비용이 매우 저렴합니다.
  무료 사용량 없이 실제 사용량(저장한 데이터 크기 및 트래픽)에 따라 비용이 부과되도록 과금 테이블이 설정되어 있지만, 테라바이트 이상의 데이터가 저장되어야 달러 단위의 비용이 발생합니다.
  (50TB까지 매월 1GB당 USD 0.025(약 KRW 32.25) 과금)

  • S3 Glacier (단위: 1 Vault)
    백업을 위한 스토리지 서비스 입니다.
    HDD가 아닌, 자기 테이프 기반 스토리지 서비스이며, 일정 기간마다 Vault로 전송된 데이터를 한번에 기록한 다음 전원을 차단하여 초장기 보관을 하는 방식으로 서비스됩니다. 자기 테이프를 읽어야 하기 때문에 데이터 열람 및 반출에 비용과 시간이 소요되며, 일반 사용자보다는 기업에서 대규모 데이터를 백업할 때 주로 사용합니다.

• EC2: Elastic Compute Cloud (단위: 1 인스턴스)
  아마존 서버 내 일부 영역을 가상 컴퓨터 형태로 임대하는 서비스 입니다.
  클라이언트 동적 배포 시에도 사용할 수 있으며, 주로 RDS와 같은 DB서비스에 연결하여 백엔드 서버로 이용됩니다.
  대시보드에서 클릭 몇번으로 생성할 수 있고, 대규모 서비스를 구축하는 경우 오토스케일링을 이용하여 트래픽에 따라 인스턴스를 자동으로 늘리거나 줄여 손쉽게 대응할 수 있습니다. 단, 사용량(컴퓨터 가동 시간, 트래픽)에 따라 과금되며 분당 요금을 부과하기 때문에 프리티어가 아닐 경우 과도한 요금이 청구될 수 있어 유의하여야 합니다.

  • Load Balancer (단위: 1 로그밸런서)
    트래픽을 여러 서브넷(하나의 네트워크를 필요한 크기만큼 분리)으로 분산 처리하여 EC2가 트래픽을 안정적으로 처리할 수 있도록 하는 부하 분산 서비스 입니다. 로드밸런서와 오토스케일링이 설정되지 않은 상태에서 인스턴스의 처리 한계를 넘을 경우 서비스 제공이 지연되거나 중단될 수 있기 때문에 대규모 서비스 구축 시 1차 대비책으로 로드밸런서를, 2차 대비책으로 오토스케일링을 설정하게 됩니다.

• CloudFront (단위: 1 배포)
  아마존에서 제공하는 CDN 서비스 입니다.
  대한민국에서는 동일한 CDN 서비스를 제공하는 클라우드플레어보다 AWS CloudFront가 속도 및 사용 편의성 면에서 다소 유리합니다.
  전세계 어디서나 빠른 속도로 파일을 제공받을 수 있도록 해 주며, S3과 연결하여 클라이언트 복합 배포를 할 수 있고, 라우팅 경로 최적화용으로도 사용할 수 있습니다.
  또한 전세계의 AWS 캐시 서버에 동일한 내용이 복제되어 있기 때문에, 복합 배포 시 클라이언트 인스턴스나 서버 인스턴스가 작동을 중단한 상태에서 일정 기간 S3에 저장되어 있는 파일을 제공받을 수 있으며, 서비스 전체의 중단이 아닌 일시적인 장애 상태로 보이도록 할 수 있습니다.

• Route 53 (단위: 1 호스팅 영역)
  아마존에서 제공하는 DNS 서비스 입니다.
  구입한 도메인을 AWS의 각 서비스들에 연결할 수 있도록 해 주며, 도메인 구입 및 관리도 지원합니다.
  단, 도메인 구입은 국내 호스팅 업체보다는 가격이 높으며 일부 도메인(.kr, .shop 등)은 지원하지 않습니다.
  도메인을 개별적으로 EC2나 S3에 연결할 때 반드시 Route 53을 이용할 필요가 없고, 단순히 DNS 기능만 이용할 때에는 타사 무료 호스팅 서비스를 이용할 수 있지만, AWS의 각종 서비스와 연결할 때에는 통합 관리를 제공하기 때문에 Route 53을 이용하는 것이 가격 및 편의성에서 유리합니다.
  무료 제공량 없이 호스팅 영역 당 월 USD 0.50 (KRW 600~700)이 부과됩니다.

• ACM: Amazon Certificate Manager (단위: 1 인증서)
  HTTPS 연결을 위한 SSL 인증서를 발급하고 관리하도록 해 주는 서비스 입니다.
  퍼블릭 인증서는 무료로 발급이 가능하며, 무분별한 인증서 발급을 방지하기 위해 인증서 발급 후 도메인 소유권을 검증해야 인증서가 활성화됩니다.
  
  

배포 방식에 따른 데이터 흐름

클라이언트를 배포하는 방식에는 여러가지 방법이 존재합니다.

크게 SSG Only, SSG+SSR, SSR Only로 분류할 수 있고, 서비스 특성과 규모에 따라 배포 방식이 결정됩니다.

각 배포 방식에 따라 요청이 전달되는 흐름과 특성에 대해 알아보겠습니다.

SSG Only (Use CloudFront)

CloudFront를 이용하여 S3 엔드포인트에 접근하도록 하는 방법입니다.

유저가 Route 53으로 DNS 레코드를 요청하면 Route 53은 CloudFront의 도메인을 안내합니다.

이후 유저는 CloudFront로 연결하고, CloudFront는 S3으로 요청과 응답을 중계합니다.

CDN을 이용하여 캐싱된 파일들이 빠르게 제공되기 때문에, 퍼포먼스에 집중해야 하거나 마케팅 페이지 / 제품 목록 등과 같이 정적으로 생성하여 각 요청에 동일한 문서를 반환하는 서비스에 주로 사용되는 배포 방법입니다.

단, CloudFront에 캐싱된 데이터가 렌더되기 때문에 변경사항을 자주 확인해야 하는 경우(개발단계 등)에는 적합하지 않은 방식입니다.

SSG Only (No CloudFront)

CloudFront를 이용하지 않고 S3 엔드포인트에 접근하도록 하는 방법입니다.

유저가 Route 53으로 DNS 레코드를 요청하면 Route 53은 S3 엔드포인트 주소를 안내합니다.

이후 유저는 즉시 S3로 연결하여 요청과 응답을 주고받습니다.

S3에 변경된 사항이 있을 경우 즉시 확인이 가능하기 때문에 개발 단계와 같은 상황에서는 적합하지만, CloudFront(CDN)를 이용하지 않기 때문에 1-1의 방법보다 퍼포먼스가 다소 좋지 못하며, CloudFront를 이용하지 않아서 SSL 인증서 적용이 어렵기 때문에 보안상으로도 취약한 부분이 발생할 수 있습니다.

SSR Only

정적 스토리지를 사용하지 않고 EC2만 이용하여 SSR로만 클라이언트를 배포하는 방법입니다.

유저가 Route 53으로 DNS 레코드를 요청하면 Route 53은 CloudFront의 도메인을 안내합니다.

이후 유저는 CloudFront로 연결하고, CloudFront는 로드밸런서를 거쳐 EC2로 요청과 응답을 중계합니다.

항상 최신 상태를 유지해야 하거나, 제품 상세 정보 / 분석 자료 등과 같이 요청마다 다른 내용이나 형식의 문서를 반환하는 서비스에 주로 사용되는 방법입니다.

SSG + SSR (Hybrid)

SSG와 SSR을 혼합하여 클라이언트를 배포하는 방법입니다.

S3에 업로드된 빌드 파일을 CloudFront를 이용하여 캐싱하여 빠른 속도로 최초 화면을 표시한 다음, 나머지 페이지와 데이터들은 SSR 방식으로 전달합니다.

그렇기 때문에 사용자는 빠르고 역동적인 경험이 가능합니다.

또한, 잦은 변경이 필요하지 않은 파일(기본 레이아웃 및 디자인 등)들을 S3로 분리하여 EC2 인스턴스에 대한 부하를 줄일 수 있으며, 이를 통해 안정적인 서비스 제공 및 비용 절감 효과를 도모할 수 있습니다.

클라이언트 배포 실습

S3(Simple Storage Service) 배포

먼저, S3에 SSG 배포 파일을 업로드 해 보도록 하겠습니다.

우선, AWS 콘솔에 로그인 해 주세요

버킷 생성하기

상단의 검색창에 S3을 검색하거나, 서비스 메뉴에서 직접 찾아 접속합니다.

우측의 버킷 만들기 버튼을 클릭해 주세요.

1번 부분에는 여러분이 구매한 도메인을 입력하고, 2번 부분은 아시아 태평양(서울) 리전을 선택해 주세요.

💡 버킷 이름에 http:// , www 등은 입력하지 않습니다

객체 소유권 블럭에서, ACL 활성화됨 을 선택하고, 객체 소유권은 버킷 소유자 선호 를 선택합니다.

💡 ACL 비활성화됨을 선택하면 안되나요?
ACL 비활성화됨을 선택할 경우, 추후 퍼블릭 전환이 불가합니다.
접근 가능한 화이트리스트를 작성해야 하기 때문에 모두가 접근할 수 있어야 하는 범용 서비스에서는 적합하지 않습니다.

이 버킷의 퍼블릭 액세스 차단 설정 블럭에서 모든 퍼블릭 액세스 차단 의 체크를 해제합니다.

하위 체크박스도 모두 체크를 해제한 뒤, 경고창 내의 체크박스만 체크해 줍니다.

버킷 버전 관리 , 기본 암호화 둘다 비활성화로 체크해줍니다.

💡 버킷 버전 관리를 사용하면 좋은 것 아닌가요?
스냅샷을 이용하여 git과 비슷하게 변경된 내용을 저장하기 때문에, 수정 전 내용으로 손쉽게 돌아갈 수 있는 장점이 있지만 자동으로 백업된 스냅샷 용량으로 인해 프리 티어 제한 사용량을 초과하여 과금될 수 있기 때문에 반드시 필요한 경우에만 사용하여야 합니다.

선택이 완료되면 버킷 만들기 버튼을 클립합니다.

배포 파일 업로드

버킷 목록에서 여러분이 입력한 도메인을 클릭합니다.

업로드 버튼을 클릭합니다.

SSG 빌드를 통해 생성된 out 디렉토리 내의 모든 파일과 폴더를 Drag&Drop 합니다.

모든 폴더와 파일이 업로드되었는지 확인합니다.

업로드 버튼을 클릭합니다.

업로드 성공이라는 메세지가 표시되면, 버킷 목록으로 돌아가서 구매한 도메인을 다시 클릭합니다.

상세 화면의 객체 탭에서 모든 파일을 선택한 다음 작업을 클릭하고, 하위 메뉴에서 ACL을 사용하여 퍼블릭으로 설정 메뉴를 클릭합니다.

퍼블릭으로 설정 버튼을 클릭합니다.

퍼블릭 액세스 설정이 완료되었는지 확인한 뒤, 닫기 버튼을 누릅니다.

버킷 목록에서 도메인을 클릭하여 상세 보기 화면으로 진입한 뒤, 속성 탭을 클릭합니다.

아래로 스크롤하여 정적 웹 사이트 호스팅 블럭을 찾은 다음, 편집 버튼을 클릭합니다.

정적 웹 사이트 호스팅을 활성화한 다음, 호스팅 유형에서도 정적 웹 사이트 호스팅을 선택합니다.

인덱스 문서에 index.html을 입력하고, 오류 문서에 404/index.html을 입력합니다.

아래로 스크롤하여 변경 사항 저장 버튼을 클릭합니다.

버킷 속성에서 아래로 스크롤하여 정적 웹 사이트 호스팅 블럭을 찾은 다음 엔드포인트 주소를 클릭합니다.

정상적으로 엔드포인트에 접속되고 화면에 표시되는지 확인합니다.

여기까지 S3에 SSG 배포 파일을 업로드함으로써, 정적 웹 사이트 배포가 엔드포인트로 접속이 가능한 상태가 되었습니다.

하지만, 일반적인 url 접근방식을 위하여 엔드포인트가 아니라 도메인을 이용해 접근할 수 있도록 하려면, 엔드포인트와 도메인을 연결해 주어야 합니다.

도메인 연결

도메인을 S3, EC2 등 AWS와 연결하는 데 반드시 Route 53을 사용할 필요는 없지만,
Route 53을 이용하면 통합 관리가 가능한 장점이 있습니다.

또한, CloudFront나 Load Balancer 등의 고급 DNS 설정이 필요한 경우에는 타사 서비스보다 Route 53을 이용하는 것이 저렴합니다.

💡 Route 53은 프리 티어가 제공되지 않습니다!
호스팅 영역 1개 당 약 700~800원의 비용이 과금됩니다.

aws 콘솔 상단의 ‘서비스' 또는 검색창에서 Route 53을 찾아 접속한 뒤, 시작하기 버튼을 클릭합니다.

호스팅 영역 생성을 선택한 뒤, 시작하기 버튼을 클릭합니다.

도메인 이름에 미리 구입한 도메인을 입력하고, 퍼블릭 호스팅 영역을 선택합니다.

호스팅 영역 생성을 클릭합니다.

레코드 블록에서 유형이 NS인 항목을 확인합니다.

도메인을 구입한 호스팅사에 접속한 다음, 도메인 관리 메뉴에서 네임서버 설정 부분을 찾습니다.

호스팅 사에 접속해서 네임서버 설정권한을 route53으로 넘겨주는 과정입니다.
Route53을 사용하여 도메인 통합 관리를 편하게 하기 위함입니다.

NS레코드의 값/트래픽 라우팅 대상 부분을 순서대로 네임서버 설정에 입력합니다.

설정 완료 페이지에서 제대로 설정이 완료되었는지 확인합니다.

네임서버 설정은 시간이 다소 소요됩니다.

터미널에서 dig (구입한 도메인) NS 를 입력합니다.

ANSWER SECTION에 NS레코드로 입력한 4개의 URL이 표시되면 네임서버 연결이 완료된 것입니다.

네임서버 연결이 완료되었다면, Route53에서 레코드 생성 버튼을 클릭합니다.

단순 라우팅을 선택하고 다음으로 넘어갑니다.

단순 레코드 정의 버튼을 클릭합니다.

값/트래픽 라우팅 대상 > 엔드포인트 선택을 클릭합니다.

옵션 중 S3 웹 사이트 엔드포인트에 대한 별칭을 찾아 선택합니다.

이어서 리전 선택을 클릭한 다음, 아시아 태평양(서울) 리전을 클릭합니다.

이어서 표시되는 S3 엔드포인트 입력을 클릭하면 앞서 생성한 엔드포인트가 표시됩니다.

해당 엔드포인트를 클릭합니다.

모든 정보가 잘 입력되었는지 확인한 다음, 단순 레코드 정의 버튼을 클릭합니다.

레코드 구성 목록에 방금 정의한 레코드가 추가되었습니다.

레코드 생성 버튼을 클릭합니다.

레코드 목록에 도메인이 A레코드로 등록되었는지 확인합니다.

구매했던 도메인을 주소창에 입력하고, 정상적으로 동작하는지 확인합니다.