Nuxt3 & Serverless 嘗鮮之旅

Nuxt3 & Serverless 嘗鮮之旅

前言

Nuxt3 這個月剛出沒多久,目前還在 beta 階段,難以上生産環境。官方也推薦我們的 Nuxt2 項目,先遷移到 Nuxt Bridge 來進行一個平滑的過渡。

不過我們還是有必要預先體會一下 Nuxt3Nuxt2 之間的異同點,來爲我們的項目預先累積一些遷移知識。

Quick Start

執行命令: npx nuxi init nuxt3-app

Nodejs 版本最低爲 ^14(LTS) , 國內有可能出現初始化失敗,可以直接去 https://github.com/nuxt/starter/tree/v3 下載模板。

Usage

除了 vue3 那些用法之外,可以看到 nuxt3 文檔中廣泛使用了 setup 的用法。同時對 ts 的支持也更好了。

同時以 別名(Alias) 爲例:

"#app": [  "node_modules/nuxt3/dist/app"],"#app/*": [  "node_modules/nuxt3/dist/app/*"],"#meta": [  "node_modules/nuxt3/dist/meta/runtime"],"#meta/*": [  "node_modules/nuxt3/dist/meta/runtime/*"],"#build": [  ".nuxt"],"#build/*": [  ".nuxt/*"]

這樣在我們的代碼裏,會出現許多的 import { ... } from '#app',相比于直接 import { ... } from 'vue' ,這種的思路還是很值得我們學習的,依靠這種方法,即封裝了那些原始的底層 API,同時也保障了一定的開發體驗。

Directory structure

接下來簡單介紹一些目錄上的變更,還有和 Nuxt2 的異同點:

components

Nuxt automatically imports any components in your components/ directory

Nuxt3 會自動導入在 components 目錄裏的組件,這個就有點 uni-appeasycom 那味了。

實際是繼承自 Nuxt2 中的 @nuxt/components , 掃描代碼中出現的組件來達到 build 時的一種 "Tree Shaking"

composables

這個在Nuxt2沒有,是 3 新加的文件夾,類似于我們寫 react 時存放的一些公共 hooks ,值得注意的是這個文件夾也是全局 自動導入 的。

pages

pages 這一塊大抵和原先類似,不過值得注意的是,動態路由(Dynamic Routes)有變化 ,它抛棄了原先那種 \_xxx 變量的用法,命名變得和 nextjs 類似了。

plugins

plugins 改動最大的地方,就是它無需在 nuxt.config.[ts/js] 中手動注冊了,只要放在這個目錄裏的,都會進行 自動注冊(auto-registered)

照理說,按照之前 Nuxt2 的思路,這時候要進行插件的運行時區分,就要手動命名爲 .ts/.client.ts/.server.ts ,以此來代表 runtime: all/client-only/server-only 了,目前這塊文檔沒有提及,可能目前走的還是條件編譯的路子,即 process.server,process.client 加代碼分支的路子。

server

server 這個文件夾,有點像原先 serverMiddleware 的用法,裏面存放著一些 服務端中間件 還有 API endpoints

這裏有一點值得一說:

Nuxt2 使用 connect 作爲內置的 server 框架

Nuxt3 使用 h3 來取代了 connect, h3Nuxt團隊編寫的一個
輕量級框架,擁有許多的改進,比如高可移植性,可以完美的工作在 Serverless , Workers ,Node.js 這些運行環境裏。

同時它也能兼容 connect/express 這類的中間件,從而利用他們的現有生態。

筆者粗略的看了一下代碼,發現它就像一個用 ts 重寫的現代版 connect (version 0.3.3版本)

設計理念

這麽多自動導入的目錄,感覺設計上一直在爲 vue3 setup 的語法服務。

可以預料到,相比 Nuxt23 的開發體驗,應該會變得 "很直接"

同時它做了大量的優化,寫了一個 Server Engine named Nitro,這個就很厲害,它也是 跨平台(Cross-platform)Serverless 友好的。

看了它在服務端這塊,對 Serverless 優化了如此之多,筆者不得不使用 Serverless 去部署一番,親身體會一下這些改進了。

Serverless Deployment

這裏演示一下,部署到騰訊雲 SCF 的流程

准備工具: Docker,Serverless Framework

Q: 爲什麽要用

A: 因爲目前騰訊雲的 Nodejs 版本只能支持到 12.16,而 Nuxt3 最低的要求版本爲 14。所以這時候我們必須去自定義運行時環境,來提升 Nodejs 的版本,于是就需要用到自定義鏡像部署這個功能。

鏡像上傳到個人私有倉庫

准備一份簡單的 Dockerfile:

FROM node:14-alpineRUN mkdir -p /usr/src/appWORKDIR /usr/src/appCOPY package.json yarn.lock /usr/src/app/RUN yarn --prodCOPY ./.output /usr/src/app/.outputEXPOSE 9000ENTRYPOINT ["yarn" ,"start"]其中 yarn start 指令爲,nuxt3 build 後 ,node 對 0.0.0.0:9000 端口的監聽

把鏡像打出來之後,再 push 到騰訊雲的個人私有倉庫裏,然後把 IMAGE_URI 拼接出來,作爲 serverless.yml 的配置。

比如說我的公開的鏡像地址爲:

ccr.ccs.tencentyun.com/tcb-100006794960-iuit/web-ssr-nuxt3-scf-demo:[email protected]:1b29d131966f5278d35ef406dfcf9dc8acd07db04c4409494e8d55fd1dcac248

接著,再使用 serverless frameworkcomponents deploy 指令,一鍵式鏡像部署到 SCF ,我們的 Nuxt3 應用,就成功的部署到了公網上。

爲此,筆者也寫了一個騰訊雲部署的 Nuxt3 模板:

https://github.com/sonofmagic/serverless-nuxt3-template

有興趣的,可以參照文章進行部署,或者直接拉取筆者的公有鏡像進行部署,都是可以的。

尾言

Nuxt3vue3 出來將近 1年半 之後 ,姗姗來遲,還是很驚喜的,祝願它也能達到 nextjs的高度,未來可期。