基于腾讯云Serverless应用，快速实现自己产品api对客Demo

发布于

阅读本文，你可学会以下技能：

  • 如何在腾讯云上快速部署一个serverless网站
  • 已腾讯电子签为例，如何接入腾讯云各以 secretId，secretKey，为身份校验凭据的应用，举一反三，按照这个示例，你可以接入任何其他腾讯云旗下的业务。
  • 如何使用 next.js 创建一个网站应用

什么是腾讯云的serverless

腾讯云 Serverless 是腾讯云推出的一种无服务器计算服务。它允许用户在不需要购买和管理服务器的情况下，快速部署和扩展应用程序。用户在启动应用程序时，只需为其所使用的计算资源付费。Serverless 的一大特点是自动管理基础设施，降低了运维成本和人为错误。它将应用程序分解为多个事件，并根据实际用量计费。这使得开发者可以更专注于编写代码，而不必关注底层基础设施。

腾讯云 Serverless有比较多有优势，如下：

  • 你无需购买一台额外的服务器就可以部署，更不用花费精力来管理服务器
  • 弹性伸缩，这意味着你无需担心巨大的流量来袭，流量大了自动给你扩容，流量小了自动缩容，这都是比较自动而且人心化的。

什么是Next.js，哪些场景用Next.js比较合适

Next.js是一个基于React的前端Web开发框架，用于创建服务器渲染的静态页面和API。它是React生态系统中最流行的框架之一。这也是我选项Next.js框架的重要原因之一，另外一个我相信你已经猜到了，因为腾讯云serverless恰好支持这个框架的部署。当然，评价自己的业务是否适合采用Next.js，咱们需要从一下几个方面来判断一下：

  1. 非纯前端，还需要在服务器端处理更多逻辑的应用，比如我们这种场景，需要设置secretId,和secretKey 的场景，你不可能直接将这些放在前端页面里，这样谁都可以拿着你的密钥去调用服务，扣你的费，同时腾讯云的云api通常还存在跨域，因此你需要一个服务端。
  2. 对于需要在客户端和服务器端之间共享状态的开发者来说，Next.js支持基于Redux的Redux Provider和Next.js API，使得状态管理变得更加容易和高效。
  3. 对于注重SEO的开发者来说，Next.js可以将页面生成静态的HTML文件，从而使应用更容易被搜索引擎索引。

开始动手

一些概念了解清楚，以及选型做好之后，下面就是我们的动手环节了，更具腾讯云如何部署一个next.js的 serverless服务的方法，我们简化下操作流程如下：

代码语言：javascript
复制
npx create-next-app -e <https://github.com/nextui-org/next-app-template>

这里使用模板的方式创建主要是为了使用到 next.js的最佳实践：

  • 使用typescript，静态类型检查，没那么容易写出bug吧，个人觉得，哈哈哈，而且类型绑定，智能提示用得比较爽。
  • 使用了App Router 的方式，这种方式比Page Router的方式来说目录结构更加清晰。
  • 默认集成了Tailwind CSS，这就意味着我们可以话很少的精力就可以做出想到精美的页面效果。
  • 另外就是一堆的默认配置给配置好了，你无需关心更多，直接就可以开始动手写业务了。

这里执行完毕，直接

代码语言：javascript
复制
npm run dev

打开，localhost:3000/ ,你的网站应该就跑起来了。这里不细说，因为操作的确很简单，重要的问题是。我们如何接入一个腾讯云的业务。

  • 首先，我们需要拿到业务的 secretId 和 secretKey ，这个每个腾讯云业务的官方网站都会告诉你如何去拿。操作比较统一，不赘述。
  • 我们需要些一个接口，去封装对具体业务的调用，这块是比较重要的，下面会重点说下几种方式。

在App Router模式下如何开发一个接口

开发一个接口的方式相当简单，只需要在app的目录下新建一个 api目录，然后在目录下新建一个 route.ts文件，在里面编写业务即可，其映射关系如下，我建议使用api目录，这样代码容易维护一些，一看便知这里就是些接口的。

下面是我给的一个代码示例。

代码语言：javascript
复制
export async function POST() {
  //在这里编写你的业务逻辑
  const res = await fetch('<https://cloud.tencent.com/>...', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
    body: JSON.stringify({ ...params}),
  })

const data = await res.json()


return Response.json(data)

}

随后，你的网站就可以使用 localhost:3000/api 的方式来访问这个接口了。

有人可能会问，我如何给这个post方法传参数，以及我这个方法里面如何获取传递的参数，我的appid，secretKey等如何传入？我有多个业务请求，如何路由？对这个就是我下面要说的点。

api接口参数如何传递

参数的获取可以使用下面的方式：

代码语言：javascript
复制
//获取get请求里面的参数

const id = searchParams.get('id')


//获取post请求data里面的参数

const {

secretId,

secretKey,

appId,

proxyOrganizationOpenId,

proxyOperatorOpenId,

payload,

} = await request.json();


//获取header里面设置的

const Action = request.headers.get("X-TC-Action") ?? "UNknown-Action";

这里，我通过header里面来区分是请求那个业务功能的。当然，还有另外一种方式，那就是使用动态api路由，当然我也是建议使用下面这种，因为这个在控制台查看网络请求时，一目了然，就知道那个请求，放在header里面还需要点详细查看。

appId，secretKey 的传递

这是比较私密的信息了，建议的方式是使用环境变量的方式，腾讯的serverless 服务是支持配置环境变量的

然后可以通过process.env.xxx的方式获取变量了。

有没有推荐的适合Next.js 的UI组件库

我仔细对比了一下，发现 https://nextui.org/ 可能比较友好，因为 next.js 是支持服务端渲染的，而Nextui 这套框架恰好是为Next.js量身定做的。

因此，他完完全全支持服务端渲染，不存在什么坑，如果选择其他的UI框架，可能在服务端渲染时候碰到坑。

最后一步，开发完毕的部署

分三个步骤，即可完成部署

  • 在项目根目录下新建 scf_bootstrap 启动文件，写入代码
代码语言：javascript
复制
#!/var/lang/node12/bin/node

const { nextStart } = require('next/dist/cli/next-start');

nextStart([ '--port', '9000', '--hostname', '0.0.0.0' ])
  • 修改文件可执行权限
代码语言：javascript
复制
chmod 777 scf_bootstrap
  • 登录 Serverless 控制台，贴上你的代码的git地址即可导入并启动

运行效果：

这样，对接客户的时候，就可以讲这个Demo分享给用户了，用户甚至可以自己拿到appid，secretkey之后，填入就可以体验这个demo，这对于用户基于咱们的api自建应用或者做第三方应用集成来讲，就好理解多了。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

#2023腾讯·技术创作特训营 第三期#serverless#腾讯电子签 saas 版 ess#腾讯电子签#Serverless HTTP 服务