S3 버킷 만들기

우선은 html 파일등을 격납하는 S3의 bucket를 작성합니다.
Cloudfront에서 제공하므로 공용 권한이나 정적 웹 사이트 호스팅 설정이 필요하지 않습니다.

lambda 함수 만들기

그런 다음 기본 인증을 처리하는 lambda 함수를 만듭니다.
이때 오른쪽 상단의 리전 설정에서 '버지니아 북부'를 선택한 다음 '함수 만들기'를 수행합니다.



이름으로 "BasicAuthentication"(임의의 이름)
런타임은 Node.js 6.10을 선택
역할은 "템플릿에서 새 역할 만들기"를 선택
역할 이름에는 "lambda_edge_exection"(임의의 이름)
정책 템플릿은 "Basic Edge Lambda 액세스 권한"을 선택

함수 만들기를 클릭하고 잠시 후 다음 화면으로 전환합니다.



조금 스크롤한 곳의 '함수 코드' 영역에 다음 코드를 복사합니다.
9행, 10행 authUser, authPass에서 Basic 인증 로그인을 위한 ID와 암호를 설정할 수 있습니다.


lambda-basic-auth.js

'use strict';
exports.handler = (event, context, callback) => {

    // Get request and request headers
    const request = event.Records[0].cf.request;
    const headers = request.headers;

    // Configure authentication
    const authUser = 'user';
    const authPass = 'pass';

    // Construct the Basic Auth string
    const authString = 'Basic ' + new Buffer(authUser + ':' + authPass).toString('base64');

    // Require Basic authentication
    if (typeof headers.authorization == 'undefined' || headers.authorization[0].value != authString) {
        const body = 'Unauthorized';
        const response = {
            status: '401',
            statusDescription: 'Unauthorized',
            body: body,
            headers: {
                'www-authenticate': [{key: 'WWW-Authenticate', value:'Basic'}]
            },
        };
        callback(null, response);
    }

    // Continue request processing if authentication passed
    callback(null, request);
};

입력 후 오른쪽 상단의 "저장"버튼을 클릭하여 저장합니다.



그런 다음 작업 메뉴에서 새 버전 게시를 선택합니다.
나온 팝업의 "발행"을 클릭하면 버전 1로 저장됩니다.



저장되면 오른쪽 상단에 표시된 ARN 값을 복사합니다.

예)
arn:aws:lambda:us-east-1:xxxxxxxxxxxx:function:BasicAuthentication:1

Cloudfront 만들기

그런 다음 Cloudfront의 배포를 만듭니다.


웹에서 "Get Started"를 클릭하십시오.


Origin Settings
Origin Domain Name에서 방금 만든 S3의 bucket을 선택합니다.
Restrict Bucket Access에서 Yes
Origin Access Identity를 Create a New Identity
Grant Read Permissions on Bucket Yes, Update Bucket Policy
그러면 해당 bucket의 Policy가 Cloudfront에서 읽을 수 있도록 설정됩니다.


Default Cache Behavior Settings
Object Caching을 "Customize"로 설정
각 TTL을 0으로 설정하면 캐시되지 않으므로 테스트 환경을 구축할 때 유용합니다.
그리고, 이번 설정의 포인트인 「Lambda Function Associations」의 부분에
Event Type으로 "Viewer Request"를 선택
Lambda Function ARN에 방금 복사한 ARN을 붙여넣습니다.

Distribution Settings에서
Default Root Object에 "index.html"
로 설정해 두면 root URL(도메인+/로 끝나는 URL)로 액세스했을 때의 디폴트 파일을 설정할 수 있습니다.

마지막으로 오른쪽 하단의 Create Distoribution을 클릭하여 완료를 기다립니다.

여기까지도 사용할 수 있습니다만, 디폴트의 설정으로 에러 캐쉬가 유효해 버리므로 그것을 무효로 해 둡니다.

방금 만든 Distoribution을 선택하고 Error Pages 탭에서 Create Custom Error Response를 클릭합니다.



403 에러시 TTL을 0으로 설정



angular 등의 SPA에서 라우팅을 잘 활용하기 위해 404 오류는 index.html을 열고, 같은 경우
사용자 정의 오류 응답 예
로 설정 가능합니다.
(Response Page Path는/로 시작해야 합니다.)

기본 인증을 해제할 때

Distoribution의 Behaviors 탭에서 설정된 Behavior를 선택하고 Edit를 클릭합니다.



Lambda Function Associations에서 lambda function의 오른쪽 X를 클릭하여 삭제합니다.

오른쪽 하단의 Yes, Edit를 클릭합니다.

잠시 후 설정이 반영됩니다.

참고한 URL

h tps : //는 c r의 온. 코 m / 세 r ゔ ぇ ぇ s ㅇ 후아아 01b8666
htp : // bg. 지코만.んふぉ/2017/10/s3-바시c-우신g-cぉdf로 t-mb다-에드게/