Skip to content

部署

近期 node 低版本安装依赖时会提示建议升级到18+,但请谨慎升级,如果升级后出现 _fetch is not a function 报错,请使用小于 18node 版本进行编译,或者确定服务器端同样使用了 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 部署为例:

  1. 确定后端开发者:已于 config/buildadmin.php 中配置好当前站点的域名允许跨域,然后线上部署好服务端
  2. web-nuxt 目录内,建立 ecosystem.config.cjs 文件,其中内容如下
js
module.exports = {
    apps: [
        {
            name: 'BANuxt-3000',
            port: '3000',
            exec_mode: 'cluster',
            instances: 'max', // 启动的进程数量
            script: './.output/server/index.mjs',
            watch: false,
        },
    ],
}
  1. web-nuxt/package.jsonscripts 块内,增加一行启动命令 "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",
        ....
    }
}
  1. 将项目上传至服务器,本示例中不仅仅需要上传 web-nuxt/.output 目录,请确保 web-nuxt/ecosystem.config.jsweb-nuxt/package.json 文件亦有被上传,笔者此处是将整个 web-nuxt 目录除了 node_modules 以外都上传至了服务器。
  2. 服务器上安装好 nodepm2包管理器:yarn/pnpm/npm
  3. 安装依赖,需要在 项目根目录 或者 web-nuxt/.output/server目录 再次执行 pnpm install 非常重要
  4. 运行 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.
  1. 访问测试,此时访问 服务器ip:3000,可以正常访问项目,则运行正常。
  2. 默认端口为 3000,请确保服务器已经对外开放此端口号。
  3. 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;
        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
}

使用宝塔面板

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

常见问题

执行 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

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 # 启动