node.js - 如何使用用 TypeScript 编写的 API Gateway 在 VS Code 中调试本地 AWS Lambda 函数?
问题描述
我们即将开始使用 Lambda 函数。
我们有必须使用 TypeScript 的技术限制。
当从 Postman 调用相关端点时,我希望能够在 VS Code 中调试我的 ts 文件。
所以,我们有如下的开发环境:
- 视窗 10
- 适用于 Windows 的 Docker(使用 Hyper-V 而非 WSL 2)
- 打字稿 4.1
- 节点 12.17
- SAM CLI 1.13.2
我已经使用sam init
Hello World 模板来生成初始文件夹结构。
我已经对其进行了增强(主要基于这篇文章)以使用 TypeScript。
文件夹结构
.
├── template.yaml
├── .aws-sam
├── .vscode
| └── launch.json
├── events
├── hello-world
| ├── dist
| ├── app.js
| └── app.js.map
| ├── src
| └── app.ts
| ├── package.json
| └── tsconfig.json
template.yaml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: >
LambdaWithApiGateWayDebug
Sample SAM Template for LambdaWithApiGateWayDebug
Resources:
HelloWorldFunction:
Type: AWS::Serverless::Function
Properties:
CodeUri: hello-world/dist
Handler: app.lambdaHandler
Runtime: nodejs12.x
Events:
HelloWorld:
Type: Api
Properties:
Path: /hello
Method: get
tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"strict": true,
"noImplicitAny": true,
"esModuleInterop": true,
"sourceRoot": "./src",
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
package.json
{
"name": "hello_world",
"version": "1.0.0",
"description": "hello world sample for NodeJS",
"main": "app.js",
"repository": "https://github.com/awslabs/aws-sam-cli/tree/develop/samcli/local/init/templates/cookiecutter-aws-sam-hello-nodejs",
"scripts": {
"compile": "tsc",
"start": "sam local start-api -t ../template.yaml -p 5000 -d 5678"
},
"dependencies": {
"@types/aws-lambda": "^8.10.64",
"@types/node": "^14.14.10",
"aws-sdk": "^2.805.0",
"source-map-support": "^0.5.19",
"typescript": "^4.1.2"
}
}
app.ts
import { APIGatewayProxyEvent, APIGatewayProxyResult } from "aws-lambda";
export const lambdaHandler = async (event: APIGatewayProxyEvent): Promise<APIGatewayProxyResult> => {
const queries = JSON.stringify(event.queryStringParameters);
return {
statusCode: 200,
body: `Queries: ${queries}`
}
}
app.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.lambdaHandler = void 0;
const lambdaHandler = async (event) => {
const queries = JSON.stringify(event.queryStringParameters);
return {
statusCode: 200,
body: `Queries: ${queries}`
};
};
exports.lambdaHandler = lambdaHandler;
//# sourceMappingURL=app.js.map
app.js.map
{"version":3,"file":"app.js","sourceRoot":"./src/","sources":["app.ts"],"names":[],"mappings":";;;AAEO,MAAM,aAAa,GAAG,KAAK,EAAE,KAA2B,EAAkC,EAAE;IAC/F,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC5D,OAAO;QACL,UAAU,EAAE,GAAG;QACf,IAAI,EAAE,YAAY,OAAO,EAAE;KAC5B,CAAA;AACL,CAAC,CAAA;AANY,QAAA,aAAa,iBAMzB"}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "attach Program",
"port": 5678,
"address": "localhost",
"localRoot": "${workspaceFolder}/hello-world/dist",
"remoteRoot": "/var/task",
"protocol": "inspector",
"sourceMaps": true,
"smartStep": true,
"outFiles": ["${workspaceFolder}/hello-world/dist"]
}
]
}
如你看到的:
- 我的 lambda 函数在
hello-world/src/app.ts
- 它符合 commonJs 和 ES2020 target to
hello-world/dist/app.js
with sourcemap - 模板公开位于
hello-world/dist
vialocalhost:5000/hello
端点下的处理程序 - 调试器正在监听端口 5678
所以,当我打电话时,npm run start
它会打印以下输出:
> hello_world@1.0.0 start C:\temp\AWS\LambdaWithApiGateWayDebug\hello-world
> sam local start-api -t ../template.yaml -p 5000 -d 5678
Mounting HelloWorldFunction at http://127.0.0.1:5000/hello [GET]
You can now browse to the above endpoints to invoke your functions. You do not need to restart/reload SAM CLI while working on your functions, changes will be reflected instantly/automatically. You only need to restart SAM CLI if you update your AWS SAM template
2020-12-08 11:40:48 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
当我通过 Postman 向端点发出请求时,控制台会扩展为以下文本:
Mounting C:\temp\AWS\LambdaWithApiGateWayDebug\hello-world\dist as /var/task:ro,delegated inside runtime container
START RequestId: 04d884cf-fa96-4d58-b41c-e4196e12de13 Version: $LATEST
Debugger listening on ws://0.0.0.0:5678/d6702717-f291-42cd-8056-22b9f029f4dd
For help, see: https://nodejs.org/en/docs/inspector
当我将 VS 代码附加到节点进程时,我只能调试app.js
而不是app.ts
.
控制台日志结束:
Debugger attached.
END RequestId: 04d884cf-fa96-4d58-b41c-e4196e12de13
REPORT RequestId: 04d884cf-fa96-4d58-b41c-e4196e12de13 Init Duration: 0.12 ms Duration: 7064.19 ms Billed Duration: 7100 ms Memory Size: 128 MB Max Memory Used: 128 MB
No Content-Type given. Defaulting to 'application/json'.
2020-12-08 11:40:58 127.0.0.1 - - [08/Dec/2020 11:40:58] "GET /hello HTTP/1.1" 200 -
问题
我应该改变什么才能调试我的app.ts
而不是app.js
?
解决方案
我写了一篇中篇文章,解释如何创建、调用和调试 TypeScript lambda 函数。请查看以下链接了解更多详情。
要求
1-创建一个nodejs12x;
创建一个nodejs12x lambda;
安装打字稿:
npm i -g typescript
初始化打字稿:(
tsc --init
它将创建 tsconfig.json 文件)将创建的 tsconfig.json 文件替换为以下代码:
{ "compilerOptions": { "module": "CommonJS", "target": "ES2017", "noImplicitAny": true, "preserveConstEnums": true, "outDir": "./built", "sourceMap": true }, "include": ["handler/**/*"], "exclude": ["node_modules", "**/*.spec.ts"] }
删除 app.js 文件;
在处理程序文件夹内的 TypeScript 代码中创建您的 lambda(您需要创建它):
import { APIGatewayProxyEvent, APIGatewayProxyResult } from "aws-lambda"; export const lambdaHandler = async ( event: APIGatewayProxyEvent ): Promise<APIGatewayProxyResult> => { const queries = JSON.stringify(event.queryStringParameters); return { statusCode: 200, body: `Queries: ${queries}` } }
调整 template.yaml。更改 lambda 的 CodeUri 路径:
CodeUri: hello-world/built
安装所需的节点包:
npm install typescript @types/aws-lambda @types/node -save-dev
包json:
{ "name": "typescript_lambda", "version": "1.0.0", "description": "hello world sample for TypeScript", "main": "app.js", "repository": "https://github.com/jafreitas90/AWS", "author": "Jorge Freitas", "license": "JorgeFreitas Ltd :)", "dependencies": { }, "scripts": { "compile": "tsc" }, "devDependencies": { "@types/aws-lambda": "^8.10.71", "@types/node": "^14.14.22", "aws-sdk": "^2.815.0", "typescript": "^4.1.3" } }
npm 安装
npm 运行编译
在 lambda 函数(TypeScript 代码)中设置断点。在左侧面板上选择调试,然后选择开始调试(顶部的绿色按钮)。就是这样:)
项目结构
推荐阅读
- android - 如何获取访问权限以与 RxAndroidBle 建立蓝牙连接?
- python - 如何在不打开二进制文件的情况下获取文件大小,因为它不断被修改
- android - 下载缺少的 SDK android 文件时出错
- gerrit - 回复之前的评论 Gerrit
- spring-cloud - 优雅地一一调用所有 Spring Cloud Service 实例
- android - 为什么android插件3.2.1在缓存中使用aapt2而不是使用我的构建工具?
- java - 在意图中获取 URL 数据的路径
- angular - Angular 7 应用程序中使用 useHash 的 Instagram API 重定向 URL:Apache 服务器上的 true
- material-ui - Datepicker 材质 Ui 轮廓变体
- android - 在 Kotlin 中选择选项卡或滑动页面时如何加载片段