前端获取oss图片地址_用 Serverless 优雅地实现图片艺术化应用

本文介绍了如何使用腾讯云Serverless构建一个前端React(Next.js)和后端Node(Koa2)的图片艺术化应用。通过对象存储OSS提供图片存储服务,利用Tensorflow 2.x算法模型,实现高性能、高可用的服务。项目已开源,包括SSR服务和解决代码体积限制的方法。
摘要由CSDN通过智能技术生成

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

141adf705d616ce642d6f3da21ad4f0d.png

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

f2b66f74c8f1d6b8d147a67a1da9735f.png

在完整阅读文章后,读者应该能够实现并部署一个相同的应用,这也是本篇文章的目标。

项目看点概览:

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

本项目部署借助了 Serverless component,因此当前开发环境需先全局安装 Serverless 命令行工具

npm install -g serverless

需求与架构

本应用的整体需求很简单:图片上传与展示。

  1. 模块概览
44c9431cbaed87b3dd429c6230bd54f7.png
  1. 上传图片
101dfd11f40d2f4d9ead102b3bbf343c.png
  1. 浏览图片
9c1203c9fcc65666abf4d6c6e8af4974.png

用对象存储提供存储服务

在开发之前,我们先创建一个 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 几秒后,你应该就能看到如下提示,表示新建对象存储成功。

ca3f5a825dc0e291e78ed1f4cd8d0b1f.png

这里,我们看到 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值