TypeScript를 사용하여 테스트 가능한 CloudFront 함수 구축

AWS CloudFront Functions는 엣지에서 경량 JavaScript 코드를 실행하여 요청과 응답을 조작할 수 있는 강력한 도구입니다.

그러나 AWS에서는 이러한 기능을 바닐라 JavaScript로 작성하도록 요구하므로 TypeScript의 유형 안전성과 최신 구문을 선호하는 개발자에게는 제한될 수 있습니다.

이 기사에서는 TypeScript에서 CloudFront 함수를 작성하고, 추가 파일을 가져와서 효과적으로 테스트하는 솔루션을 안내하겠습니다.

도전

CloudFront 함수는 TypeScript의 최신 기능과 유형 안전성이 부족한 ES5 JavaScript로 작성되어야 합니다. 이 요구 사항은 CloudFront에 배포하는 동시에 TypeScript의 이점을 활용하려는 개발자에게 어려운 과제입니다.

해결책

해결책에는 TypeScript를 사용하여 CloudFront 함수를 작성한 다음 이를 ES5 JavaScript로 트랜스파일하는 것이 포함됩니다. 이 접근 방식을 사용하면 개발 및 테스트 중에 TypeScript의 이점을 유지하면서 AWS의 배포 요구 사항을 계속 충족할 수 있습니다.

주요 구성 요소

TypeScript 컴파일러 옵션:

1. CloudFront의 JavaScript 환경은 모든 CommonJS 런타임 모듈을 지원하지 않으므로 ES5를 대상으로 TypeScript 컴파일러를 구성하고 모듈 구문을 제거하세요.
2. 사용자 정의 변환기: 사용자 정의 TypeScript 변환기를 사용하여 내보내기 키워드 및 __esModule 속성을 제거하여 출력이 CloudFront와 호환되는지 확인합니다.
3. 빌드 스크립트: 사용자 정의 변환기를 적용하여 TypeScript 파일을 JavaScript로 변환하는 빌드 스크립트를 만듭니다.
4. 테스트: Jest와 같은 테스트 프레임워크를 사용하여 TypeScript 코드에 대한 단위 테스트를 작성하여 배포 전에 논리가 건전한지 확인하세요.

구현

다음은 CloudFront Functions용 ​​TypeScript 프로젝트를 설정하는 방법에 대한 간단한 예입니다.

TypeScript 구성(tsconfig.json)

{
  "compilerOptions": {
    "target": "es5", // MUST BE ES5 for CloudFront Function support  https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/functions-javascript-runtime-features.html#writing-functions-javascript-features-core
    "module": "commonjs", // Beware CloudFront JS environment doesn't contain all commonjs runtime modules    
    "lib": ["es5"],
    "strict": true,
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

맞춤형 변압기

내보내기 키워드를 제거하기 위한 사용자 정의 변환기 만들기:

import * as ts from 'typescript';

export const removeExportTransformer: ts.TransformerFactory<ts.SourceFile> = (context) => {
  return (sourceFile) => {
    const visitor: ts.Visitor = (node) => {
      if (ts.isModifier(node) && node.kind === ts.SyntaxKind.ExportKeyword) {
        return undefined;
      }
      return ts.visitEachChild(node, visitor, context);
    };
    return ts.visitNode(sourceFile, visitor);
  };
};

빌드 스크립트

TypeScript 파일을 트랜스파일하는 스크립트:

import * as ts from 'typescript';
import * as fs from 'fs';
import * as path from 'path';
import { removeExportTransformer } from './removeExportTransformer';

const compilerOptions: ts.CompilerOptions = {
  module: ts.ModuleKind.None,
  target: ts.ScriptTarget.ES5,
  strict: true,
  removeComments: true,
  lib: ['es5'],
};

function transpileFile(filePath: string) {
  const source = fs.readFileSync(filePath, 'utf-8');
  const result = ts.transpileModule(source, {
    compilerOptions,
    transformers: { before: [removeExportTransformer] },
  });
  const outputFilePath = filePath.replace('.ts', '.js');
  fs.writeFileSync(outputFilePath, result.outputText);
}

const files = fs.readdirSync('./src').filter(file => file.endsWith('.ts'));
files.forEach(file => transpileFile(path.join('./src', file)));

용법

1. 배포 전에 CloudFront Typescript 기능을 구축하세요.
   ts-node scripts/build-cloudfront.ts

2. 함수 빌드 출력 경로를 정의합니다.
   

const function= new aws_cloudfront.Function(stack, 'CloudfrontFunctionId', {
  functionName: 'cloudfront_function',
  code: aws_cloudfront.FunctionCode.fromFile({
    filePath: `dist/cloudfrontFunction.js`,
  }),
  runtime: aws_cloudfront.FunctionRuntime.JS_2_0,
})

Jest로 테스트하기

TypeScript 코드를 테스트하기 위해 Jest를 설정하세요.

{
  "compilerOptions": {
    "target": "es5", // MUST BE ES5 for CloudFront Function support  https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/functions-javascript-runtime-features.html#writing-functions-javascript-features-core
    "module": "commonjs", // Beware CloudFront JS environment doesn't contain all commonjs runtime modules    
    "lib": ["es5"],
    "strict": true,
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

결론

TypeScript와 사용자 정의 변환기를 활용하면 최신 JavaScript 기능과 유형 안전 이점을 갖춘 CloudFront Functions를 작성, 테스트 및 배포할 수 있습니다. 이 접근 방식은 개발 경험을 향상시킬 뿐만 아니라 코드가 강력하고 유지 관리 가능하도록 보장합니다.

내 GitHub에서 전체 작업 코드 예제를 찾을 수 있습니다

감사의 말

이 솔루션에 사용된 사용자 정의 변환기 접근 방식에 영감을 준 typescript-remove-exports 패키지 작성자에게 특별히 감사드립니다. 이들의 작업은 CloudFront의 요구 사항을 충족하도록 TypeScript 코드를 조정하기 위한 기반을 제공했습니다.

위 내용은 TypeScript를 사용하여 테스트 가능한 CloudFront 함수 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!