TypeScript を使用したテスト可能な CloudFront 関数の構築

AWS CloudFront Functions は、軽量の JavaScript コードをエッジで実行するための強力なツールであり、リクエストとレスポンスを操作できます。

ただし、AWS ではこれらの関数をバニラ JavaScript で記述する必要があるため、TypeScript のタイプ セーフティと最新の構文を好む開発者にとっては制限となる可能性があります。

この記事では、TypeScript で CloudFront 関数を作成し、追加のファイルをインポートし、それらを効果的にテストするためのソリューションについて説明します。

チャレンジ

CloudFront 関数は ES5 JavaScript で記述する必要がありますが、ES5 JavaScript には TypeScript の最新機能とタイプ セーフがありません。この要件は、CloudFront にデプロイしながら TypeScript の利点を活用したい開発者にとって課題となります。

解決

この解決策には、TypeScript を使用して CloudFront 関数を記述し、それを ES5 JavaScript にトランスパイルすることが含まれます。このアプローチにより、AWS のデプロイメント要件を満たしながら、開発およびテスト中に TypeScript の利点を維持できます。

主要コンポーネント

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 関数を作成、テスト、デプロイできます。このアプローチは、開発エクスペリエンスを向上させるだけでなく、コードの堅牢性と保守性を保証します。

完全に動作するコード例は私の GitHub にあります

謝辞

このソリューションで使用されるカスタム トランスフォーマー アプローチのインスピレーションとなった typescript-remove-exports パッケージの作成者に心より感謝いたします。彼らの仕事は、CloudFront の要件を満たすように TypeScript コードを適応させるための基盤を提供しました。

以上がTypeScript を使用したテスト可能な CloudFront 関数の構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。