部署

近期 node 低版本安装依赖时会提示建议升级到18+，但请谨慎升级，如果升级后出现 _fetch is not a function 报错，请使用小于 18 的 node 版本进行编译，或者确定服务器端同样使用了 18+，pm2 可使用 pm2 show <app-name> 来查看运行环境的node版本

快速预览

开发完成后，于 web-nuxt/.env.production 文件内配置好服务端域名，然后使用 pnpm build 命令对项目进行编译，完成后执行 node .output/server/index.mjs 命令，命令执行成功时如下所示：

bash

PS E:\demo\cms-demo\web-nuxt> node .output/server/index.mjs
Listening http://[::]:3000

您可以访问 http://localhost:3000，预览部署版本。

正式上线

以上的快速预览无误后，您可以开始准备上线站点，以下为示例的流程，以使用 pm2 部署为例：

确定后端开发者：已于 config/buildadmin.php 中配置好当前站点的域名允许跨域，然后线上部署好服务端
web-nuxt 目录内，建立 ecosystem.config.cjs 文件，其中内容如下

module.exports = {
    apps: [
        {
            name: 'BANuxt-3000',
            port: '3000',
            exec_mode: 'cluster',
            instances: 'max', // 启动的进程数量
            script: './.output/server/index.mjs',
            watch: false,
        },
    ],
}

web-nuxt/package.json 的 scripts 块内，增加一行启动命令 "start": "pm2 start ecosystem.config.cjs",，增加后的内容大概如下：

json

{
    "name": "build-admin-nuxt",
    "version": "2.0.4",
    "private": true,
    "license": "Apache-2.0",
    "scripts": {
        // 下面一行是新增的
        "start": "pm2 start ecosystem.config.cjs",
        "build": "nuxt build",
        "dev": "nuxt dev",
        ....
    }
}

将项目上传至服务器，本示例中不仅仅需要上传 web-nuxt/.output 目录，请确保 web-nuxt/ecosystem.config.js 和 web-nuxt/package.json 文件亦有被上传，笔者此处是将整个 web-nuxt 目录除了 node_modules 以外都上传至了服务器。
服务器上安装好 node、pm2、包管理器:yarn/pnpm/npm
安装依赖，需要在 项目根目录 或者 web-nuxt/.output/server目录 再次执行 pnpm install 非常重要
运行 pnpm start，输出类似：

bash

> build-admin-nuxt@1.1.6 start
> pm2 start ecosystem.config.js

[PM2][WARN] Applications BuildAdminNuxtCMS not running, starting...
[PM2] App [BuildAdminNuxtCMS] launched (2 instances)
┌────┬──────────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │
├────┼──────────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0 │ BuildAdminNuxtCMS │ default │ 0.0.0 │ cluster │ 429371 │ 0s │ 0 │ online │ 0% │ 39.8mb │ www │ disabled │
│ 1 │ BuildAdminNuxtCMS │ default │ 0.0.0 │ cluster │ 429378 │ 0s │ 0 │ online │ 0% │ 37.6mb │ www │ disabled │
└────┴──────────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
[PM2][WARN] Current process list is not synchronized with saved list. Type 'pm2 save' to synchronize.

访问测试，此时访问 服务器ip:3000，可以正常访问项目，则运行正常。
默认端口为 3000，请确保服务器已经对外开放此端口号。
web-nuxt/.output 是可以单独跑起来的，开发者可自行研究，但笔者认为不便管理，因为该目录总是在重新编译时被清空。

绑定域名

我们通常使用 Nginx 代理，以下为 Nginx 示例配置：

bash

server
{
    listen 80;
    # 您的域名
    server_name cms.demo.buildadmin.com;
    # 索引文档，建议将 index.html 放在第一个
    index index.html;

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md|package.json|package-lock.json|\.env) {
        return 404;
    }


    # HTTP反向代理相关配置开始 >>>
    location / {
        # 端口为3000，自定义后请注意修改
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host:$server_port;
        # 添加发往 Node 服务器的请求头，$remote_addr 为客户端 IP
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_connect_timeout 30s;
        proxy_read_timeout 86400s;
        proxy_send_timeout 30s;
        proxy_redirect off;
    }
    # HTTP反向代理相关配置结束 <<<

    # 有可能会存在的默认规则-【请删除它们】，否则很多资源会404 - START
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    # 有可能会存在的默认规则-【请删除它们】，否则很多资源会404 - END
}

客户端真实IP获取

Nuxt 工程的 服务端渲染，将使用 Node 向 PHP 接口请求预渲染数据，此时 PHP 获取到的 客户端IP 总是 Node 服务器的，并非真实IP，但从 BuildAdmin v2.1.3 起通过简单配置即可正确获取，如下：

上层代理服务器需要配置好真实IP的转发，如上的绑定域名中的 Nginx 配置中的 proxy_set_header X-Real-IP $remote_addr;
联系 PHP 后端开发者：找到 config/buildadmin.php 文件中的 proxy_server_ip 配置项，填写 部署 Nuxt 工程的服务器的 IP，这表示信任该服务器传递的 X-Real-IP 字段；Nuxt 工程将自动接受 Nginx 传递的 X-Real-IP 并继续传递给 PHP 服务器。
刷新 Nuxt 工程会员中心的 账户概览 页面，刷新后显示的 最后登录IP 为当前客户端IP，即配置成功。

常见问题

执行 pnpm start 时提示以下错误

ini

[PM2][ERROR] File ecosystem.config.js malformated
Error [ERR_REQUIRE_ESM]: require() of ES Module...................

将 ecosystem.config.js 文件名修改为 ecosystem.config.cjs，将新增命令中的 pm2 start ecosystem.config.js 修改为 pm2 start ecosystem.config.cjs

使用宝塔面板管理网站？

进入面板，打开网站管理，切换到 Node 项目，并添加 Node 项目
项目目录选择 web-nuxt 根目录
启动选项请选择 start
真实端口填写 3000
填写正确的绑定域名，宝塔将自动配置好代理
项目添加成功后，即可使用域名访问站点，并可以方便的配置 SSL 证书等

PM2的常用命令

ini

pm2 stop [all/ID/appName] # 停止应用程序:all=全部
pm2 list # 列表 PM2 启动的所有的应用程序
pm2 monit # 显示每个应用程序的CPU和内存占用情况
pm2 show [app-name] # 显示应用程序的所有信息
pm2 logs # 显示所有应用程序的日志
pm2 logs [app-name] # 显示指定应用程序的日志
pm2 flush # 清理日志
pm2 restart [all/ID/appName] # 重启应用:all=全部
pm2 delete [all/ID/appName] # 关闭删除应用:all=全部
pm2 startup # 创建开机自启动命令
pm2 start app.js # 启动

部署 ​

快速预览 ​

正式上线 ​

绑定域名 ​

客户端真实IP获取 ​

常见问题 ​

部署

快速预览

正式上线

绑定域名

客户端真实IP获取

常见问题