【玩轉騰訊雲】讓NuxtSSR在雲函數中飛起來

我們以往部署Nuxt到伺服器需要pm2進行程序管理，還需要考慮到伺服器的性能，負載均衡、網絡安全等一系列運維問題。往往我們做的卻不是最優的，那麼為什麼我們不将它交給專業運維的人去配置呢？

我們隻去關心應用層面的業務邏輯，去關心使用者的互動體驗，這才是我們該做的事~

是以，雲開發它來了！！它可以很完美的幫我們解決以上的問題，提升我們的開發效率，将所有精力放在業務邏輯以及使用者的互動上。

那如何在雲開發中讓我的Nuxt的SSR跑起來呢往下看👇

開發需求

node.js環境

我們需要用到npm以及雲函數是基于node.js -v8.9 是以node.js必不可少~

create-nuxt-app

用到

create-nuxt-app

來建立一個nuxt項目

安裝:

npm i create-nuxt-app -g

@cloudbase/cli

用來進行快速、友善的部署項目，管理雲開發資源。

安裝：

npm i @cloudbase/cli -g

建構雲開發項目

首先進行登入授權

tcb login

，在彈出的視窗進行授權👇

登入授權

建立一個雲環境👇

建立雲環境

在彈出視窗建立，我們選擇按量計費并将開啟免費資源選項勾上

注：每個賬戶隻能建立一個開啟免費資源的雲環境

點選立即開通後，雲環境會自動進行初始化。（過程大概持續2-3分鐘）耐心等待即可~

待我們初始化完成後，使用指令

tcb init

選擇進行關聯的雲環境

$ tcb init
√ 選擇關聯環境 · nuxt - [nuxt-1a3208:空] 
√ 請輸入項目名稱 · nuxtSSR
√ 選擇開發語言 · Node 
√ 選擇雲開發模闆 · Hello World
√ 建立項目 nuxtSSR 成功！

複制

建立完成後我們使用指令

tcb env:list

來檢視雲環境資訊，并将雲環境ID複制下來~

我們進入到雲開發項目目錄nuxt中

此時的目錄結構是這樣的👇

.        
├── functions // 雲函數目錄
├── .editorconfig 
├── .gitignore 
├── cloudbaserc.js // 項目配置檔案 
└── README.md

複制

在cloudbaserc.js中将envID改成自己的雲環境ID

我們進入到functions中來建立一個雲函數，在functions中一個檔案夾為一個雲函數。

cd functions

接下來我們就在functions下建構nuxt項目喽~

建構Nuxt項目

建立一個項目

npx create-nuxt-app nuxt

安裝node的時候會自動安裝npm 而在npm5.2.0之後又會自動加入npx 是以這個指令不必單獨安裝

$ npx create-nuxt-app nuxt
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in nuxt
? Project name nuxt # 項目的名稱
? Project description My badass Nuxt.js project # 項目的描述
? Author name dxd   # 作者的名字
? Choose programming language JavaScript # 選擇程式語言 我們選擇JavaScript
? Choose the package manager Npm  # 選擇包管理工具  我們選擇npm
? Choose UI framework None # 選擇UI架構 因為本次示範沒有用到，是以選擇none
? Choose custom server framework None (Recommended) # Server架構，同上
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection) # 選擇子產品
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)  # 選擇JS檢查工具
? Choose test framework None # 選擇測試架構
? Choose rendering mode Universal (SSR) # 是否開啟SSR服務端渲染，選擇Universal開啟
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

複制

建立成功後的樣子子👇

到此我們就建立了一個名為nuxt的雲函數~

那麼函數的入口檔案在哪呢？

我們需要為他建立一個index.js的入口檔案。

并在其中寫入

//index.js
const {Nuxt} = require('nuxt')
const serverless = require('serverless-http')
let config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)
exports.main = async (...args) => {
  console.log(config.dev)
  await nuxt.ready();
  return serverless((req,res) => {
        nuxt.render(req,res)
  })(...args)
}

複制

上述代碼中，我們用到了

serverless-http

,是以我們來安裝它~

安裝：

npm i serverless-http --save

配置項目

我們在nuxt.config.js中加入

dev:false

否則部署雲函數後會報下面錯誤👇~

{
"errorCode":1,
"errorMessage":"user code exception caught",
"stackTrace":"EROFS: read-only file system, rmdir '/var/user/.nuxt'\n
Error: EROFS: read-only file system, rmdir '/var/user/.nuxt'"
}

複制

打包項目

我們在nuxt項目(functions/nuxt)中使用

npm run build

進行打包，會生成.nuxt檔案夾

打包完成後回到雲開發根目錄使用指令

tcb functions:deploy nuxt

$ tcb functions:deploy nuxt
? 未找到函數釋出配置，是否使用預設配置（僅适用于 Node.js 雲函數） Yes
√ [nux] 雲函數部署成功！

複制

接着我們需要為這個雲函數建立一個HTTP連接配接

tcb service:create -f nuxt -p /nuxt

$ tcb service:create -f nuxt -p /nuxt
√ 雲函數 HTTP Service 建立成功！
點選通路> https://xxxx.service.tcloudbase.com/nuxt

複制

我們點選上面傳回的連接配接即可看到我們部署的頁面啦~👇

如果報錯逾時像這樣👇~

{"errorCode":-1,"errorMessage":"Task timed out after 3 seconds"}

我們可以适當将逾時時間延長一點~(預設逾時時間為3s)

選擇對應的雲函數

在函數配置中點選編輯

總結

NuxtSSR部署三步走

建構雲開發項目
在雲函數中建構nuxt項目并配置
部署雲函數，并為其建立HTTP連接配接