做一个 Serverless SSR 需要几步？

很久之前，看到过一个段子：“把大象塞进冰箱需要几步？” 回答是：“三步，第一步打开冰箱，第二步把大象塞进去，第三步关上冰箱”。这是一个无厘头式的幽默，用极简平淡的回答，来解释看似夸张的问题。

做一个 Serverless SSR 虽然不是把大象装进冰箱这样的问题，但是同样让很多开发者望而生畏 —— 因为网上关于 SSR 和 Serverless 的教程太多，动辄很大篇幅，很多步骤。让初学者无从下手，就算照着学一遍，也可能会遇到这样那样的问题，很费功夫。

但是现在，开发者可以有一种 “冰箱装大象” 的方式来完成一个 Serverless SSR：

1. 你需要有一个 SSR 框架 ：Next.js
2. 你需要有一个 Serverless 框架 ：Serverless Framework

然后，只要将你的 SSR 框架一步装入 Serverless Framework ！

跟着我一起做吧，几分钟完成一个 Serverless SSR 的模式：

首先，你需要有一个 SSR 框架，下面我们创建并初始化一个 Next.js 项目。

我们在本地创建一个 Next.js 项目并初始化：

$ mkdir serverless-next && cd serverless-next
$ npm init next-app src

然后，你需要有一个 Serverless 框架，下面的代码将通过 npm 全局安装 serverless cli

$ npm install -g serverless

在项目根目录创建 serverless.yml 文件：

$ touch serverless.yml 

在其中进行如下配置：

component: nextjs # (必填) 组件名称，此处为 nextjs
name: nextjsDemo # (必填) 实例名称
org: orgDemo # (可选) 用于记录组织信息，默认值为您的腾讯云账户 appid
app: appDemo # (可选) 该 next.js 应用名称
stage: dev # (可选) 用于区分环境信息，默认值是 dev

inputs:
  src: ./src
  functionName: nextjsDemo
  region: ap-guangzhou
  runtime: Nodejs10.15
  exclude:
    - .env
  apigatewayConf:
    protocols:
      - http
      - https
    environment: release

更多配置说明：https://github.com/serverless-components/tencent-nextjs/blob/v2/docs/configure.md

最后，将你的 SSR 框架装入 Serverless 框架，并部署

$ npm run build

在 serverless.yml 文件下的目录中运行以下指令进行部署：

$ sls deploy

执行部署完成后，扫描二维码授权登录腾讯云

部署成功后，命令行会输出 Next.js 的部署地址（见红框）。将其复制到浏览器中打开，我们会看到 Next.js 的欢迎页面。到这里，你就成功部署了 Serverless SSR ！

查看和管理你的 SSR 项目

刚才的步骤，我们完成了 Next.js 框架的 Serverless 方式部署。那么，如何查看和管理刚才部署的 Next.js 项目呢？

腾讯云 Serverless 提供了一站式的 Dashboard，可以方便地对项目进行可视化的管理和后续操作。访问地址：https://serverless.cloud.tencent.com

可以看到，我们刚才部署的 Next.js 项目，已经出现在 Dashboard 中了。点击该项目，即可查看到该项目的详细信息，并进行后续的操作。

以上，就是使用 Serverless Framework 轻松部署 SSR 框架 Next.js 的全部过程。不仅是 Next.js ，包括 Express 、Koa 、Egg 、Nuxt 等 Node 框架，都可以用同样的方法轻松完成部署。

One More Thing

3 秒极速部署，立即体验史上最快的 Serverless HTTP 实战开发！

欢迎访问：Serverless 中文网