Appearance
部署
近期
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
文件,其中内容如下
js
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;
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
}
使用宝塔面板
- 进入面板,打开网站管理,切换到
Node
项目,并添加Node
项目 - 项目目录选择
web-nuxt
根目录 - 启动选项请选择
start
- 真实端口填写
3000
- 填写正确的绑定域名,宝塔将自动配置好代理
- 项目添加成功后,即可使用域名访问站点,并可以方便的配置
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 # 启动