⚠️⚠️⚠️ 所有框架组件项目迁移到 tencent-framework-components.

 

腾讯云 Next.js Serverless Component

简介

腾讯云Next.js 组件 - 通过使用Tencent Serverless Framework , 基于云上 Serverless 服务（如 API 网关、云函数等），实现“0”配置，便捷开发，极速部署采用 Next.js 框架的网页应用，Next.js 组件支持丰富的配置扩展，提供了目前便捷实用，开发成本低的网页应用项目的开发/托管能力。

特性介绍：

• 按需付费 - 按照请求的使用量进行收费，没有请求时无需付费
• "0"配置 - 只需要关心项目代码，之后部署即可，Serverless Framework 会搞定所有配置。
• 极速部署 - 部署速度快，仅需几秒，部署你的整个应用。
• 实时日志 - 通过实时日志的输出查看业务状态，便于直接在云端开发应用。
• 云端调试 - 可在云端直接进行项目调试，从而避免本地环境的差异。
• 便捷协作 - 通过云端控制台的状态信息和部署日志，方便进行多人协作开发。

快速开始

0. 准备
1. 安装
2. 配置
3. 部署
4. 开发调试
5. 查看状态
6. 移除

更多资源：

• 账号配置
• 架构说明
• 更多组件
• FAQ

1. 安装

通过 npm 全局安装 serverless cli

$ npm install -g serverless

2. 创建

通过如下命令和模板链接，快速创建一个 Next.js 应用：

$ serverless init nextjs-starter --name example
$ cd example

3. 部署

在 serverless.yml 文件所在的项目根目录，运行以下指令，将会弹出二维码，直接扫码授权进行部署：

serverless deploy

说明：如果鉴权失败，请参考 权限配置 进行授权。

4. 配置

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

• 点此查看更多配置及说明

5. 开发调试

部署了 Next.js 应用后，可以通过开发调试能力对该项目进行二次开发，从而开发一个生产应用。在本地修改和更新代码后，不需要每次都运行 serverless deploy 命令来反复部署。你可以直接通过 serverless dev 命令对本地代码的改动进行检测和自动上传。

可以通过在 serverless.yml文件所在的目录下运行 serverless dev 命令开启开发调试能力。

serverless dev 同时支持实时输出云端日志，每次部署完毕后，对项目进行访问，即可在命令行中实时输出调用日志，便于查看业务情况和排障。

6. 查看部署状态

在serverless.yml文件所在的目录下，通过如下命令查看部署状态：

$ serverless info

6. 移除

在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，你需要做如下改造工作。

自定义 express 服务

如果你的 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 服务

如果你的项目使用的是 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 路由时，就不会上报自定义监控指标。

文件上传

文件上传教程

License

MIT License

Copyright (c) 2020 Tencent Cloud, Inc.