怎么做Serverless SSR

这篇文章主要讲解了“怎么做Serverless SSR”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么做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 SSR”的内容了，经过本文的学习后，相信大家对怎么做Serverless SSR这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！