1、服务器安装node
因为最后要靠 node 才能启动
2、安装pm2
pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块
npm install -g pm2
可能需要建立软连接
ln -s 你的nodejs的目录一般情况下/bin/pm2 /usr/local/bin
建议把 nodejs 目录下的bin目录直接添加到环境变量,更方便
3、部署
- 本地运行
npm run build
打包,然后把.nuxt
、static
、nuxt.config.js
、package.json
、package-lock.json
上传到服务器
最后服务器项目目录里面就是这几个文件
.nuxt
static
nuxt.config.js
package.json
package-lock.json
上传好后,运行npm install
安装依赖(建议npm install --unsafe-perm=true --allow-root
)
最后运行npm run start
启动项目
- 另外一种方法在服务器上打包上传整个项目到服务器上,当然像
node_modules
、.idea
之类的除外,接着依次运行:
npm install
npm run build
npm run start
如果有node-sass模块,安装过程可能会报错,运行
npm install node-sass --unsafe-perm --save-dev
来单独安装这个模块就好了。建议直接npm install --unsafe-perm=true --allow-root
使用pm2守护进程运行项目
刚才已经安装了pm2,在项目上传后,进入项目目录,用pm2
执行运行命令
pm2 start npm --name "nuxt" -- run start
pm2 start npm --name "nuxt" -- run start
表示在项目目录执行npm run start
,
但是 pm2 的写法就是pm2 start npm --name "nuxt" -- run start
中间要有--
然后--name "nuxt"
表示pm2
给这个项目起个名称
pm2还有很多命令,常用的
pm2 list
// 查看任务列表
pm2 stop app_name|app_id
// 停止指定name或者id的任务
pm2 stop all
// 停止所有任务
pm2 delete app_name|app_id
// 删除指定name或者id的任务
pm2 delete all
// 删除所有任务
pm2 logs
// 查看日志
pm2 kill
// 杀死pm2进程
Nginx配置
#t-backend是自定义后台的名字,下面会用到这个。
# 这里的【127.0.0.1:9002】是后台接口地址
# upstream test-backend {
# server 127.0.0.1:9002;
# }
# nuxt项目监听
upstream nodenext {
server 127.0.0.1:9000; #next项目 监听端口
keepalive 64;
}
## test-peoject虚拟服务器配置
server {
## 监听端口
listen 80;
## 服务名称
server_name xxxx.com; # 域名或者IP
# 文件访问控制
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
## 字符集编码
charset utf-8;
## 访问日志
# access_log logs/test-peoject.access.log main;
## 错误日志
# error_log logs/test-peoject.error.log main;
# 客户端请求体最大值
client_max_body_size 500m;
# 黑名单配置
# deny 192.53.163.212;
gzip on;
gzip_types application/javascript text/css image/jpeg image/png;
## 原型图
location /work {
root /root/resources/;
}
# 文件服务器
location /little-monsters-file {
root /N-cbcwm/;
}
# api请求
location /api {
proxy_pass http://127.0.0.1:8082;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
# 如果是请求类型是 OPTIONS 就直接返回 200
if ($request_method = OPTIONS ) {
return 200;
}
}
# 访问nuxt项目 bbsgo-view
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://nodenext; #反向代理
gzip on;
gzip_types application/javascript text/css image/jpeg image/png;
}
## 代理前端图片,缓存时间长一点
# location ~ ^(/static/).+\.(jpg|jpeg|gif|png)$ {
# access_log off;
# root html/test-project;
# expires 15d;
# }
## 通过客户端请求头信息
proxy_pass_request_headers on;
## 保留客户端的真实信息
proxy_set_header Host $host;
proxy_set_header X-Real_IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
## 转发后台请求,这个用到了test-backend(前面已定义的)
# location /test-pro {
# proxy_pass http://test-backend;
# }
}
网友评论