如何在 Fly.io 上為 Nuxt 應用程序添加服務器端數據庫訪問

Question

我正在嘗試開始使用 Fly.io。 我很了解 Vue，想嘗試 Nuxt 和 Node.js。我似乎無法弄清楚如何添加服務器端組件和類來處理 AJAX 請求。

我按照官方教程https://fly.io/docs/languages-and-frameworks/nuxtjs/

npm init nuxt-app@latest spec-land

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in spec-land
? Project name: spec-land
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Element
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? What is your GitHub username? --
? Version control system: Git

🎉  Successfully created project spec-land

$ touch pages/index.js
$ npm run dev

添加一些前端代碼后，這個生成的項目是否可以在同一個 fly.io 部署中在服務器上運行 JavaScript？

Answer 1

對於 Nuxt2 應用程序，您需要在nuxt.config.js文件中將Rendering Mode設置為Universal (SSR/SSG)或ssr: true ，否則，您將沒有同構應用程序。

Nuxt 會在服務器端+客戶端（同構）運行一些代碼，而有些代碼只會在客戶端運行。

為 Nuxt2 設置serverMiddleware的設置如下。 相當棘手，而且效果不佳。
Nuxt3 在另一端處理得很好。

總的來說，Nuxt2 確實有一些關於服務器端代碼的能力，但不如 Nuxt3 靈活。 老實說，如果你想使用 Nuxt2，我建議不要嘗試建立一個鏈接到它的實際數據庫，而是通過 axios 或類似的方式遠程訪問它。