{"componentChunkName":"component---src-templates-blog-detail-tsx","path":"/blog/2019-08-08-typescript-nodejs","result":{"data":{"currentBlog":{"id":"8bea29f1-825b-5b54-b276-79b877da385a","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586850934183-%E5%B0%81%E9%9D%A2%E5%9B%BE%20%285%29.png","authors":["朱理锋"],"categories":["guides-and-tutorials","user-stories"],"date":"2019-08-08T00:00:00.000Z","title":"云函数 + TypeScript + Node.js 最佳实践探索","description":"本文使用了 Typescript 和 nodejs 开发，实现一个部署在腾讯云云函数 SCF 上的小工具","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["TypeScript","Node.js"],"keywords":"Serverless","outdated":null},"wordCount":{"words":613,"sentences":94,"paragraphs":93},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-08-08-typescript-nodejs.md","fields":{"slug":"/blog/2019-08-08-typescript-nodejs/","keywords":["go","java","nodejs","serverless","serverlesscloud","文件"]},"html":"

目的

\n

最近 Serverless 愈来愈火，我刚好在培训，比较有时间去尝试一些新东西，所以趁这个时候去使用下 Serverless，尝试使用 Typescript 和 nodejs 开发，部署在腾讯云 SCF 上的一个小工具，探讨下 Typescript+ Node.js + SCF 的最好实践模式，并同时抛钻引玉，希望有同学提供更好的方案。

\n

项目介绍

\n

一、想法

\n

本人有时候会追剧，但是剧集更新时，我一般都是不知道的。只有空闲的时候，才会特地去查看它们有没有更新。如果有这么一个工具，能够在剧集更新的时候，主动告诉我，那么我就不用时不时去查询，对我来说就会方便很多。

\n

在我没有接触到 Serverless 之前，我的想法是这样的 —— 写这样的程序并不难，但是我得买个机器部署啊？如果有问题不能及时发现，还得上机器查日志，或者自己去控制程序定时爬取的逻辑等等。

\n

总的来说就是，实现与维护一个这样的程序的成本远大于了其带给我的便利，让我有想法却懒于行动。

\n

但是有了 Serverless 后，以上问题将不再是问题。例如部署难题，使用 Serverless 就是使用云供应商提供的开发者工具，用它创建函数，打包上传代码即部署成功；又例如定时爬取逻辑，使用其提供的定时触发器能力即可。这让我能更专注于代码实现。

\n

在此，我不会很官方地去讲 Serverless 的概念以及好处，仅仅是从一个开发者的角度来阐述我的想法。

\n

二、实践

\n

1、流程图

\n

程序的整个流程图如下图所示，逻辑很简单，这个项目的目的不在于实现一个多厉害的功能，而在于 Typescript + Node.js + SCF 的实践方式的探索。

\n

\n

2、开发

\n

开发能在 SCF 运行的Node.js 程序的其实与传统的开发Node.js 程序在语言编写上并没有太大区别。比较明显的不同在于，我们开发时得有一个入口的函数，比如像这样：

\n

\n

更具体的入门文档，可以看此处，跟着文档一步步学习编写一个简单的函数。接下来回归正题。

\n

a. 环境搭建

\n

首先为了方便开发，建议安装腾讯云 SCF 提供的命令行工具或者 vscode 插件。但是这里我开发的时候 vscode 插件还没发布，所以这里主要使用命令行工具，命令行工具的安装与使用的文档，具体可以看此处。

\n

安装好后，使用 scf init（具体参数得去看文档填写，这个提个建议，scf init提供交互式操作，采取问答的模式去创建）创建一个项目、项目文件很简单，一共就四个文件，前三个，应该不多做介绍。第四个文件 template.yaml 称为模板文件，简单来说是描述这个函数的文件，比如函数的环境变量，触发器类型等等，具体还是前往文档处查看吧。

\n

\n

接下来，就是正常配置 tsconfig.json，如果没有安装 typescript 的同学请去官网安装，然后 tsc --init 就可以快速生成一个 tsconfig.json，然后根据自己的需求配置即可。

\n

然后，就是编写 npm scripts。

\n

主要就三个操作，build，dev，deploy。

\n

可以使用 npm scripts 把 typescript 的编译和 SCF CLI 的本地调试，打包和部署串联在一起，使需要敲打的命令简洁和语义化

\n

\n

最后，将本地仓库与远程仓库关联起来。（这里提一个优化：有一种场景是用户已经创建了一个 git 仓库，现在需要将仓库里的代码写成 SCF 模式下的代码，并配合 SCF CLI 使用，目前 SCF CLI 只支持 init 一个完整的项目，如果支持在一个已有项目中快速生成调试和部署的 yaml，对开发者来说是一个比较方便的功能）

\n

b. 编码

\n

\n

我的主要逻辑代码分为上面的文件。

\n\n

上面简单介绍下主要逻辑代码的文件，具体的实现，有兴趣可以移步到 Github 地址 查看

\n

3、调试

\n

上面也有提到我编写的 npm scripts 里有 npm run dev 的一条。本人开发这个项目时，调试都执行 npm run dev 来进行调试。这里提一下，测试环境一般是需要和正式环境隔离的。所以可以新建一个 env.json 文件，里面填写

\n\n \n 复制代码\n \n \n
  {    \"NODE_ENV\": development  }
\n

并将 npm script 中的 dev 命令改成 npm run build && scf local generate-event timer timeup | scf native invoke --template template.yaml --env-vars env.json

\n

然后在配置文件中根据 process.env.NODE_ENV 变量来判断是测试环境还是正式环境，并填写对应环境依赖的服务的配置即可。

\n

4、部署

\n

上面讲了这么多，其实都不是我最想表达的，因为我并没有在上面遇到一些很棘手的问题。而在部署的时候，我才发现在使用 typescript 时，无法在腾讯云 SCF 目前的部署要求以及项目的文件目录管理中做到完美的配合。

\n

\n

后面和同事讨论后，还是有不错的方法是达到两者的平衡。下面是我的多次尝试的一个过程。

\n

如果不使用 typescript，仅使用 js 编写 nodejs 程序，则不需要编译的过程，部署函数时，只需要打包然后部署即可；但是使用 typescript 后，则多了一步将 ts 代码编译成 js 代码的步骤。为了管理好项目的文件目录，我倾向于 ts 和 js 文件分别存放在不同的文件夹，例如，src 文件夹存放 ts 文件，dist 则是编译后得到的 js 文件。我一开始的文件目录便是如此。

\n

第一次尝试

\n

→ 文件目录：

\n

\n

→ tsconfig.json 指定编译 src 文件夹下的 ts 文件，输出到 dist 文件夹

\n

\n

→ template.yaml CodeUri 指向 dist 文件夹

\n

\n

根据上面的配置，在本地调试是可以的。但是当部署到云上，测试是失败的。如果大家熟练的话可以立刻发现问题所在，打包没有把 node_modules 打包进去。主要逻辑代码依赖的第三方库全都找不到，测试当然失败了。

\n

第二次尝试

\n

根据第一次尝试，我使用 npm scripts 的 pre 钩子，在执行部署前，编辑 ts 代码，同时把 node_modules 拷贝到 dist 文件夹，然后再打包部署解决了这个问题。

\n

→ package.json

\n

\n

→ copy_node_modules.js

\n

\n

→ dist 文件夹下的文件

\n

\n

虽然这样做可以运行了，在本地文件目录管理合理，但是提交到云上的代码是编译后的，基本没啥可读性，就是一坨能运行的东西，项目代码也不完整。所以个人认为，最完美的是本地开发的项目代码和交到云上的项目代码是一致的，不需要通过额外的脚本去阉割。虽然目前腾讯云 SCF 控制台的 webIDE 还只是能看入口文件，不过之后会接入 Cloud Studio，起码可以看到整个代码文件夹的每个文件，说不定以后就支持在线支持 typescript 编译（虽然不知道可不可能）。所以本人开始了第三次尝试。

\n

第三次尝试

\n

我有一个想法：template.yaml 中指定的 Handler，即入口函数，从 index.main_handler 写成 文件夹 /index.main_handler，即入口函数可以在某个文件夹里。

\n

我在 template.yaml 处的 Handler 写成 dist/index.main_handler，CodeUri 写成了根目录，这样就可以打包整个文件夹，然后指定 Handler 为 dist 文件夹的 index 文件的 main_handler 函数。

\n

→ template.yaml

\n

\n

本地调试时，是成功的！

\n

但是在部署的时候，

\n

\n

额，好吧，我觉得是这个方案是不行的了，因为不符合 SCF 的要求，通过不了校验。

\n

第四次尝试

\n

这是我第四次尝试。但是不是最完美的，在文件管理退了一步，允许 ts 和编译后的 js 放在一起。这样能做到把整个项目都打包上去，而且可运行，但是 ts 和 js 放在一起，文件管理不太合理。修改的地方如下：

\n

index.ts 文件从 src 文件夹移动到根目录

\n

→ tsconfig.json

\n

编辑根目录下的 index.ts 和 src 文件夹下的 ts 文件，剔除 node_modules，输出到根目录

\n

\n

\n

→ template.yaml

\n

CodeUri 改成根目录，Handler 改成 index.main_handler，即跟 CLI 生成的一样

\n

\n

编译后结果

\n

\n

最后部署到云上 SCF，是可以运行的，而且是把整个项目都打包了上去，日后腾讯云 SCF 接入了 Cloud Studio，WebIDE 看到的文件架构和本地看到的文件架构是一致的。

\n

第五次尝试

\n

兜兜转转，有时候问题解决很简单。和组内同事讨论后，一位大佬同事点出 —— 可不可以在根目录写一个 index 文件，然后调用编译后的 index 文件的入口方法?。

\n

一语惊醒梦中人！是的，一开始就没注意到，还可以这样解决，思维一直在一个圈子里绕来绕去，没有跳出来。这样做的成本很低，而且能达到了我之前说到的理想状态：

\n

本地开发的项目代码和交到云上的项目代码是一致的，不需要通过额外的脚本去阉割

\n

实施方法即是，把 typescript 文件放在 src 文件夹下，编辑后的 js 文件放在 dist 文件夹下，在根目录编写一个 index.js 文件，文件里的 main_hanlder 方法调用编译后的 index 文件的入口函数，下面是一些核心代码。

\n

→ index.js

\n

\n

→ tsconfig.json

\n

\n

→ template.json

\n

\n

→ 编译后结果

\n

\n

三、成果

\n

简单展示下代码线上运行后的结果。

\n

\n

\n

总结

\n

上面说了这么多，这里给一个总结就是 —— 虽然腾讯云 SCF 没有原生支持 TypeScript，但是经过一些方法还是可以做到两者的完美配合。

\n

首先本地开发是没啥问题的，上面提到的尝试，都是为了能够在本地调试成功的同时可以部署到云上。

\n

主要是部署的问题，其中可行的三个尝试：

\n\n

最后，以上的五个尝试，是本人开发的时候的想法与实践，也许不太正确，有误欢迎大家来批评。如果大家有更好的方法，欢迎讨论。五次尝试的源码都在 Github 地址，前四次尝试均有对应分支，master 分支为第五次尝试。

\n
\n
\n

传送门：

\n\n
\n

欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！

","tableOfContents":""},"previousBlog":{"id":"22c72191-2b2a-5d57-8a0c-aa1616ee296c","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020414/1586850758698-%E5%B0%81%E9%9D%A2%E5%9B%BE%20%284%29.png","authors":["陈杰文"],"categories":["guides-and-tutorials","user-stories"],"date":"2019-08-12T00:00:00.000Z","title":"基于 Node.js 的轻量级云函数功能实现","description":"在万物皆可云的时代，你的应用甚至不需要服务器。云函数功能在各大云服务中均有提供，那么，如何用「无所不能」的 Node.js 实现呢？","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Node.js","Serverless"],"keywords":"Serverless","outdated":null},"wordCount":{"words":227,"sentences":56,"paragraphs":56},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-08-12-nodejs.md","fields":{"slug":"/blog/2019-08-12-nodejs/","keywords":["java","koa","nodejs","serverless","无服务器","无服务器架构","云函数","函数","javascript","sandbox","func","执行"]}},"nextBlog":{"id":"2dc78814-9d77-555b-a1bb-ad202c8ec2d1","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/cloudforecast/thumbnail.png","authors":["FrancoisLagier"],"categories":["user-stories"],"date":"2019-08-07T00:00:00.000Z","title":"Serverless：初创企业的理想选择？（CloudForecast 案例分析）","description":"CloudForecast 是 2018 年成立的一家独立初创企业，本文将介绍他们决定选择 Serverless 的原因。","authorslink":["https://serverless.com/author/francoislagier/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":211,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-08-07-serverless-for-startups.md","fields":{"slug":"/blog/2019-08-07-serverless-for-startups/","keywords":["serverless","云函数","serverless","函数","Serverless","utm","Framework","blog","CloudForecast","cloudforecast"]}},"recommendBlogs":{"edges":[{"node":{"id":"4300b21c-7209-5256-86ff-0d38e3daec9b","frontmatter":{"thumbnail":"https://main.qcloudimg.com/raw/14f1c8eed372e76c1b139703b2f6d0fa.jpg","authors":["KieranMcCarthy"],"categories":["user-stories","engineering-culture"],"date":"2018-01-09T00:00:00.000Z","title":"我是如何在四年时间里，从厨师转行为 Serverless 应用开发者","description":"我是厨师出身，现在成为了一名 Serverless 应用开发者。","authorslink":["https://serverless.com/author/kieranmccarthy/"],"translators":["Aceyclee"],"translatorslink":["https://www.zhihu.com/people/Aceyclee"],"tags":["应用开发","Serverless"],"keywords":"Serverless 应用开发,Serverless 管理,厨师转行为 Serverless 应用开发者","outdated":null},"wordCount":{"words":285,"sentences":38,"paragraphs":36},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years.md","fields":{"slug":"/blog/2018-01-09-from-chef-to-serverless-developer-in-4-years/","keywords":["无服务器","无服务器开发","云函数","学习","Serverless","构建","Framework","开发者","服务器","应用","学位","简历"]}}},{"node":{"id":"665f9ce2-4451-59fd-bf98-1861789d3b3b","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/Serverless_logo.png","authors":["AndreaPasswater"],"categories":["guides-and-tutorials","engineering-culture"],"date":"2018-03-19T00:00:00.000Z","title":"如何为无服务器开放源代码项目做贡献","description":"想要为无服务器开放源代码项目做贡献？您可以遵循下面的指南。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":96,"sentences":36,"paragraphs":36},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-03-19-how-contribute-to-serverless-open-source.md","fields":{"slug":"/blog/2018-03-19-how-contribute-to-serverless-open-source/","keywords":["serverless","无服务器","serverless","github","插件","服务器","贡献","示例","blog","contribute"]}}},{"node":{"id":"a3e92579-65c3-5159-937c-32d18c5df7d7","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/why-not/why-not-header.png","authors":["AndreaPasswater"],"categories":["guides-and-tutorials","operations-and-observability","engineering-culture"],"date":"2018-03-21T00:00:00.000Z","title":"不适合选择无服务器的情境及原因","description":"无服务器既有优点也有缺点。那么，哪些情境下不适合选择无服务器？原因又是什么呢？","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":163,"sentences":43,"paragraphs":43},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-03-21-when-why-not-use-serverless.md","fields":{"slug":"/blog/2018-03-21-when-why-not-use-serverless/","keywords":["faas","react","serverless","spa","无服务器","无服务器函数","无服务器架构","无服务器开发","服务器","twitter","serverless","blockquote","lang","script","en"]}}},{"node":{"id":"6a16520b-7886-582e-9182-64e50712d486","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/vendor+choice/serverless-data-portability.jpg","authors":["NickGottlieb"],"categories":["engineering-culture","guides-and-tutorials"],"date":"2018-06-20T00:00:00.000Z","title":"浅谈无服务器、数据锁定和供应商选择","description":"供应商选择是如今 IT 领导者需要考虑的最重要事项，而这一点可利用数据可移植性来实现。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":205,"sentences":33,"paragraphs":33},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-06-20-data-lockin-vendor-choice-portability.md","fields":{"slug":"/blog/2018-06-20-data-lockin-vendor-choice-portability/","keywords":["go","serverless","无服务器","无服务器架构","供应商","serverless","开发人员","数据","锁定","选择","服务"]}}},{"node":{"id":"94741abb-10ba-5db1-9756-cd1d573473fa","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/webstorm-ide/streamline-webstorm-serverless2.jpg","authors":["EslamHefnawy"],"categories":["guides-and-tutorials","engineering-culture"],"date":"2018-08-15T00:00:00.000Z","title":"如何使用 WebStorm 简化无服务器工作流程","description":"在本文中，我将和您分享如何使用 WebStorm 进行无服务器特定的 IDE 设置以及如何利用它来极大地加快无服务器工作流程。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":234,"sentences":54,"paragraphs":54},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-08-15-streamline-serverless-workflow-webstorm.md","fields":{"slug":"/blog/2018-08-15-streamline-serverless-workflow-webstorm/","keywords":["nodejs","serverless","无服务器","无服务器开发","serverless","WebStorm","webstorm","服务器","blog","assets"]}}},{"node":{"id":"713a0563-4bf9-5721-bacb-3b4ef609fe4a","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/camp-fire/camp-fire-housing-thumb.jpg","authors":["EricWyne"],"categories":["guides-and-tutorials","user-stories"],"date":"2018-12-05T00:00:00.000Z","title":"Serverless Twitter 机器人帮助为坎普山火受灾者安置住房","description":"加利福尼亚州的坎普山火致使数千人流离失所，为此，我构建了一个简单的 Serverless Twitter 机器人来帮助将受灾者安置在临时住房！","authorslink":["https://serverless.com/author/ericwyne/"],"translators":["Aceyclee"],"translatorslink":["zhihu.com/people/Aceyclee"],"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":157,"sentences":26,"paragraphs":26},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-05-serverless-twitter-camp-fire.md","fields":{"slug":"/blog/2018-12-05-serverless-twitter-camp-fire/","keywords":["serverless","无服务器","云函数","Serverless","org","住房","Twitter","函数","受灾","机器人","山火"]}}},{"node":{"id":"98602143-b837-5f50-a24f-3b1ec76044d7","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/sqquid/sqquid-serverless-thumb.jpg","authors":["RonPeled"],"categories":["user-stories"],"date":"2018-12-17T00:00:00.000Z","title":"SQQUID：100% 无服务器初创公司","description":"SQQUID 将 AWS Lambda 和无服务器框架用于其核心产品和营销网站。我们来看看一个完全无服务器的初创公司是怎样的。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":266,"sentences":42,"paragraphs":42},"fileAbsolutePath":"/opt/build/repo/content/blog/2018-12-17-sqquid-one-hundred-percent-serverless.md","fields":{"slug":"/blog/2018-12-17-sqquid-one-hundred-percent-serverless/","keywords":["go","serverless","无服务器","无服务器架构","服务器","架构","Lambda","集成","FaaS","串行","系统"]}}},{"node":{"id":"29dc2e58-d2ba-56f9-aee1-d21b0bc62e0e","frontmatter":{"thumbnail":"https://s3-us-west-2.amazonaws.com/assets.blog.serverless.com/ao-com-story/ao-serverless-thumbnail.png","authors":["NickGottlieb"],"categories":["user-stories"],"date":"2019-04-24T00:00:00.000Z","title":"AO.com：逐渐转向无服务器优先","description":"AO.com 的 SCV 团队率先尝试无服务器服务。折服于无服务器框架的快速周转时间和低维护成本，整个团队逐渐转向无服务器优先。","authorslink":null,"translators":null,"translatorslink":null,"tags":null,"keywords":null,"outdated":null},"wordCount":{"words":236,"sentences":42,"paragraphs":35},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-04-24-ao-serverless-first.md","fields":{"slug":"/blog/2019-04-24-ao-serverless-first/","keywords":["serverless","无服务器","服务器","团队","Lambda","功能","构建"]}}}],"totalCount":89}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"8bea29f1-825b-5b54-b276-79b877da385a","previousBlogId":"22c72191-2b2a-5d57-8a0c-aa1616ee296c","nextBlogId":"2dc78814-9d77-555b-a1bb-ad202c8ec2d1","categories":["guides-and-tutorials","user-stories"]}}}