serverless cn

基于 Serverless CLI 和腾讯云的 Todo List 应用

0 配置: 可以直接使用默认配置完成整个项目的部署
一键部署: 只需要准备必要的前置条件，即可在根目录一条命令完成所有服务部署

前置条件

Node.js >= 12
安装 serverless 命令行工具
注册腾讯云账号并开通权限
开通腾讯云 Redis 数据库

项目架构

此 Todo List 项目采取前后端分离的架构，前端提供页面 Ui 展示和功能操作，后端提供 API 和数据库操作. 项目提供了:

新增 Todo
切换 Todo 状态
修改 Todo 信息
删除 Todo
为 Todo 添加截至日期

根目录serverless.yml定义了app, stage 字段，因为需要确保模版下的组件使用相同的app, stage 字段，用户可自行修改需要的值

VPC 配置结构

vpc 目录下是帮助用户执行创建 db 和 backend 所需要的网络环境, 所创建的vpcId和subnetId提供给db和backend使用，用户可以自行修改，但是如果继续给db, backend 使用的话，必须保证地域配置的正确性, 比如postgresql 仅支持 北京三区，广州二区，上海二区, 那么vpc/serverless.yml 就必须选择这三个地域之一。

数据库结构

db目录下是使用tencent-postgresql 组件来执行对 postgresql 数据库的创建

部署成功之后，可以在腾讯云云数据库中的PostgreSQL 中看到对应实例.

注意事项:

当前 PGSQL for Serverless 仅支持 北京三区，广州二区，上海二区 三个地域的创建和部署:
1. 在填写 backend/serverless.yml 中的地域可用区时需要注意填写为正确的地域
2. backend/serverless.yml 中我们所使用的vpc配置是在vpc目录下生成的结果: ${output:${stage}:${app}:todos-vpc.vpcId}，所以需要确保vpc目录实例下的地域选择为正确的地域
⚠️⚠️ PostgreSQL 组件当前暂不支持 CLI 扫描二维码登录，因此您需要配置全局认证信息或者在根目录.env 文件中填写信息来配置持久的环境变量/秘钥信息, 详情

# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123

后端结构

backend 文件夹中即为后端项目目录:

使用上面配置的的db实例的输出作为数据库的 url 来实现对应todo 数据存储
使用tencent-http + koajs 作为技术选型

注意事项:

backend/serverless.yml中使用了db项目提供的数据库链接: ${output:${stage}:${app}:todos-db.private.connectionString}, 其中todos-db是数据库实例项目的名称，如果db/serverless.yml 中的name 被修改，请记得把这里的参数也相应修改。
backend/serverless.yml 中我们所使用的vpc配置是在vpc目录下生成的结果: ${output:${stage}:${app}:todos-vpc.vpcId}，所以需要确保vpc目录实例下的地域选择为正确的地域

后端项目成功部署后，会在腾讯云 scf 中自动部署一个名为todos-backend的项目，用户可在其中查看日志或者函数配置

前端结构

frontend 文件夹中即为前端项目目录:

使用tencent-website 作为项目框架
使用 React + Ant.design + ky 作为技术选型

frontend/serverless.yml 中使用了backend 项目提供的后端 ApiUrl${output:${stage}:${app}:todos-backend.apigw.url}, 其中todos-backend 是后端项目的名称，如果后端项目的名称被修改，前端yml中此处的值需要对应修改。可以做到无缝部署，不需要分别部署. 前端项目部署之后会将静态资源存在 COS 的todos-frontendbucket 中，可以自行在serverless.yml中修改

本地开发

sls deploy 之后，会在用户的todos-frontend bucket 生成一个 env.js 文件，需要将其下载到frontend/public 文件夹中。之所以在本地开发的时候需要这个文件是因为这个文件会把后端 API 的地址自动注入window.env 中，供前端 API 访问使用，所以本地开发的时候需要手动下载。线上项目会自动获取。
进入frontend文件夹下，执行npm install 安装依赖
执行 npm start 本地运行项目

使用流程

根目录执行 sls deploy, 命令行会自动分别部署db, backend, frontend 项目
打开 todos-frontend 输出的 website 地址即可看到项目前端，进行操作

效果截图

项目命令行部署:
前端 Todo 展示全部数据:
展示已完成数据:
展示未完成数据:
数据编辑:
超过截止日期还未完成的 Todo, 显示红色提醒图标:

[官方示例] Todo List 待办事项应用