BuildAdmin

# 部署

# 快速预览

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

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

您可以访问http://localhost:3000 (opens new window)，预览部署版本。

# 正式上线

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

  1. 先确定后端开发者：已于config/buildadmin.php中配置好当前站点的域名允许跨域、然后线上部署好服务端
  2. web-nuxt目录内，建立ecosystem.config.js文件，其中内容如下
module.exports = {
    apps: [
        {
            name: 'BuildAdminNuxtCMS',
            port: '3000',
            exec_mode: 'cluster',
            instances: 'max',
            script: './.output/server/index.mjs',
            watch: false,
        },
    ],
}
  1. web-nuxt/package.json的scripts块内，增加一行启动命令"start": "pm2 start ecosystem.config.js",，增加后的内容大概如下：
{
    "name": "build-admin-nuxt",
    "version": "2.0.4",
    "private": true,
    "license": "Apache-2.0",
    "scripts": {
        // 下面一行是新增的
        "start": "pm2 start ecosystem.config.js",
        "build": "nuxt build",
        "dev": "nuxt dev",
        ....
    }
}
  1. 将项目上传至服务器，本示例中不仅仅需要上传web-nuxt/.output目录，请确保web-nuxt/ecosystem.config.js和web-nuxt/package.json文件亦有被上传，笔者此处是将整个web-nuxt目录除了node_modules以外都上传至了服务器。
  2. 服务器上安装好node、pm2、包管理器:yarn/pnpm/...
  3. 安装依赖，需要在项目根目录或者web-nuxt/.output/server目录再次执行pnpm install非常重要
  4. 运行pnpm start，输出类似：
> 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示例配置：

宝塔环境下，请直接看下方的宝塔部署

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证书等

← 开启调试 →