通过 Serverless Framework Next.js 组件,可以快速实现 Next.js 传统应用从本地到 Serverless 函数平台的迁移。
-
已经 安装 Serverless Framework 1.67.2 以上版本。
-
如果您的账户为腾讯云子账号,请首先联系主账号,参考 账号和权限配置 进行授权。
Next.js 组件将在腾讯云账号中使用到如下 Serverless 服务:
- API 网关:API 网关将会接收外部请求并且转发到 SCF 云函数中。
- SCF 云函数:云函数将承载 Next.js 应用。
- CAM 访问控制:该组件会创建默认 CAM 角色用于授权访问关联资源。
- COS 对象存储:为确保上传速度和质量,云函数压缩并上传代码时,会默认将代码包存储在特定命名的 COS 桶中
以下步骤主要针对命令行部署操作,控制台部署请参考控制台部署指南。
如果您本地并没有 Next.js 项目,可通过以下指令快速新建一个 Next.js 项目模版(本地已有项目可跳过该步骤)
serverless init nextjs-starter --name example
cd example
如果项目使用了自定义 Node.js 服务,比如 express 或者 koa 框架,你需要对入口文件 sls.js(或 app.js)做出改造,导出对应框架 app(未使用可跳过该步骤), 点此查看改造模版。
npm run build
完成代码修改后,通过执行 sls deploy
指令,Serverless Framework 会自动帮您生成基本的 serverless.yml
文件,并完成部署,实现 Next.js 框架应用的快速迁移。
生成的默认配置文件如下:
component: nextjs
name: nextjsDemo
app: appDemo
inputs:
src: ./
exclude:
- .env
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
protocols:
- http
- https
environment: release
部署完成后,通过访问输出的 API 网关链接,完成对应用的访问。
在serverless.yml
文件所在的目录下,通过如下命令查看部署状态:
$ serverless info
- Express 模版
const express = require('express')
const next = require('next')
// not report route for custom monitor
const noReportRoutes = ['/_next', '/static', '/favicon.ico']
async function createServer() {
const app = next({ dev: false })
const handle = app.getRequestHandler()
await app.prepare()
const server = express()
server.all('*', (req, res) => {
noReportRoutes.forEach((route) => {
if (req.path.indexOf(route) !== -1) {
req.__SLS_NO_REPORT__ = true
}
})
return handle(req, res)
})
// define binary type for response
// if includes, will return base64 encoded, very useful for images
server.binaryTypes = ['*/*']
return server
}
module.exports = createServer
- Koa 模版
const Koa = require('koa')
const next = require('next')
async function createServer() {
const app = next({ dev: false })
const handle = app.getRequestHandler()
const server = new Koa()
server.use((ctx) => {
ctx.status = 200
ctx.respond = false
ctx.req.ctx = ctx
return handle(ctx.req, ctx.res)
})
// define binary type for response
// if includes, will return base64 encoded, very useful for images
server.binaryTypes = ['*/*']
return server
}
module.exports = createServer
当您在部署 Next.js 应用时,如果 serverless.yml
中未指定 role
,默认会尝试绑定 QCS_SCFExcuteRole
,并且开启自定义监控,帮助您收集应用监控指标。对于为自定义入口文件的项目,会默认上报除含有 /_next
和 /static
的路由。
如果您想自定义上报自己的路由性能,可以自定义 sls.js
入口文件。
对于无需上报的路由,在 express 服务的 req
对象上添加 __SLS_NO_REPORT__
属性值为 true
即可。例如:
server.get('/no-report', (req, res) => {
req.__SLS_NO_REPORT__ = true
return handle(req, res)
})
配置后,用户在访问 GET /no-report
路由时,就不会上报自定义监控指标。