上一篇 前端福音：Serverless 和 SSR 的天作之合，詳細(xì)的介紹了 SSR 相關(guān)知識(shí)，同時(shí)也提到了 Serverless 給 SSR 方案帶來(lái)的福利。但它只是將 Next.js 應(yīng)用部署到 Serverless 服務(wù)上而已，并不適合實(shí)際生產(chǎn)業(yè)務(wù)。為此本篇專門(mén)針對(duì) Next.js 的 SSR 方案進(jìn)行了探索和優(yōu)化，一步一步帶大家了解，如何基于 Serverless 架構(gòu)部署一個(gè)實(shí)際的線上業(yè)務(wù)。
搶先體驗(yàn)：serverless-cnode
本文主要內(nèi)容：
- 如何快速部署 Serverless Next.js
- 如何自定義 API 網(wǎng)關(guān)域名
- 如何通過(guò) COS 托管靜態(tài)資源
- 靜態(tài)資源配置 CDN
- 基于 Layer 部署 node_modules
如何快速部署 Serverless Next.js
由于本人對(duì) Serverless Framework 開(kāi)發(fā)工具比較熟悉，并且長(zhǎng)期參與相關(guān)開(kāi)源工作，所以本文均使用 Serverless Components 方案進(jìn)行部署，請(qǐng)?jiān)陂_(kāi)始閱讀本文之前，保證當(dāng)前開(kāi)發(fā)環(huán)境已經(jīng)全局安裝 serverless 命令行工具。
本文依然上一篇中介紹的 Next.js 組件 來(lái)幫助快速部署 Next.js 應(yīng)用到騰訊云的 Serverless 服務(wù)上。
我們先快速初始化一個(gè) Serverless Next.js 項(xiàng)目：
$ serverless create -u https://github.com/serverless-components/tencent-nextjs/tree/master/example -p serverless-nextjs
$ cd serverless-nextjs
該項(xiàng)目模板已經(jīng)默認(rèn)配置好 serverless.yml，可以直接執(zhí)行部署命令：
$ serverless deploy
大概 30s 左右就可以部署成功了，之后訪問(wèn)生成的 apigw.url 鏈接 https://service-xxx-xxx.gz.apigw.tencentcs.com/release/ 就可以看到首頁(yè)了。
Next.js 組件，會(huì)默認(rèn)幫助我們創(chuàng)建一個(gè) 云函數(shù) 和 API 網(wǎng)關(guān)，并且將它們關(guān)聯(lián)，實(shí)際我們?cè)L問(wèn)的 是 API 網(wǎng)關(guān)，然后觸發(fā)云函數(shù)，來(lái)獲得請(qǐng)求返回結(jié)果，流程圖如下：
解釋：我們?cè)趫?zhí)行部署命令時(shí)，由于一個(gè)簡(jiǎn)單的 Next.js 應(yīng)用除了業(yè)務(wù)代碼，還包括龐大的
node_modules文件夾，這就導(dǎo)致打包壓縮的代碼體積大概20M左右，所以大部分時(shí)間消耗在代碼上傳上。這里的速度也跟開(kāi)發(fā)環(huán)境的網(wǎng)絡(luò)環(huán)境有關(guān)，而實(shí)際上我們?cè)贫瞬渴鹗呛芸斓模@也是為什么需要30s左右的部署時(shí)間，而且網(wǎng)絡(luò)差時(shí)會(huì)更久，當(dāng)然后面也會(huì)提到如何提高部署速度。
相信你已經(jīng)體會(huì)到，借助 Serverless Components 解決方案的便利，它確實(shí)可以幫助我們的應(yīng)用高效的部署到云端。而且這里使用的 Next.js 組件，針對(duì)代碼上傳也做了很多優(yōu)化工作，來(lái)保證快速的部署效率。
接下來(lái)將介紹如何基于 Next.js 組件，進(jìn)一步優(yōu)化我們的部署體驗(yàn)。
如何自定義 API 網(wǎng)關(guān)域名
使用過(guò) API 網(wǎng)關(guān)的小伙伴，應(yīng)該都知道它可以配置自定義域名，如下圖所示：
但是這個(gè)手動(dòng)配置還是不夠方便，為此 Next.js 組件也提供了 customDomains 來(lái)幫助開(kāi)發(fā)者快速配置自定義域名，于是我們可以在項(xiàng)目的 serverless.yml 中新增如下配置：
org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo
inputs:
src:
dist: ./
hook: npm run build
exclude:
- .env
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
protocols:
- https
environment: release
enableCORS: true
# 自定義域名相關(guān)配置
customDomains:
- domain: test.yuga.chat
certificateId: abcdefg # 證書(shū) ID
# 這里將 API 網(wǎng)關(guān)的 release 環(huán)境映射到根路徑
pathMappingSet:
- path: /
environment: release
protocols:
- https
由于這里使用的是 https 協(xié)議，所以需要配置托管在騰訊云服務(wù)的證書(shū) ID，可以到 SSL 證書(shū)控制臺(tái) 查看。騰訊云已經(jīng)提供了申請(qǐng)免費(fèi)證書(shū)的功能，當(dāng)然你也可以上傳自己的證書(shū)進(jìn)行托管。
之后我們?cè)俅螆?zhí)行部署命令，會(huì)得到如下輸出結(jié)果：
這里由于自定義域名時(shí)通過(guò) CNAME 映射到 API 網(wǎng)關(guān)服務(wù)，所以還需要手動(dòng)添加輸出結(jié)果中紅框部分的 CNAME 解析記錄。等待自定義域名解析成功，就可以正常訪問(wèn)了。
如何通過(guò) COS 托管靜態(tài)資源
Next.js 應(yīng)用，有兩種靜態(tài)資源：
- 項(xiàng)目中通過(guò)資源引入的方式使用，這種會(huì)經(jīng)過(guò)
Webpack打包處理輸出到.next/static目錄，比如.next/static/css樣式文件目錄。 - 直接放到項(xiàng)目根目錄的
public文件夾，通過(guò)靜態(tài)文件服務(wù)返回，然后項(xiàng)目中可以直接通過(guò) url 的方式引入（官方介紹）。
第一種的資源很好處理，Next.js 框架直接支持在 next.config.js 中配置 assetPrefix 來(lái)幫助我們?cè)跇?gòu)建項(xiàng)目時(shí)，將提供靜態(tài)資源托管服務(wù)的訪問(wèn) url 添加到靜態(tài)資源引入前綴中。如下：
// next.config.js
const isProd = process.env.NODE_ENV === "production";
const STATIC_URL =
"https://serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com";
module.exports = {
assetPrefix: isProd ? STATIC_URL : "",
};
上面配置中的 STATIC_URL 就是靜態(tài)資源托管服務(wù)提供的訪問(wèn) url，示例中是騰訊云對(duì)應(yīng)的 COS 訪問(wèn) url。
那么針對(duì)第二種資源我們?nèi)绾翁幚砟兀窟@里就需要對(duì)業(yè)務(wù)代碼進(jìn)行稍微改造了。
首先，需要在 next.config.js 中添加 env.STATIC_URL 環(huán)境變量:
const isProd = process.env.NODE_ENV === "production";
const STATIC_URL =
"https://serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com";
module.exports = {
env: {
// 3000 為本地開(kāi)發(fā)時(shí)的端口，這里是為了本地開(kāi)發(fā)時(shí)，也可以正常運(yùn)行
STATIC_URL: isProd ? STATIC_URL : "http://localhost:3000",
},
assetPrefix: isProd ? STATIC_URL : "",
};
然后，在項(xiàng)目中修改引入 public 中靜態(tài)資源的路徑，比如：
<!-- before -->
<head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</head>
<!-- after -->
<head>
<title>Create Next App</title>
<link rel="icon" href={`${process.env.STATIC_URL}/favicon.ico`} />
</head>
最后，在 serverless.yml 中新增靜態(tài)資源相關(guān)配置 staticConf，如下：
org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo
inputs:
src:
dist: ./
hook: npm run build
exclude:
- .env
region: ap-guangzhou
runtime: Nodejs10.15
apigatewayConf:
# 此處省略....
# 靜態(tài)資源相關(guān)配置
staticConf:
cosConf:
# 這里是創(chuàng)建的 COS 桶名稱
bucket: serverless-nextjs
通過(guò)配置 staticConf.cosConf 指定 COS 桶，執(zhí)行部署時(shí)，會(huì)默認(rèn)自動(dòng)將編譯生成的 .next 和 public 文件夾靜態(tài)資源上傳到指定的 COS。
修改好配置后，再次執(zhí)行 serverless deploy 進(jìn)行部署：
$ serverless deploy
serverless ?framework
Action: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nextjsDemo"
region: ap-guangzhou
# 此處省略......
staticConf:
cos:
region: ap-guangzhou
cosOrigin: serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com
bucket: serverless-nextjs-xxx
瀏覽器訪問(wèn)，打開(kāi)調(diào)試控制臺(tái)，可以看到訪問(wèn)的靜態(tài)資源請(qǐng)求路徑如下：
上圖可以看出，靜態(tài)資源均通過(guò)訪問(wèn) COS 獲取，現(xiàn)在云函數(shù)只需要渲染入口文件，而不需要像之前，靜態(tài)資源全部通過(guò)云函數(shù)返回。
備注：之前由于都是將 .next 部署到了云函數(shù)，所以沒(méi)法訪問(wèn)頁(yè)面后，頁(yè)面中的靜態(tài)資源，如圖片，都需要再次訪問(wèn)云函數(shù)，然后獲取。于是看似我們請(qǐng)求了一次云函數(shù)，而實(shí)際上云函數(shù)單位時(shí)間并發(fā)數(shù)，會(huì)根據(jù)頁(yè)面靜態(tài)資源請(qǐng)求數(shù)而增加，從而造成冷啟動(dòng)問(wèn)題。
靜態(tài)資源配置 CDN
上面我們已經(jīng)將靜態(tài)資源都部署到 COS 了，頁(yè)面訪問(wèn)也快了很多。但是對(duì)于生產(chǎn)環(huán)境，還需要給靜態(tài)資源配置 CDN 的。通過(guò) COS 控制臺(tái)已經(jīng)可以很方便的配置 CDN 加速域名了。但是還是需要手動(dòng)去配置，作為一名懶惰的程序員，我還是不能接受的。 而 Next.js 組件正好提供了給靜態(tài)資源配置 CDN 的能力，只需要在 serverless.yml 中新增 staticConf.cdnConf 配置即可，如下所示：
# 此處省略....
inputs:
# 此處省略....
# 靜態(tài)資源相關(guān)配置
staticConf:
cosConf:
# 這里是創(chuàng)建的 COS 桶名稱
bucket: serverless-nextjs
cdnConf:
domain: static.test.yuga.chat
https:
certId: abcdefg
這里使用 https 協(xié)議，所以也添加了 https 的 certId 證書(shū) ID 配置。此外靜態(tài)資源域名也需要修改為 CDN 域名，修改 next.config.js 如下：
const isProd = process.env.NODE_ENV === "production";
const STATIC_URL = "https://static.test.yuga.chat";
module.exports = {
env: {
STATIC_URL: isProd ? STATIC_URL : "http://localhost:3000",
},
assetPrefix: isProd ? STATIC_URL : "",
};
配置好后，再次執(zhí)行部署，結(jié)果如下：
$ serverless deploy
serverless ?framework
Action: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nextjsDemo"
region: ap-guangzhou
apigw:
# 省略...
scf:
# 省略...
staticConf:
cos:
region: ap-guangzhou
cosOrigin: serverless-nextjs-xxx.cos.ap-guangzhou.myqcloud.com
bucket: serverless-nextjs-xxx
cdn:
domain: static.test.yuga.chat
url: https://static.test.yuga.chat
注意：這里雖然添加了 CDN 域名，但是還是需要手動(dòng)配置 CNAME
static.test.yuga.chat.cdn.dnsv1.com解析記錄。
優(yōu)化前后對(duì)比
到這里，Serverless Next.js 應(yīng)用體驗(yàn)已經(jīng)優(yōu)化了很多，我們可以使用 Lighthouse 進(jìn)行性能測(cè)試，來(lái)驗(yàn)證下我們的收獲。測(cè)試結(jié)果如下：
優(yōu)化前：
優(yōu)化后：
前后對(duì)比，可以明顯看出優(yōu)化效果，當(dāng)然這里主要是針對(duì)靜態(tài)資源進(jìn)行了優(yōu)化處理，減少了冷啟動(dòng)。為了更好地游湖體驗(yàn)，我們還可以做的更多，這里就不展開(kāi)討論了。
基于 Layer 部署 node_modules
隨著我們的業(yè)務(wù)變得復(fù)雜，項(xiàng)目體積會(huì)越來(lái)越大，node_modules 文件夾也會(huì)變得原來(lái)越大，而現(xiàn)在每次部署都需要將 node_modules 打包壓縮，然后上傳，跟業(yè)務(wù)代碼一起部署到云函數(shù)。在實(shí)際開(kāi)發(fā)中， node_modules 大部分時(shí)候是不怎么變化的，但是當(dāng)前每次都需要上傳，這必然會(huì)浪費(fèi)很多部署時(shí)間，尤其在網(wǎng)絡(luò)狀態(tài)不好的情況下，代碼上傳就更慢了。
既然 node_modules 文件夾是不怎么變更的，那么我們能不能只有在它變化時(shí)才上傳更新呢？
借助 Layer 的能力是可以實(shí)現(xiàn)的。
在這之前，先簡(jiǎn)單介紹下 Layer:
借助 Layer，可以將項(xiàng)目依賴放在 Layer 中而無(wú)需部署到云函數(shù)代碼中。函數(shù)在執(zhí)行前，會(huì)先加載 Layer 中的文件到
/opt目錄下（云函數(shù)代碼會(huì)掛載到/var/user/目錄下），同時(shí)會(huì)將/opt和/opt/node_modules添加到NODE_PATH中，這樣即使云函數(shù)中沒(méi)有node_modules文件夾，也可以通過(guò)require('abc')方式引入使用該模塊。
正好 Layer 組件 可以幫助我們自動(dòng)創(chuàng)建 Layer。
使用時(shí)只需要在項(xiàng)目下添加 layer 文件夾，并且創(chuàng)建 layer/serverless.yml 配置如下：
org: orgDemo
app: appDemo
stage: dev
component: layer
name: nextjsDemo-layer
inputs:
region: ap-guangzhou
name: ${name}
src: ../node_modules
runtimes:
- Nodejs10.15
- Nodejs12.16
配置說(shuō)明:
region：地區(qū)，需要跟云函數(shù)保持一致
name：Layer 名稱，在云函數(shù)綁定指定 Layer 時(shí)需要指定
src：指定需要上傳部署到 Layer 的目錄
runtimes：支持的云函數(shù)運(yùn)行環(huán)境
執(zhí)行部署 Layer 命令:
$ serverless deploy --target=./layer
serverless ?framework
Action: "deploy" - Stage: "dev" - App: "appDemo" - Instance: "nextjsDemo-layer"
region: ap-guangzhou
name: nextjsDemo-layer
bucket: sls-layer-ap-guangzhou-code
object: nextjsDemo-layer-1594356915.zip
description: Layer created by serverless component
runtimes:
- Nodejs10.15
- Nodejs12.16
version: 1
從輸出可以清晰看到 Layer 組件已經(jīng)幫助我們自動(dòng)創(chuàng)建了一個(gè)名稱為 nextjsDemo-layer，版本為 1 的 Layer。
接下來(lái)我們?nèi)绾巫詣?dòng)和我們的 Next.js 云函數(shù)綁定呢？
參考 serverless components outputs 說(shuō)明文檔 ，可以通過(guò)引用一個(gè)基于 Serverless Components 部署成功的實(shí)例的 outputs (這里就是控制臺(tái)輸出對(duì)象內(nèi)容)，語(yǔ)法如下：
# Syntax
${output:[stage]:[app]:[instance].[output]}
那么我們只需要在項(xiàng)目根目錄的 serverless.yml 文件中，添加 layers 配置就可以了：
org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo
inputs:
src:
dist: ./
hook: npm run build
exclude:
- .env
- "node_modules/**"
region: ap-guangzhou
runtime: Nodejs10.15
layers:
- name: ${output:${stage}:${app}:${name}-layer.name}
version: ${output:${stage}:${app}:${name}-layer.version}
# 靜態(tài)資源相關(guān)配置
# 此處省略....
注意：不同組件部署實(shí)例結(jié)果的依賴使用，需要保證 serverless.yml 中
org,app,stage三個(gè)配置是一致的。
由于 node_modules 已經(jīng)通過(guò) Layer 部署，所以還需要在 src.exclude 中添加忽略部署該文件夾。
之后再次執(zhí)行部署命令 serverless deploy 即可， 你會(huì)發(fā)現(xiàn)這次部署時(shí)間大大縮減了，因?yàn)槲覀儾辉谛枰看螇嚎s上傳 node_moduels 這個(gè)龐大的文件夾了 (▽)
最后
基于以上方案，我部署了一個(gè)完整的 Cnode 項(xiàng)目，serverless-cnode，歡迎感興趣的小伙伴，提交寶貴的 ISSUE/PR。
關(guān)于 Serverless SSR 的方案，我也在不斷嘗試和探索中，如果你有更好的方案和建議，歡迎評(píng)論或者私信來(lái)撩~
