Création de fonctions CloudFront testables avec TypeScript

Les fonctions AWS CloudFront sont un outil puissant pour exécuter du code JavaScript léger en périphérie, vous permettant de manipuler les requêtes et les réponses.

Cependant, AWS exige que ces fonctions soient écrites en JavaScript Vanilla, ce qui peut être limitant pour les développeurs qui préfèrent la sécurité des types et la syntaxe moderne de TypeScript.

Dans cet article, je vais vous présenter une solution pour écrire des fonctions CloudFront en TypeScript, importer des fichiers supplémentaires et les tester efficacement.

Défi

Les fonctions CloudFront doivent être écrites en JavaScript ES5, qui ne dispose pas des fonctionnalités modernes et de la sécurité des types de TypeScript. Cette exigence constitue un défi pour les développeurs qui souhaitent tirer parti des avantages de TypeScript tout en continuant à déployer sur CloudFront.

Solution

La solution consiste à utiliser TypeScript pour écrire vos fonctions CloudFront, puis à les transpiler en JavaScript ES5. Cette approche vous permet de conserver les avantages de TypeScript pendant le développement et les tests, tout en répondant aux exigences de déploiement d'AWS.

Composants clés

Options du compilateur TypeScript :

1. Configurez le compilateur TypeScript pour cibler ES5 et supprimez la syntaxe du module, car l'environnement JavaScript de CloudFront ne prend pas en charge tous les modules d'exécution CommonJS.
2. Transformateurs personnalisés : utilisez des transformateurs TypeScript personnalisés pour supprimer les mots-clés d'exportation et les propriétés __esModule, garantissant ainsi que la sortie est compatible avec CloudFront.
3. Build Script : créez un script de build pour transpiler les fichiers TypeScript en JavaScript, en appliquant les transformateurs personnalisés.
4. Tests : écrivez des tests unitaires pour votre code TypeScript à l'aide d'un framework de test comme Jest, en vous assurant que votre logique est solide avant le déploiement.

Mise en œuvre

Vous trouverez ci-dessous un exemple simplifié de la façon dont vous pouvez configurer votre projet TypeScript pour CloudFront Functions :

Configuration 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"]
}

Transformateur personnalisé

Créez un transformateur personnalisé pour supprimer les mots-clés d'exportation :

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);
  };
};

Créer un script

Un script pour transpiler les fichiers 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)));

Usage

1. Créez votre fonction CloudFront Typescript avant le déploiement :
   ts-node scripts/build-cloudfront.ts

2. Définissez le chemin d'accès à la sortie de votre build de fonction :
   

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,
})

Tester avec Jest

Configurez Jest pour tester votre code TypeScript :

{
  "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"]
}

Conclusion

En tirant parti de TypeScript et des transformateurs personnalisés, vous pouvez écrire, tester et déployer des fonctions CloudFront avec des fonctionnalités JavaScript modernes et des avantages en matière de sécurité de type. Cette approche améliore non seulement votre expérience de développement, mais garantit également que votre code est robuste et maintenable.

Exemple de code fonctionnel complet que vous pouvez trouver sur mon GitHub

Remerciements

Un merci tout spécial aux auteurs du package typescript-remove-exports, qui a inspiré l'approche de transformateur personnalisé utilisée dans cette solution. Leur travail a fourni une base pour adapter le code TypeScript afin de répondre aux exigences de CloudFront.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!