Nuxt3 & Serverless 嘗鮮之旅
前言
Nuxt3 這個月剛出沒多久壮啊，目前還在 beta 階段，難以上生產(chǎn)環(huán)境。官方也推薦我們的 Nuxt2 項(xiàng)目铝噩，先遷移到 Nuxt Bridge 來進(jìn)行一個平滑的過渡漂辐。
不過我們還是有必要預(yù)先體會一下 Nuxt3 與 Nuxt2 之間的異同點(diǎn)钻弄，來為我們的項(xiàng)目預(yù)先累積一些遷移知識。
Quick Start
執(zhí)行命令: npx nuxi init nuxt3-app
Nodejs 版本最低為 ^14(LTS) , 國內(nèi)有可能出現(xiàn)初始化失敗者吁，可以直接去 https://github.com/nuxt/starter/tree/v3 下載模板窘俺。
Usage
除了 vue3 那些用法之外，可以看到 nuxt3 文檔中廣泛使用了 setup 的用法复凳。同時(shí)對 ts 的支持也更好了瘤泪。
同時(shí)以 別名(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/*"
]
這樣在我們的代碼里，會出現(xiàn)許多的 import { ... } from '#app'育八，相比于直接 import { ... } from 'vue' 对途，這種的思路還是很值得我們學(xué)習(xí)的，依靠這種方法髓棋，即封裝了那些原始的底層 API实檀，同時(shí)也保障了一定的開發(fā)體驗(yàn)惶洲。
Directory structure
接下來簡單介紹一些目錄上的變更，還有和 Nuxt2 的異同點(diǎn):
components
Nuxt automatically imports any components in your components/ directory
Nuxt3 會自動導(dǎo)入在 components 目錄里的組件膳犹，這個就有點(diǎn) uni-app 的 easycom 那味了恬吕。
實(shí)際是繼承自 Nuxt2 中的 @nuxt/components , 掃描代碼中出現(xiàn)的組件來達(dá)到 build 時(shí)的一種 "Tree Shaking"。
composables
這個在Nuxt2沒有须床，是 3 新加的文件夾铐料，類似于我們寫 react 時(shí)存放的一些公共 hooks ，值得注意的是這個文件夾也是全局 自動導(dǎo)入 的豺旬。
pages
pages 這一塊大抵和原先類似钠惩，不過值得注意的是，動態(tài)路由(Dynamic Routes)有變化 族阅，它拋棄了原先那種 \_xxx 變量的用法篓跛，命名變得和 nextjs 類似了。
plugins
plugins 改動最大的地方坦刀，就是它無需在 nuxt.config.[ts/js] 中手動注冊了愧沟，只要放在這個目錄里的，都會進(jìn)行 自動注冊(auto-registered)求泰。
照理說央渣，按照之前 Nuxt2 的思路，這時(shí)候要進(jìn)行插件的運(yùn)行時(shí)區(qū)分渴频，就要手動命名為 .ts/.client.ts/.server.ts 芽丹，以此來代表 runtime: all/client-only/server-only 了，目前這塊文檔沒有提及卜朗，可能目前走的還是條件編譯的路子拔第，即 process.server,process.client 加代碼分支的路子。
server
server 這個文件夾场钉，有點(diǎn)像原先 serverMiddleware 的用法蚊俺，里面存放著一些 服務(wù)端中間件 還有 API endpoints。
這里有一點(diǎn)值得一說：
Nuxt2 使用 connect 作為內(nèi)置的 server 框架
Nuxt3 使用 h3 來取代了 connect, h3 是 Nuxt團(tuán)隊(duì)編寫的一個
輕量級框架逛万，擁有許多的改進(jìn)泳猬，比如高可移植性，可以完美的工作在 Serverless , Workers ,Node.js 這些運(yùn)行環(huán)境里宇植。
同時(shí)它也能兼容 connect/express 這類的中間件得封，從而利用他們的現(xiàn)有生態(tài)。
筆者粗略的看了一下代碼指郁，發(fā)現(xiàn)它就像一個用 ts 重寫的現(xiàn)代版 connect (version 0.3.3版本)
設(shè)計(jì)理念
這么多自動導(dǎo)入的目錄忙上，感覺設(shè)計(jì)上一直在為 vue3 setup 的語法服務(wù)。
可以預(yù)料到闲坎，相比 Nuxt2 疫粥，3 的開發(fā)體驗(yàn)茬斧，應(yīng)該會變得 "很直接"。
同時(shí)它做了大量的優(yōu)化梗逮，寫了一個 Server Engine named Nitro项秉，這個就很厲害，它也是 跨平臺(Cross-platform) 且 Serverless 友好的库糠。
看了它在服務(wù)端這塊伙狐，對 Serverless 優(yōu)化了如此之多涮毫，筆者不得不使用 Serverless 去部署一番瞬欧，親身體會一下這些改進(jìn)了。
Serverless Deployment
這里演示一下罢防，部署到騰訊云 SCF 的流程
準(zhǔn)備工具: Docker,Serverless Framework
Q: 為什么要用 Docker艘虎？
A: 因?yàn)槟壳膀v訊云的 Nodejs 版本只能支持到 12.16，而 Nuxt3 最低的要求版本為 14咒吐。所以這時(shí)候我們必須去自定義運(yùn)行時(shí)環(huán)境野建，來提升 Nodejs 的版本，于是就需要用到自定義鏡像部署這個功能恬叹。
鏡像上傳到個人私有倉庫
準(zhǔn)備一份簡單的 Dockerfile:
FROM node:14-alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json yarn.lock /usr/src/app/
RUN yarn --prod
COPY ./.output /usr/src/app/.output
EXPOSE 9000
ENTRYPOINT ["yarn" ,"start"]
其中 yarn start 指令為候生，nuxt3 build 后 ，node 對
0.0.0.0:9000端口的監(jiān)聽
把鏡像打出來之后绽昼，再 push 到騰訊云的個人私有倉庫里唯鸭，然后把 IMAGE_URI 拼接出來，作為 serverless.yml 的配置硅确。
比如說我的公開的鏡像地址為:
ccr.ccs.tencentyun.com/tcb-100006794960-iuit/web-ssr-nuxt3-scf-demo:v1.0.1@sha256:1b29d131966f5278d35ef406dfcf9dc8acd07db04c4409494e8d55fd1dcac248
接著目溉，再使用 serverless framework 的 components deploy 指令，一鍵式鏡像部署到 SCF 菱农，我們的 Nuxt3 應(yīng)用缭付，就成功的部署到了公網(wǎng)上。
為此循未，筆者也寫了一個騰訊云部署的 Nuxt3 模板：
https://github.com/sonofmagic/serverless-nuxt3-template
有興趣的陷猫，可以參照文章進(jìn)行部署，或者直接拉取筆者的公有鏡像進(jìn)行部署的妖，都是可以的绣檬。
尾言
Nuxt3 在 vue3 出來將近 1年半 之后 ，姍姍來遲羔味，還是很驚喜的河咽，祝愿它也能達(dá)到 nextjs的高度，未來可期赋元。
