怎么做ServerlessSSR

这篇文章主要讲解了“怎么做Serverless SSR”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么做Serverless SSR”吧!

创新互联主营马龙网站建设的网络公司,主营网站建设方案,重庆APP开发,马龙h5小程序开发搭建,马龙网站营销推广欢迎马龙等地区企业咨询

做一个 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

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

怎么做Serverless SSR

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

怎么做Serverless SSR

查看和管理你的 SSR 项目

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

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

怎么做Serverless SSR

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

怎么做Serverless SSR

感谢各位的阅读,以上就是“怎么做Serverless SSR”的内容了,经过本文的学习后,相信大家对怎么做Serverless SSR这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


名称栏目:怎么做ServerlessSSR
分享地址:http://ybzwz.com/article/gojcoe.html