本文将会分享,如何从零开始搭建一个基于腾讯云 Serverless 的图片艺术化应用!作者 @蒋启钲

线上 demo 预览:https://art.x96.xyz/ ,项目已开源,完整代码见文末。

在完整阅读文章后,读者应该能够实现并部署一个相同的应用,这也是本篇文章的目标。
项目看点概览:
- 前端 react(Next.js)、后端 node(koa2)
- 全面使用 ts 进行开发,极致开发体验(后端运行时 ts 的方案,虽然性能差点,不过胜在无需编译,适合写 demo)
- 突破云函数代码 500mb 限制(提供解决方案)
- TensorFlow2 + Serverless 扩展想象力边际
- 高性能,轻松应对万级高并发,实现高可用(自信的表情,反正是平台干的活)
- 秒级部署,十秒部署上线
- 开发周期短(本文就能带你完成开发)

本项目部署借助了 Serverless component,因此当前开发环境需先全局安装 Serverless 命令行工具
npm install -g serverless
需求与架构
本应用的整体需求很简单:图片上传与展示。
- 模块概览

- 上传图片

- 浏览图片

用对象存储提供存储服务
在开发之前,我们先创建一个 oss 用于提供图片存储(可以使用你已有的对象存储)
mkdir oss
在新建的 oss 目录下添加 serverless.yml
component: cosname: xart-ossapp: xartstage: devinputs: src: src: ./ exclude: - .env # 防止密钥被上传 bucket: ${name} # 存储桶名称,如若不添加 AppId 后缀,则系统会自动添加,后缀为大写(xart-oss-) website: false targetDir: / protocol: https region: ap-guangzhou # 配置区域,尽量配置在和服务同区域内,速度更快 acl: permissions: public-read # 读写配置为,私有写,共有读
执行 sls deploy 几秒后,你应该就能看到如下提示,表示新建对象存储成功。

这里,我们看到 url https://art-oss-.cos.ap-guangzhou.myqcloud.com,可以发现默认的命名规则是 https://.cos..myqcloud.com
简单记录一下,在后面服务中会用到,忘记了也不要紧,看看 .env 内 TENCENT_APP_ID 字段(部署后会自动生成 .env)
实现后端服务
新建一个目录并初始化
mkdir art-api && cd art-api && npm init
安装依赖(期望获取 ts 类型提示,请自行安装 @types)
npm i koa @koa/router @koa/cors koa-body typescript ts-node cos-nodejs-sdk-v5 axios dotenv
配置 tsconfig.json
{ "compilerOptions": { "target": "es2018", "module": "commonjs", "lib": ["es2018", "esnext.asynciterable"], "experimentalDecorators": true, "emitDecoratorMetadata": true, "esModuleInterop": true }}
入口文件 sls.js
require("ts-node").register({ transpileOnly: true }); // 载入 ts 运行时环境,配置忽略类型错误module.exports = require("./app.ts"); // 直接引入业务逻辑,下面我会和你一起实现
补充两个实用知识点:
node -r
在入口文件中引入 require("ts-node").register({ transpileOnly: true }) 实际等同于 node -r ts-node/register/transpile-o