# 部署
# 快速预览
开发完成后,于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
部署为例:
- 先确定后端开发者:已于
config/buildadmin.php
中配置好当前站点的域名允许跨域、然后线上部署好服务端 web-nuxt
目录内,建立ecosystem.config.js
文件,其中内容如下
module.exports = {
apps: [
{
name: 'BuildAdminNuxtCMS',
port: '3000',
exec_mode: 'cluster',
instances: 'max',
script: './.output/server/index.mjs',
watch: false,
},
],
}
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",
....
}
}
- 将项目上传至服务器,本示例中不仅仅需要上传
web-nuxt/.output
目录,请确保web-nuxt/ecosystem.config.js
和web-nuxt/package.json
文件亦有被上传,笔者此处是将整个web-nuxt
目录除了node_modules
以外都上传至了服务器。 - 服务器上安装好
node
、pm2
、包管理器:yarn/pnpm/...
- 安装依赖,需要在
项目根目录
或者web-nuxt/.output/server目录
再次执行pnpm install
非常重要 - 运行
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.
- 访问测试,此时访问
服务器ip:3000
,可以正常访问项目,则运行正常。 - 默认端口为
3000
,请确保服务器已经对外开放此端口号 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
}
# 使用宝塔面板
- 进入面板,打开网站管理,切换到
Node
项目,并添加Node
项目 - 项目目录选择
web-nuxt
根目录 - 启动选项请选择
start
- 真实端口填写
3000
- 填写正确的绑定域名,宝塔将自动配置好代理
- 项目添加成功后,即可使用域名访问站点,并可以方便的配置
SSL
证书等