CloudFront Functions 로 Basic 인증 넣어보기

CloudFront Functions 로 Basic 인증 넣어보기

안녕하세요 생산지원 그룹 리테일 어플리케이션부의 김승연입니다. 본 블로그는 당사의 한국어 블로그 릴레이의 35번째 블로그입니다. 이번 블로그 주제는 「CloudFront Functions 로 Basic 인증 넣어보기」 입니다.
2025.10.19

안녕하세요 생산지원 그룹 리테일 어플리케이션부의 김승연입니다.

본 블로그는 당사의 한국어 블로그 릴레이의 35번째 블로그입니다.
이번 블로그 주제는 「CloudFront Functions 로 Basic 인증 넣어보기」 입니다.

배경

개발 환경(Dev) 전용으로 간단히 Basic 인증을 추가하는 방법을 알아보았습니다.
복잡한 구현 없이 간단히 Basic 인증을 추가하고 싶으신 분들에게 참고가 되었으면 좋겠습니다.

코드 작성

기존의 S3 + CloudFront의 구성에 CloudFront Functions 설정을 추가한 코드입니다.
생략된 부분은 임의로 넣어서 작성해 주시면 됩니다.

			
			...
import { basicAuthentication } from '...';

export class WebStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props: WebStackProps) {
    super(scope, id, props);

    // S3 hosting bucket
    const hostingBucket = new s3.Bucket(this, 'Bucket', {
      bucketName: `...`,
      publicReadAccess: false,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    });

    // CloudFront distribution
    const distribution = new cloudfront.Distribution(this, 'Distribution', {
      comment: `...`,
      defaultRootObject: 'index.html',
      errorResponses: [
        {
          ttl: cdk.Duration.seconds(300),
          httpStatus: 403,
          responseHttpStatus: 200,
          responsePagePath: '/index.html',
        },
        {
          ttl: cdk.Duration.seconds(300),
          httpStatus: 404,
          responseHttpStatus: 200,
          responsePagePath: '/index.html',
        },
      ],
      defaultBehavior: {
        allowedMethods: cloudfront.AllowedMethods.ALLOW_GET_HEAD,
        cachedMethods: cloudfront.CachedMethods.CACHE_GET_HEAD,
        cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        origin: cloudfrontOrigins.S3BucketOrigin.withOriginAccessControl(hostingBucket, {
          originPath: `...`,
        }),
        // ↓CloudFront Function 설정
        functionAssociations: [
          {
            function: new cloudfront.Function(this, 'CloudFrontFunction', {
              functionName: `[function name]`,
              code: cloudfront.FunctionCode.fromInline(basicAuthentication),
            }),
            eventType: cloudfront.FunctionEventType.VIEWER_REQUEST,
          },
        ],
        responseHeadersPolicy: new cloudfront.ResponseHeadersPolicy(this, 'ResponseHeaderPolicy', {
          ...
        }
      },
    });

    new s3Deployment.BucketDeployment(this, 'Deployment', {
      sources: [s3Deployment.Source.asset(`...`)],
      destinationBucket: hostingBucket,
      destinationKeyPrefix: `...`,
      distribution: distribution,
      distributionPaths: ['/*'],
    });
  }
}

		
			
			
export const basicAuthentication = `
    function handler(event) {
      var request = event.request;
      var headers = request.headers;

      // ↓AWS Console에서 설정
      var authenticateValues = [];

      if (typeof headers.authorization === "undefined" || !authenticateValues.includes(headers.authorization.value)) {
        return {
          statusCode: 401,
          statusDescription: "Unauthorized",
          headers: {
            "www-authenticate": { value: "Basic" }
          }
        };
      }
      return request;
    }
`;


		

위와 같이 작성/배포 후 추가로 수동으로 인증 정보를 authenticateValues에 추가해 주시면 됩니다.

CloudFront의 Functions는 parameter store 등에 저장된 정보를 따로 참조하는 기능은 제공하지 않기 때문에 수동으로 설정해 주었습니다.

간단히 아래 명령을 실행 후 출력되는 정보를 배열에 넣어주시면 됩니다.

			
			echo -n "admin:password" | base64

		

보충

블로그 릴레이에 CloudFront functions 의 다른 기사도 있으므로 함께 봐주시면 감사하겠습니다.

https://dev.classmethod.jp/articles/korean-blog-relay-cloudfront-functions/

문의 사항은 클래스메소드 코리아로!

클래스메소드 코리아에서는 다양한 세미나 및 이벤트를 진행하고 있습니다.
진행중인 이벤트는 아래 페이지를 참고해주세요.

https://classmethod.kr/board/library

AWS에 대한 상담 및 클래스 메소드 멤버스에 관한 문의사항은 아래 메일로 연락주시면 감사드립니다!
Info@classmethod.kr

この記事をシェアする

FacebookHatena blogX

関連記事