CloudFront – buffashe's Blog https://blog.buffashe.com/ 버프애쉬의 블로그 Thu, 27 Aug 2020 08:07:36 +0000 ko-KR hourly 1 https://wordpress.org/?v=5.6 CloudFront와 Amazon S3를 사용한 정적 웹 사이트 호스팅 https://blog.buffashe.com/2020/08/serve-static-website-using-cloudfront-s3/ Sun, 16 Aug 2020 13:03:03 +0000 https://blog.buffashe.com/?p=721 이 글에서는 Amazon CloudFront와 Amazon Simple Storage Service (Amazon S3)를 사용하여 SSL(HTTPS)을 지원하는 정적 웹 사이트를 호스팅하는 방법을 소개합니다. 이 … 더 보기 "CloudFront와 Amazon S3를 사용한 정적 웹 사이트 호스팅"

The post CloudFront와 Amazon S3를 사용한 정적 웹 사이트 호스팅 appeared first on buffashe's Blog.

]]> 이 글에서는 Amazon CloudFront와 Amazon Simple Storage Service (Amazon S3)를 사용하여 SSL(HTTPS)을 지원하는 정적 웹 사이트를 호스팅하는 방법을 소개합니다.

이 블로그(blog.buffashe.com)도 CloudFront와 S3를 사용하여 서버리스 환경에서 서비스 중입니다.

Amazon Route 53(또는 다른 DNS 서비스)에 등록된 도메인(호스팅 영역)이 있는 상태에서 진행합니다.

사용하는 서비스

Amazon CloudFront
전 세계로 배포 및 HTTPS 적용

Amazon Route 53
CloudFront 도메인과 웹 사이트 도메인 연결

Amazon S3
웹 사이트의 Origin(웹 서버, 파일시스템 역할) 담당

AWS Certificate Manager
웹 사이트의 도메인에 대한 인증서 발급

웹 페이지 준비

웹 사이트에서 호스팅할 파일을 준비합니다.
간단한 페이지를 만들어 사용하겠습니다.

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>테스트 페이지</title>
	</head>
	<body>
		<p>테스트 페이지입니다.</p>
	</body>
</html>

Amazon S3 버킷 생성 및 준비

Amazon S3 버킷의 생성, 호스팅할 파일의 업로드, 정적 웹 사이트 호스팅 기능 설정과 버킷 정책 추가를 진행합니다.

버킷 생성

  • AWS Management Console에 로그인한 뒤 Amazon S3 Console에 접속합니다.
    https://console.aws.amazon.com/s3/
  • 버킷 만들기를 클릭합니다.
  • 버킷 이름을 입력합니다. (buffashecom-staticweb 등)
    Amazon S3 버킷을 CloudFront와 연결할 때에는 도메인 이름과 다른 이름을 사용하여야 합니다.
  • 리전을 선택합니다.
    주 사용자층과 인접한 리전을 선택하시면 됩니다.
    (Cache miss시 CloudFront와 Origin 사이의 레이턴시 감소)
  • 생성을 클릭합니다.

호스팅할 파일 업로드

생성한 S3 버킷에 호스팅할 파일을 업로드합니다.

  • 업로드를 클릭합니다.
  • 앞에서 생성한 파일을 추가합니다.
  • 업로드를 클릭합니다.

정적 웹 사이트 호스팅 기능 설정

버킷의 정적 웹 사이트 호스팅 기능을 활성화합니다.

  • 버킷의 속성 탭으로 이동합니다.
  • 정적 웹 사이트 호스팅을 활성화하고 인덱스 문서에 index.html을 입력한 뒤 저장합니다.

버킷 정책 추가

누구나 버킷에 접근할 수 있도록 버킷 정책을 구성합니다.

  • 버킷의 권한 – 퍼블릭 액세스 차단 탭으로 이동합니다.
  • 편집을 클릭한 뒤 모든 퍼블릭 액세스 차단을 체크 해제하고 저장합니다.
  • 설정 확인 창에 확인을 입력한 뒤 확인을 클릭합니다.
  • 버킷의 권한 – 버킷 정책 탭으로 이동합니다.
  • 인터넷의 누구나 버킷에 접근할 수 있도록 정책을 추가합니다.
    s3:GetObject, s3:GetObjectVersion 작업을 모두에게 허용합니다.
    다음 내용을 입력한 후 저장합니다.
    [버킷 ARN]은 버킷 정책 편집기에 표시된 ARN으로 대체합니다. (arn:aws:s3:::buffashecom-staticweb 등)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "[버킷 ARN]/*"
        }
    ]
}
  • 버킷에 퍼블릭 액세스 권한이 부여된 것을 확인할 수 있습니다.

SSL 인증서 요청

AWS Certificate Manager를 통해 us-east-1(미국 동부; 버지니아 북부) 리전에서 SSL 인증서를 요청합니다.
CloudFront에서 사용되는 Custom SSL Certificate는 us-east-1에서 생성되어야 합니다.

  • us-east-1 리전에서 AWS Certificate Manager에 접속하여 인증서 프로비저닝을 클릭합니다.
    아래 페이지는 처음 접속한(인증서가 없는) 사용자에게만 표시되며, 인증서가 있는 분들은 인증서 요청을 클릭하시면 됩니다.
  • 공인 인증서 요청을 선택한 뒤 인증서 요청을 클릭합니다.
  • 발급할 주소(사용자들이 접속할 주소)를 입력합니다.

    Apex 도메인 – buffashe.com
    서브도메인 – blog.buffashe.com
    와일드카드 – *.buffashe.com (buffashe.com의 모든 서브도메인)
    에 모두 발급 가능합니다.
  • 입력한 뒤 다음을 클릭합니다.
  • 검증 방법을 선택합니다.
    DNS 검증을 사용하면 DNS 서비스에 추가할 CNAME 레코드가 유지되는 한 자동으로 인증서가 갱신되어 편리합니다.
  • 태그는 추가하지 않았습니다.
  • 입력한 사항을 검토한 뒤 확인 및 요청을 클릭합니다.
  • 인증서 검증에 사용할 CNAME 레코드(도메인 이름마다 1개씩)가 표시됩니다.
    Route 53 사용자는 Route 53에서 레코드 생성을 클릭하면 한 번에 입력 가능합니다.
    다른 DNS 서비스 사용자는 수동으로 입력하면 됩니다.
  • 인증서의 상태가 검증 보류에서 발급 완료가 되었는지 확인합니다.
    시간이 조금 소요되므로 다음 단계로 진행하셔도 됩니다.

CloudFront 웹 배포 생성

CloudFront는 AWS에서 제공하는 CDN입니다.
Amazon CloudFront란?

  • 웹 배포를 선택(Get Started 클릭)합니다.

Origin, Default Cache Behavior 설정

  • Origin Domain Name 입력 칸을 클릭하면 가능한 옵션이 표시되는데, 목록에 나오는 값 대신 위의 정적 웹 사이트 호스팅 기능 설정에서 표시된 정적 웹 사이트 호스팅 엔드포인트 주소를 입력합니다(http:// 제외).
    목록에서 선택해도 일반적인 정적 웹 호스팅에는 문제가 없지만, SPA(Single Page Application)를 호스팅 할 경우에는 엔드포인트를 직접 입력해야 합니다.
    정적 웹 사이트로 변환한 WordPress를 호스팅 할 때에도 정적 웹 사이트 호스팅 엔드포인트 주소를 직접 입력해야 정상적으로 작동했습니다.
  • 나머지 Origin, Default Cache Behavior 설정은 필요에 따라 변경하시면 됩니다.
    아래 설정은 예시로 참고하세요.

    HTTP 요청을 HTTPS로 리다이렉트
    기본 캐시 정책
    자동 gzip 압축
    을 설정했습니다.

Distribution 설정

  • 사용할 Alternate Domain Name들(쉼표 또는 줄 바꿈으로 구분)과 Custom SSL Certificate, Default Root Object를 설정합니다.

    SSL 인증서 요청에서 입력한 사용자들이 접속할 주소
    발급받은 SSL 인증서
    index.html
    로 설정했습니다.
    나머지 설정은 필요에 따라 변경하세요.
  • Create Distribution을 클릭하여 완료합니다.
  • Distribution Status가 InProgress인 것을 확인할 수 있습니다.
    각 엣지로의 배포가 완료되면 Deployed로 변경됩니다.
    시간이 조금 소요되므로 다음 단계로 진행하셔도 됩니다.

Route 53 설정

CloudFront Distribution과 기존에 보유한 도메인을 연결합니다.

  • 레코드 생성을 클릭합니다.
  • 단순 라우팅을 선택한 뒤 다음을 클릭합니다.
  • 단순 레코드 정의를 클릭합니다.

    레코드 이름에 사용할 도메인을 입력하고, 값/트래픽 라우팅 대상을 CloudFront 배포에 대한 별칭으로 설정합니다.
    배포 선택 입력 칸을 클릭하면 사용 가능한 Distribution의 주소가 표시됩니다.
    CloudFront 웹 배포 생성 단계에서 생성한 Distribution의 Domain Name과 일치하는 값을 선택합니다.

    단순 레코드 정의(완료)를 클릭합니다.
  • 레코드 설정을 확인하고 레코드 생성을 클릭합니다.

접속 확인

CloudFront와 도메인이 잘 연결되었는지 확인합니다.

  • HTTPS를 사용하여 접속되었으며, 유효한 인증서가 적용된 것을 확인할 수 있습니다.

참고 자료

The post CloudFront와 Amazon S3를 사용한 정적 웹 사이트 호스팅 appeared first on buffashe's Blog.

]]>