Bundling AWS v3 SDK with Webpack in an AWS Lambda w/ Serverless Framework?

Question

Tengo una aplicación AWS, implementada como una sola función Lambda, que estoy desarrollando en Tiposcript con el marco sin servidor. Se compone de una API y una sencilla interfaz de usuario en Express. La aplicación iniciará una tarea ECS (que es lo que hace la API) y la UI encuestará ECS para el estado de tarea y mostrará tal al usuario. Me gustaría usar el SDK V3 AWS para esto. Lectura sobre docs for using the v3 SDK in the browser, veo que debo descargar los clientes individuales con los que quiero usar npm o yarn, luego hazlos en el archivo Javascript para la UI con Webpack. El problema es que ya estoy usando Webpack para traducir Typescript en Javascript. ¿Cómo puedo configurar Webpack para traducir y agrupar el Typescript para la API en un archivo y el Javascript para la interfaz de usuario en otro?

debugdynamo05ee · Accepted Answer

en mi equipo decidimos utilizar no marco sin servidor. en cambio estamos usando capas de cdk y lambda y aws-sdk v3 (typescript) para nodejs. con capa de lambda Yo proveo la carpeta node_modules y referencia esta capa en mis propias lambdas. Pero también he jugado con webpack antes, ver los archivos de configuración a continuación. la estructura en la carpeta dist es necesaria para tener fácil referencia en cdk. Creo que en tu caso sólo tienes que cambiar el objetivo de la biblioteca en la webpack. archivo config.js y que debe trabajar en el navegador también.

webpack.config.js

// webpack.config.js -> we´ve only one config for production/dev -> context: lambda (no minifiying etc. needed)
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  target: "node14", // needed to build proper nodejs14 code (without browser stuff)
  mode: 'development',
  context: __dirname, // to automatically find tsconfig.json
  entry: {
    callCreateLogs: './src/functions/callCreateLogs/index.ts',
    // TODO: add new functions here, maybe later here an additional script will do this for us (the key must match to the folder for right cdk reference)
  },
  devtool: 'inline-source-map', // to find errors (we use that also in productions for backend lambdas)
  output: {
    filename: '[name]/index.js', // generated file based on the entry key
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs', // important for aws lambda context
  },
  plugins: [
    new CleanWebpackPlugin(), // clean up dist folder before build
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          // disable type checker - we will use it in fork plugin
          transpileOnly: true
        }
      }
    ]
  },
  plugins: [new ForkTsCheckerWebpackPlugin()]
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["es2020"],
    "esModuleInterop": true,
    "declaration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": false,
    "sourceMap": true,
    "strictPropertyInitialization": false,
    "typeRoots": ["./node_modules/@types"],
    "outDir": "dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "**/*.spec.ts", "test"]
}

aquí un cidk snippet:

this.CreateLogLambda = new lambda.Function(this, 'createLogLambda', {
      runtime: lambda.Runtime.NODEJS_14_X,
      code: lambda.Code.fromAsset(path.resolve(__dirname, '../../../../backend/dist/createLogs')), // hint: only directory which include the file (no filename here)
      handler: 'index.handler', // filename.methodname (without file extension),
      //role: createLogsLambdaExecutionRole
    });

Respondida el Dec 18, 2020 a las 17:33 - por debugdynamo05ee

Gpt · Answer

Para configurar Webpack para traducir y agrupar el Typescript para la API en un archivo y el JavaScript para la interfaz de usuario en otro, puedes seguir estos pasos:

Configuración de Webpack:

- Crea dos archivos de configuración de Webpack, uno para la API y otro para la interfaz de usuario.

En cada archivo de configuración, especifica la entrada y la salida correspondiente a cada parte de tu aplicación.

Organización de tu proyecto:

- Organiza tu proyecto de manera que tengas una estructura clara que distinga entre la API y la interfaz de usuario.

Instalación de los paquetes necesarios:

- Asegúrate de tener instalado el paquete AWS SDK v3 que necesitas utilizar para cada parte de la aplicación.

Configuración de TypeScript Loader:

- Asegúrate de tener configurado Webpack para usar el TypeScript Loader para traducir el TypeScript a JavaScript en ambas configuraciones.

Configuración de los entry points y output:

- En cada archivo de configuración de Webpack, define los entry points específicos para la API y la interfaz de usuario. Luego, especifica la salida para cada una de estas partes de la aplicación.

Aquí tienes un ejemplo básico de cómo podría lucir la configuración de Webpack para la API y la interfaz de usuario:

Archivo de configuración para la API:

javascript
const path = require('path');

module.exports = {
  entry: './src/api/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'api.bundle.js'
  },
  // Resto de la configuración de Webpack
};

Archivo de configuración para la interfaz de usuario:

javascript
const path = require('path');

module.exports = {
  entry: './src/ui/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ui.bundle.js'
  },
  // Resto de la configuración de Webpack
};

Asegúrate de que la estructura de tu proyecto refleje los entry points especificados en estas configuraciones. Luego, ejecuta el proceso de compilación de Webpack para cada parte de la aplicación.

Con esta configuración, podrás tener un archivo JavaScript separado para la API y la interfaz de usuario, cada uno construido a partir de su respectivo TypeScript.

Respondida el Dec 19, 2020 a las 17:35 - por Gpt

Gemini · Answer

Configuración de Webpack para agrupar el SDK de AWS v3 con Typescript en una función Lambda de AWS con Serverless Framework: 1 . Instala los clientes de AWS SDK v3 necesarios: npm install @aws-sdk/client-ecs 2 . Crea una configuración de Webpack separada para la interfaz de usuario: Crea un archivo webpack.config.ui.js con la siguiente configuración: javascript const path = require('path'); const webpack = require('webpack'); module.exports = { entry: './ui/index.tsx', output: { filename: 'ui.js', path: path.resolve(__dirname, 'public'), }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, module: { rules: [ { test: / .(ts|tsx)$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production'), }, }), ], }; 3 . Crea una configuración de Webpack separada para la API: Crea un archivo webpack.config.api.js con la siguiente configuración: javascript const path = require('path'); const webpack = require('webpack'); const nodeExternals = require('webpack-node-externals'); module.exports = { entry: './api/index.ts', output: { filename: 'api.js', path: path.resolve(__dirname, 'dist'), libraryTarget: 'commonjs2', }, resolve: { extensions: ['.ts', '.js'], }, module: { rules: [ { test: / .ts$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, externals: [nodeExternals()], }; 4 . Agrega las configuraciones de Webpack al archivo serverless.yml: yaml functions: api: handler: api.handler webpack: webpack.config.api.js ui: handler: ui.handler webpack: webpack.config.ui.js 5 . Construye y despliega: Ejecuta los siguientes comandos: npm run build:ui npm run build:api serverless deploy Esto compilará el código fuente de Typescript y Javascript y creará dos archivos JavaScript separados: api.js y ui.js. El archivo api.js contiene el código de la API y el archivo ui.js contiene el código de la interfaz de usuario. Explicación: La configuración de Webpack webpack.config.ui.js se utiliza para crear un paquete para la interfaz de usuario, que se cargará en el navegador del cliente. La configuración de Webpack webpack.config.api.js utiliza webpack-node-externals para excluir los módulos de Node.js del paquete, ya que no son necesarios en el entorno Lambda. El archivo `serverless.yml` configura Webpack para cada función, especificando los archivos de configuración de Webpack correspondientes. Al seguir estos pasos, podrás utilizar el SDK de AWS v3 dentro de una función Lambda de AWS que utiliza el marco sin servidor con código fuente de Typescript y Javascript.

Bundling AWS v3 SDK with Webpack in an AWS Lambda w/ Serverless Framework?

3 Respuestas: