{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-05-12-serverless-ssr","result":{"data":{"currentBlog":{"id":"eaf3e43d-1330-530e-b49a-5ad8f82e54a0","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020518/1589792300410-nextjs%E5%89%AF%E6%9C%AC.png","authors":["Jens"],"categories":["best-practice"],"date":"2020-05-12T00:00:00.000Z","title":"诚心求问：做一个 Serverless SSR 需要几步？","description":"Serverless Framework 支持 Next.js SSR 框架实践","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","Serverless SSR"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":null},"wordCount":{"words":160,"sentences":27,"paragraphs":27},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-12-serverless-ssr.md","fields":{"slug":"/best-practice/2020-05-12-serverless-ssr/","keywords":["next.js","nextjs","serverless","Serverless","serverless","Next","部署","框架"]},"html":"

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

\n

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

\n

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

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

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

\n

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

\n

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

\n

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

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

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

\n
$ npm install -g serverless
\n

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

\n
$ touch serverless.yml
\n

在其中进行如下配置：

\n
component: nextjs # (必填) 组件名称，此处为nextjs\nname: nextjsDemo # (必填) 实例名称\norg: orgDemo # (可选) 用于记录组织信息，默认值为您的腾讯云账户 appid\napp: appDemo # (可选) 该 next.js 应用名称\nstage: dev # (可选) 用于区分环境信息，默认值是 dev\n\ninputs:\n  src: ./src\n  functionName: nextjsDemo\n  region: ap-guangzhou\n  runtime: Nodejs10.15\n  exclude:\n    - .env\n  apigatewayConf:\n    protocols:\n      - http\n      - https\n    environment: release
\n
\n

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

\n
\n

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

\n
$ npm run build
\n

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

\n
$ sls deploy
\n

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

\n

\n

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

\n

\n

查看和管理你的 SSR 项目

\n

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

\n

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

\n

\n

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

\n

\n

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

\n
\n
\n
\n
\n

传送门：

\n\n
\n

欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！

","tableOfContents":""},"previousBlog":{"id":"d29f5064-9edb-5acf-8649-8495ed7b43fd","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020518/1589791033503-db%E5%89%AF%E6%9C%AC.jpg","authors":["Tina"],"categories":["best-practice"],"date":"2020-05-13T00:00:00.000Z","title":"Serverless Dashboard 设计解读与实战","description":"基于用户需求推出了可视化的运维界，应用部署后可直观地进行应用监控、告警、日志排障等操作","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","Dashboard"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":null},"wordCount":{"words":292,"sentences":47,"paragraphs":47},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-13-dashboard.md","fields":{"slug":"/best-practice/2020-05-13-dashboard/","keywords":["serverless","云函数","Serverless","部署","应用","监控","Express","云端","Component","serverlesscloud","serverless"]}},"nextBlog":{"id":"38503518-dfcb-58ff-8b5a-f545d5459e6b","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020518/1589791111276-node12%E5%89%AF%E6%9C%AC.jpg","authors":["Wes"],"categories":["guides-and-tutorials"],"date":"2020-05-12T00:00:00.000Z","title":"云函数 SCF Node.js Runtime 最佳实践","description":"如何使用腾讯云云函数来开发 Node.js 应用以及云函数的 Node.js runtime 实现原理","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Node.js","云函数"],"keywords":"Serverless,scf,Node.js","outdated":null},"wordCount":{"words":313,"sentences":54,"paragraphs":54},"fileAbsolutePath":"/opt/build/repo/content/blog/2020-05-12-nodejs-runtime.md","fields":{"slug":"/blog/2020-05-12-nodejs-runtime/","keywords":["java","serverless","spa","云函数","函数","异步","callback","返回","Node","event","context"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"eaf3e43d-1330-530e-b49a-5ad8f82e54a0","previousBlogId":"d29f5064-9edb-5acf-8649-8495ed7b43fd","nextBlogId":"38503518-dfcb-58ff-8b5a-f545d5459e6b"}}}