作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Mohammad是一名全栈开发人员,他使用Lambda在AWS上构建了多个应用程序, NoSQL, and Node.js. 他在为中型公司优化AWS基础设施方面拥有丰富的经验.
以前在
构建无服务器应用程序的强大工具 AWS 无服务器应用模型(SAM)经常与JavaScript配对: 62% 许多大中型公司的开发人员选择JavaScript编写无服务器代码. 然而,打印稿的受欢迎程度正在飙升,并且远远超过了JavaScript。 third最喜欢的语言.
而JavaScript样板并不难找到, 用打印稿启动AWS SAM项目要复杂得多. 下面的教程展示了如何从头开始创建一个AWS SAM 打印稿项目,以及不同部分是如何协同工作的. 读者只需要稍微熟悉一下 AWSλ 接下来的函数.
我们的无服务器应用程序的基础包括各种组件. 我们将首先配置AWS环境, 我们的NPM包, 和Webpack功能-然后我们可以创建, invoke, 并测试Lambda函数以查看应用程序的运行情况.
为了搭建AWS环境,我们需要安装以下组件:
注意,本教程需要安装 Docker 在上面的第2步中本地测试我们的应用程序.
让我们创建项目目录, aws-sam-typescript-boilerplate
, and a src
保存代码的子文件夹. 从项目目录中,我们将建立一个新的npm包:
NPM init - y# -y选项跳过项目问卷
该命令将创建一个 package.json
文件放入我们的项目中.
Webpack是一个主要用于JavaScript应用程序的模块打包器. 因为打印稿编译成纯JavaScript, Webpack将有效地为web浏览器准备我们的代码. 我们将安装两个库和一个自定义加载器:
NPM I——save-dev webpack
Aws Sam命令行构建命令, 山姆构建
,因为它试图运行,所以减慢了开发过程 npm安装
对于每个函数,导致重复. 控件中的另一个构建命令 aws-sam-webpack-plugin 图书馆加速我们的环境.
NPM I——save-dev -sam-webpack-plugin
默认情况下,Webpack不提供配置文件. 让我们创建一个自定义配置文件 webpack.config.js
在根目录下:
/* eslint-disable @typescript-eslint/no-var-require */
Const path = require('path');
const AwsSamPlugin = require('aws-sam-webpack-plugin');
const awsSamPlugin = new awsSamPlugin ();
module.出口= {
entry: () => awsSamPlugin.entry(),
输出:{
filename: (chunkData) => awsSamPlugin.文件名(chunkData),
libraryTarget:“commonjs2”,
路径:路径.解决('.')
},
devtool:“源图”,
解决:{
扩展:['.ts', '.js']
},
目标:“节点”,
模式:过程.env.NODE_ENV || 'development';
模块:{
规则:[{test: /\.tsx?$/, loader: 'ts-loader'}]
},
插件(awsSamPlugin):
};
现在让我们来检查一下各个部分:
entry
:这将加载条目对象(Webpack开始构建bundle的地方) AWS: Serverless:函数
resource.output
:这指向构建输出的目的地(在本例中, .aws-sam /构建
). 这里我们还将目标库指定为 commonjs2
,它将入口点的返回值赋给 module.exports
. 这个入口点是Node的默认入口点.js的环境.devtool
:这将创建一个源映射, app.js.map
,在我们的构建输出目的地. 它将我们的原始代码映射到web浏览器中运行的代码,如果我们设置了环境变量,它将有助于调试 NODE_OPTIONS
to ——enable-source-maps
对于Lambda.resolve
这告诉Webpack在处理JavaScript文件之前先处理打印稿文件.target
:这告诉Webpack要瞄准Node.Js是我们的环境. 这意味着Webpack将使用Node.js require
函数,用于在编译时加载块.module
:这将把打印稿加载器应用到所有满足 test
条件. 换句话说,它确保所有带有 .ts
or .tsx
扩展将由加载器处理.plugins
:这有助于Webpack识别和使用我们的 aws-sam-webpack-plugin
.在第一行中,我们为这个文件禁用了一个特定的ESLint规则. 我们稍后将配置的ESLint标准规则不鼓励使用 require
statement. We prefer require
to import
在Webpack中,所以我们会做一个例外.
添加打印稿支持将改进 开发人员的经验 by:
First, 我们将在本地为我们的项目安装打印稿(如果你是全局安装打印稿,请跳过这一步):
NPM I——save-dev typescript
我们将包括我们正在使用的库的类型:
@types/node @ webpack @types/aws-lambda
现在,我们要创建打印稿配置文件, tsconfig.json
,在项目根目录下:
{
" compilerOptions ": {
“目标”:“ES2015”,
“模块”:“commonjs”,
“sourceMap”:没错,
“严格”:没错,
“esModuleInterop”:没错,
“skipLibCheck”:没错,
“forceConsistentCasingInFileNames”:没错,
},
“包括”:[" src / * * / *.ts”、“src / * * / *.js"],
“排除”(“node_modules”):
}
这里我们跟着 默认配置 由打印稿社区推荐. 我们添加了 include
将文件追加到 src
文件夹到程序和 exclude
来避免打印稿编译 node_modules
文件夹——我们不会直接触及这段代码.
到目前为止,我们还没有为我们的无服务器应用程序编写任何Lambda代码,所以让我们开始吧. In the src
我们之前创建的文件夹,我们将创建一个 test-lambda
子文件夹包含 app.ts
使用Lambda函数创建文件:
从'aws-lambda'中导入{APIGatewayEvent};
export const handler = async (event: APIGatewayEvent) => {
console.. log('传入的事件是',JSON.stringify(事件));
Const response = {
statusCode: 200,
身体:JSON.stringify({message: '请求成功.' })
};
返回响应;
};
这个简单的占位符函数返回一个带有body的200响应. 我们将能够运行一个步骤后的代码.
AWS SAM需要 模板文件 翻译我们的代码并将其部署到云端. 创建文件 template.yaml
在根目录下:
AWSTemplateFormatVersion:“2010-09-09”
变换:AWS:: serverless - 2016 - 10 - 31所示
描述:使用打印稿的AWS SAM样板文件
Globals:
功能:
运行时:nodejs14.根据您的需要修改版本
超时:30
资源:
TestLambda:
类型:AWS: Serverless:函数
属性:
处理程序:程序.handler
FunctionName:“Test-Lambda”
CodeUri: src / test-lambda /
Events:
ApiEvent:
类型:Api
属性:
路径:/测试
方法:
该模板文件生成一个可从HTTP GET API访问的Lambda函数. 中引用的版本 Runtime:
Line可能需要定制.
要运行该应用程序,我们必须在 package.json
文件,用于使用Webpack构建项目. 该文件可能有现有的脚本,比如一个空的测试脚本. 我们可以像这样添加构建脚本:
"脚本":{
“构建”:“webpack-cli”
}
如果你逃跑 NPM运行构建
在项目的根目录下,您应该看到构建文件夹, .aws-sam
, created. 在Mac环境中,我们可能需要通过按下键来显示隐藏文件 Command + Shift + . 要查看文件夹.
现在我们将启动一个本地HTTP服务器来测试我们的函数:
Sam local start-api
当我们访问a中的测试端点时 web浏览器,我们应该看到成功消息.
控制台应该显示该函数在运行之前已挂载到Docker容器中, 这就是我们之前安装Docker的原因:
调用应用程序.处理程序(nodejs14.x)
跳过拉图,使用本地图片:public.ecr.aws / sam / emulation-nodejs14.x: rapid-1.37.0-x86_64.
安装/用户/ mohammadfaisal /文件/学习/ aws-sam-typescript-boilerplate /.aws-sam /构建/TestLambda作为/var/task:ro,委托在运行时容器内
我们的项目已经开始运行了, 添加一些最后的润色将确保出色的开发体验,从而提高生产力和协作.
在每次代码更改之后运行构建命令是非常繁琐的. 热重装将解决这个问题. 我们可以在我们的 package.json
要查看文件更改:
"watch": "webpack-cli -w"
打开一个单独的终端并运行 NPM运行观察
. 现在,当您更改任何代码时,您的项目将自动编译. 修改代码的消息,刷新网页,并查看更新后的结果.
没有ESLint和Prettier, 打印稿或JavaScript项目是不完整的. 这些工具将保持项目的代码质量和一致性.
让我们先安装核心依赖:
NPM I——save-dev eslint prettier
我们将添加一些helper依赖项,这样ESLint和Prettier就可以在打印稿项目中协同工作:
NPM I—save-dev \
eslint-config-prettier \
eslint-plugin-prettier \
@typescript-eslint /解析器\
@typescript-eslint / eslint-plugin
接下来,我们将通过创建ESLint配置文件来添加我们的过滤器, .eslintrc
,在项目根目录下:
{
“根”:没错,
"env": {
“es2020”:没错,
“节点”:没错,
“笑话”:真的
},
“解析”:“@typescript-eslint /解析器”,
“扩展”:(
“eslint:推荐”,
“插件:@typescript-eslint /推荐”,
“插件:漂亮/推荐”
],
“ignorePatterns”:[" src / * * / *.test.“Ts”,“dist/”,“coverage/”,“test/”],
" parserOptions ": {
“ecmaVersion”:2018年,
“sourceType”:“模块”,
" ecmaFeatures ": {
“impliedStrict”:真的
}
},
"规则":{
"quotes": ["error", "single", {"allowTemplateLiterals": true}],
“默认情况”:“警告”,
“no-param-reassign”:“警告”,
“no-await-in-loop”:“警告”,
“@typescript-eslint / no-unused-vars”:(
"error",
{
“var”:“所有”,
“参数”:“没有”
}
]
},
"设置":{
“导入/解析器”:{
"node": {
“扩展”:“.js", ".jsx", ".ts", ".tsx"]
}
}
}
}
请注意 extends
部分必须将Prettier插件配置放在最后一行,以便在编辑器中以ESLint错误的形式显示Prettier错误. 我们遵循ESLint 推荐设置 中添加了一些自定义首选项 rules
section. 请随意浏览 可用的规则 并进一步自定义您的设置. 我们选择包括:
default
case in switch
语句.await
循环中的语句.我们已经设置了ESLint配置来使用更漂亮的格式. (更多信息可在 eslint-config-prettier
GitHub项目.)现在,我们可以创建Prettier配置文件, .prettierrc
:
{
“trailingComma”:“没有”,
“tabWidth”:4
“半”:没错,
“singleQuote”:真的
}
这些布景来自美缇埃 官方文档; you can modify them as you desire. 我们更新了以下属性:
trailingComma
我们把这个从 es5
to none
避免尾随逗号.semi
我们把这个从 false
to true
因为我们更喜欢在每行的末尾有一个分号.最后,是时候看看ESLint和Prettier的实际应用了. In our app.ts
文件,我们将更改 response
变量类型 const
to let
. Using let
是不是在这种情况下的好做法既然我们不修改的值 response
. 编辑器应该显示一个错误、被破坏的规则和修复代码的建议. 不要忘记在你的编辑器上启用ESLint和Prettier,如果它们还没有设置好的话.
有许多库可用于测试,例如Jest、Mocha和Storybook. 我们将使用 Jest 在我们的项目中有几个原因:
让我们安装所需的依赖项:
NPM I—save-dev jest -jest @types/jest
接下来,我们将创建一个Jest配置文件, jest.config.js
,在项目根目录下:
module.出口= {
根:“src”,
testMatch: [' * * / __tests__ / * * / *.+ (ts | tsx | js) '),
变换:{
'^.+\\.美元(ts | tsx)‘:’ts-jest”
}
};
我们在文件中定制了三个选项:
roots
:这个数组包含了要搜索测试文件的文件夹——它只检查我们的 src
subfolder.testMatch
:这个glob模式数组包括将被视为Jest文件的文件扩展名.transform
:这个选项允许我们在打印稿中使用 ts-jest
package.让我们做一个新的 __tests__
文件夹里面 src / test-lambda
. 在其中,我们将添加文件 handler.test.ts
,在这里我们将创建第一个测试:
导入{handler}../app';
Const事件:any = {
身体:JSON.stringify ({}),
标题:{}
};
describe('Demo test', () => {
这是测试有效的概念证明.', async () => {
Const res = await handler(事件);
期望(res.statusCode).托比(200);
});
});
我们将回到我们的 package.json
用测试脚本文件并更新它:
“测试”:“开玩笑”
当我们跑到终点站的时候 NPM运行试验
,迎接我们的应该是一个合格的测试:
.gitignore
我们应该将Git配置为从源代码管理中排除某些文件. 我们可以创建一个 .gitignore
文件使用 gitignore.io 跳过不需要的文件:
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
#运行时数据
pids
*.pid
*.seed
*.pid.lock
npm-debug.log
package.lock.json
/ node_modules
.aws-sam
.vscode
# 打印稿缓存
*.tsbuildinfo
#可选的npm缓存目录
.npm
#可选ESLint缓存
.eslintcache
我们现在有了一个完整的AWS SAM 样板项目 与打印稿. 我们专注于ESLint的基础知识,并保持高质量的代码, Prettier, 和笑话支持. 本AWS SAM教程中的示例可以作为一个蓝图, 让你的下一个大项目从一开始就步入正轨.
Toptal 工程博客向 基督教Loef 查看本文中提供的代码示例.
AWS无服务器应用模型(SAM)是一个开源AWS框架,允许开发人员更有效地构建无服务器应用程序. 它包括用于本地测试的SAM CLI选项,并与各种AWS无服务器工具集成.
AWS SAM使用简单语法来表示函数、api、数据库和事件源映射. 它提供了一个YAML模板来对应用程序建模,并提供了单个部署配置.
Jest is a testing framework; 打印稿 is a programming language. 更具体地说, Jest通过测试检查代码库的正确性, JavaScript代码库). 打印稿 enables IDEs to catch mistakes while coding and improves development workflow; it is a strict syntactical superset of JavaScript.
世界级的文章,每周发一次.
世界级的文章,每周发一次.