从零开始的nuxt3之路（3），项目部署
2025-05-07 13:53:42 #vue3 #nuxt3

本篇主要讲的是Nuxt3的SSR的部署模式。

正文

这三种部署模式，除了SSR比较麻烦，其他两种基本上不会出什么问题，所以本次着重讲的是SSR模式。

论坛类的站点，如果为了让网站做好SEO，能让搜索引擎更好抓取，就必须得用SSR模式。

如果不清楚，你可以打开这三种渲染模式的页面元素。

除了SSR的渲染出来的页面元素是完整的，其他两种模式都是把元素扔到<script>中。

部署方式

Nuxt3的项目提供了三种部署方式，本篇着重讲的是SSR这种部署模式。

服务端渲染应用部署 (SSR)

  • 使用 nuxt build 命令构建一个可运行在 Node.js 环境中的服务器端渲染应用。
  • 构建完成后，可以通过 node .output/server/index.mjs 启动服务。
  • 这种方式适合需要SEO优化、首屏加载速度要求高的网站，比如论坛类的站点。

静态应用部署（SSG）

  • 利用 nuxt generate 命令进行预渲染，生成 .output/public 目录下的静态文件。
  • 静态文件可以直接托管到任何静态托管服务上，如 Vercel, Netlify, GitHub Pages 等。
  • 此方法适用于内容不频繁更新或不需要动态数据的站点，比如博客类的文档托管工具。

单页面应用程序部署 (SPA)

  • 在 Nuxt 3 中也可以通过配置禁用 SSR 和生成步骤，创建传统的 SPA 应用。
  • 只需设置 ssr: false 在 nuxt.config.ts 文件中即可。
  • 构建命令通常为 nuxi build --spa，然后将输出目录部署至静态服务器。
  • 这种方式适合高度交互性的 Web应用程序，其中大部分逻辑都在客户端执行。

本地打包

这里并非是传统的ssg打包，那个打包很简单，但是不适合带接口的文档类的接口。

打包nuxt3项目

打包nuxt3会生成一个.out的文件夹，我这里用的是pnpm，是因为我本机用的是pnpm。

1
pnpm run build

安装node环境

这里尝试过用1panel安装node环境，但是效果不太好，还是用传统的命令行来安装吧。

更新系统包

通过 Node.js 官方 Yum 源安装，首先更新系统包

1
sudo yum update -y

创建目录

安装完成后也要创建一个软链接才可以全局使用

这里我要创建一个用于存放node的安装目录，目录没什么特殊要求，自己记住为准。

1
mkdir -p /server/soft/node

下载安装包

切换到对应的目录

1
cd /server/soft/node

下载最新版本的Node.js，这里我用wget命令下载，如果不能用，建议查一下其他的linux下载命令。

1
wget https://nodejs.org/dist/v20.5.0/node-v20.5.0-linux-x64.tar.xz

解压到指定目录

这里我们就解压到制定的目录

1
sudo tar -xJvf node-v20.5.0-linux-x64.tar.xz -C /server/soft/node

配置nodejs环境

看了其他人的文档，有人说创建软链接的方式不太好，个人参考那篇文档没跑通。

折腾了一段时间之后，还是选择如下方案，node环境推荐按照当前最新的稳定版本（node20）。

创建对应的软链

软链接是为了能在服务器上执行对应的命令，否则node命令没法直接执行。

1
2
3
4
5
6
# 创建 node 软链
sudo ln -s /server/soft/node/node-v20.5.0-linux-x64/bin/node /usr/bin/node
# 创建 npm 软链
sudo ln -s /server/soft/node/node-v20.5.0-linux-x64/bin/npm /usr/bin/npm
# 创建 npx 软链
sudo ln -s /server/soft/node/node-v20.5.0-linux-x64/bin/npx /usr/bin/npx
  • 优点: 创建一次，所有用户均可运行node相关命令
  • 缺点: 每增加一个全局node相关命令都要创建软链
移除对应内容

如果要是对应的软连接已经被占用，可以用以下命令移除对应的软连接，再重新执行上边的命令

1
2
3
sudo rm /usr/bin/node
sudo rm /usr/bin/npm
sudo rm /usr/bin/npx

验证版本

如果这里版本验证成功后，到此，node安装的流程就算是完成了。

1
2
node -v
npm -v

安装PM2

安装pm2也要添加软连接，因为使用npm下载安装，所以下载目录就在node的bin目录下。

1
npm install pm2 -g

如果网络环境不太好，记得切换一下npm的镜像源

1
npm config set registry https://registry.npmmirror.com

添加软连接

按照之前的操作，这里再添加一下pm2的安装命令

1
sudo ln -s /server/soft/node/node-v20.5.0-linux-x64/bin/pm2  /usr/bin/pm2

上传文件

这里我是用1panel创建反向代理，目录很清晰，具体的创建方法这里不具体多说，参考1Panel部署Nuxt3项目。

我这里只是提两点注意事项。

一，注意node_modules包，先删再传

直接把.out文件传到根目录下，不过这里的node_modules可能太大，文件太多，不推荐上传。

可以先把node_modules删除然后上传，在上传完成后，切换到server目录去安装node_modules

二，不需要开放3000端口的防火墙

3000这端口是通过nginx代理出去的，不需要自己手动开启防火墙

启动项目

在完成PM2的软链接之后，就可以用PM2启动当前的nuxt的项目了，在启动项目之前，我们还需要再做个准备。

这里现在根目录下创建一个ecosystem.config.js文件，便于pm2启动。

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    apps: [
        {
            name: "HelloNuxt",
            port: "3000",
            exec_mode: "cluster",
            instances: "1",
            script: "./.output/server/index.mjs",
        }
    ],
};

切换到根目录，然后启动项目

1
2
cd /opt/1panel/apps/openresty/openresty/www/sites/gameexpress.crazystudent13.cn/index
pm2 start ecosystem.config.js

pm2相关操作

这里附带pm2的命令行操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pm2 start main.js # 运行pm2启动项目
pm2 restart main.js # 运行pm2启动项目
pm2 stop main.js # 运行pm2启动项目
pm2 list # 显示所有进程状态
pm2 monit # 监视所有进程
pm2 logs # 显示所有进程日志
pm2 stop all # 停止所有进程
pm2 restart all # 重启所有进程
pm2 reload all # 0 秒停机重载进程 (用于 NETWORKED 进程)
pm2 stop 0 # 停止指定的进程
pm2 restart 0 # 重启指定的进程
pm2 startup # 产生 init 脚本 保持进程活着
pm2 web # 运行健壮的 computer API endpoint (http://localhost:9615)
pm2 delete 0 # 杀死指定的进程
pm2 delete all # 杀死全部进程

结语

nuxt3的部署文档颇多，但是都没说明白，而且部署的效果都没有办法预览，我都没法确定部署的效果。

这里会持续修正自己的部署过程，让这个过程简单起来。

参考

1Panel部署Nuxt3项目通过 Node.js 官方 Yum 源安装，首先更新系统包： 添加 Node.js 官方存 - 掘金

nest-admin使用指南

Prev
2025-05-07 13:53:42 #vue3 #nuxt3
Next