Skip to main content

Nuxt3 - 部署

nuxt 部署打包​

generate​

npm run generate

產生預渲染的畫面，在發出 request 後，直接把畫面吐出來。 如果在專案中有些畫面要用 ssr 而有些畫面要用 csr 的情況下，可以透過 nitro 個別把不想要的 router ignore 起來。

Nitro 將在建置過程中取得和預先渲染的路由，或忽略您不想預先渲染的路由，例如  nuxt.config  檔案中的  /dynamic ：

export default defineNuxtConfig({
    nitro: {
        prerender: {
            routes: ["/user/1", "/user/2"],
            ignore: ["/dynamic"],
        },
    },
});
warning

🚧 特別注意，如果是 ssr mode 的情況下，走 csr 的 page ，res doc 的 status code 會是 404。

build​

npm run build

build 完後，可以用

node .output/server/index.mjs

直接 run 起專案，也可以用 pm2 的方式去 run 起來。

ecosystem.config.cjs
// pm2 start ecosystem.config.cjs

module.exports = {
    apps: [
        {
            name: "NuxtAppName",
            port: "3000",
            exec_mode: "cluster",
            instances: "max",
            script: "./.output/server/index.mjs",
        },
    ],
};

netlify 的 VPS​

netlify 簡單快速的部署，可以參考此篇。主要是用 generate 的方式進行打包，在 deploy 到 server 上。

Linode 的主機​

  1. 首先要在 linode 的主機中設定 反向代理 的 nginx，並且聽 3000 port。
  2. 在用 npm run build，產出 .output 的 fold。
  3. 放到 server 上把 node -port:3000 跑走來
  4. 在透過 ip 就可以直接連到專案畫面了

參考​

Nuxt 通过 nginx 打包部署到线上 - 掘金 nuxt.js 項目部署全過程(ubuntu+nginx+node+pm2)_ZenDei 技術網路在線