怎么做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這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！