腾讯云Next.js 组件 - 通过使用Tencent Serverless Framework , 基于云上 Serverless 服务(如 API 网关、云函数等),实现“0”配置,便捷开发,极速部署采用 Next.js 框架的网页应用,Next.js 组件支持丰富的配置扩展,提供了目前便捷实用,开发成本低的网页应用项目的开发/托管能力。
特性介绍:
- 按需付费 - 按照请求的使用量进行收费,没有请求时无需付费
- "0"配置 - 只需要关心项目代码,之后部署即可,Serverless Framework 会搞定所有配置。
- 极速部署 - 部署速度快,仅需几秒,部署你的整个应用。
- 实时日志 - 通过实时日志的输出查看业务状态,便于直接在云端开发应用。
- 云端调试 - 可在云端直接进行项目调试,从而避免本地环境的差异。
- 便捷协作 - 通过云端控制台的状态信息和部署日志,方便进行多人协作开发。
更多资源:
通过 npm 全局安装 serverless cli
$ npm install -g serverless
通过如下命令和模板链接,快速创建一个 Next.js 应用:
$ serverless init nextjs-starter --name example
$ cd example
在 serverless.yml
文件所在的项目根目录,运行以下指令,将会弹出二维码,直接扫码授权进行部署:
serverless deploy
说明:如果鉴权失败,请参考 权限配置 进行授权。
nextjs 组件支持 0 配置部署,也就是可以直接通过配置文件中的默认值进行部署。但你依然可以修改更多可选配置来进一步开发该 nextjs 项目。
以下是 nextjs 组件的 serverless.yml
配置示例:
# serverless.yml
component: nextjs # (必填) 组件名称,此处为nextjs
name: nextjsDemo # (必填) 实例名称
org: orgDemo # (可选) 用于记录组织信息,默认值为您的腾讯云账户 appid
app: appDemo # (可选) 该 next.js 应用名称
stage: dev # (可选) 用于区分环境信息,默认值是 dev
inputs:
src:
src: ./
exclude:
- .env
functionName: nextjsDemo
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
protocols:
- http
- https
environment: release
- 点此查看更多配置及说明
部署了 Next.js 应用后,可以通过开发调试能力对该项目进行二次开发,从而开发一个生产应用。在本地修改和更新代码后,不需要每次都运行 serverless deploy
命令来反复部署。你可以直接通过 serverless dev
命令对本地代码的改动进行检测和自动上传。
可以通过在 serverless.yml
文件所在的目录下运行 serverless dev
命令开启开发调试能力。
serverless dev
同时支持实时输出云端日志,每次部署完毕后,对项目进行访问,即可在命令行中实时输出调用日志,便于查看业务情况和排障。
在serverless.yml
文件所在的目录下,通过如下命令查看部署状态:
$ serverless info
在serverless.yml
文件所在的目录下,通过以下命令移除部署通过以下命令移除部署的 API 网关,移除后该组件会对应删除云上部署时所创建的所有相关资源。
$ serverless remove
和部署类似,支持通过 serverless remove --debug
命令查看移除过程中的实时日志信息。
当前默认支持 CLI 扫描二维码登录,如您希望配置持久的环境变量/秘钥信息,也可以本地创建 .env
文件
$ touch .env # 腾讯云的配置信息
在 .env
文件中配置腾讯云的 SecretId 和 SecretKey 信息并保存
如果没有腾讯云账号,可以在此 注册新账号。
如果已有腾讯云账号,可以在 API 密钥管理 中获取 SecretId
和SecretKey
.
# .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123
注意:海外 ip 登录时,需要在
.env
文件中添加SERVERLESS_PLATFORM_VENDOR=tencent
,使 serverless 默认使用 tencent 组件
Next.js 组件将在腾讯云账户中使用到如下 Serverless 服务:
- API 网关 - API 网关将会接收外部请求并且转发到 SCF 云函数中。
- SCF 云函数 - 云函数将承载 Next.js 应用。
- CAM 访问控制 - 该组件会创建默认 CAM 角色用于授权访问关联资源。
- COS 对象存储 - 为确保上传速度和质量,云函数压缩并上传代码时,会默认将代码包存储在特定命名的 COS 桶中
- SSL 证书服务 - 如果你在 yaml 文件中配置了
apigatewayConf.customDomains
字段,需要做自定义域名绑定并开启 HTTPS 时,也会用到证书管理服务和域名服务。Serverless Framework 会根据已经备案的域名自动申请并配置 SSL 证书。
可以在 Serverless Components 仓库中查询更多组件的信息。
如果项目使用了自定义 Node.js 服务,比如 express 或者 koa,你需要做如下改造工作。
如果你的 Next.js 项目本身运行就是基于 express
自定义服务的,那么你需要在项目中自定义入口文件 sls.js
,需要参考你的服务启动文件进行修改,以下是一个模板文件:
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 作为 Node.js 服务,需要在项目中自定义入口文件 sls.js
,需要参考你的服务启动文件进行修改,以下是一个模板文件:
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
和 /favicon.ico
的路由。如果你想自定义上报自己的路由性能,那么可以自定义 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
路由时,就不会上报自定义监控指标。
MIT License
Copyright (c) 2020 Tencent Cloud, Inc.