部署Express项目

把测试通过的 Express 项目上传到git，在服务器通过克隆到方式down下来
npm install 安装项目所需依赖
安装pm2，用于管理 node 服务
在项目根目录下启动 node 服务 pm2 start app.js

// 停止、删除服务
pm2 stop '服务名称或id'
pm2 delete '服务名称或id'
// 指定应用名称 
--name <app_name> 
// 监听应用，当文件更改时，观看并重新启动应用程序 
--watch 
// 设置应用重新加载的内存阈值 
--max-memory-restart <200MB> 
// 指定日志文件 
--log <log_path> 
// 自动重启之间的延迟 
--restart-delay <delay in ms> 
// 在日志中添加时间前缀 
--time

Nginx 配置后端接口服务

确保 Node.js 应用正在运行，并监听3000端口

编辑 nginx 配置文件，文件位置在 nginx 安装目录下 /nginx/conf/nginx.conf

server {
    // 监听80端口（HTTP默认端口）
    listen 80;  
    server_name '服务器IP地址';
    // 定义如何处理到达服务器的请求
    location / {  
        // 将请求转发到本地运行的Node.js应用
        proxy_pass http://localhost:3000; 
        proxy_http_version 1.1;  
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';  
        proxy_set_header Host $host;  
        proxy_cache_bypass $http_upgrade;  
    }
}

nginx -t验证配置文件是否有误
重启 nginx 服务 nginx -s reload

注意事项

确保防火墙允许80端口的入站流量
需要在云服务的安全组设置中开放80端口
如果Node.js应用不是监听在 localhost 上，而是绑定到特定IP（如0.0.0.0），需要相应地修改 proxy_pass 指令
如果您计划使用HTTPS，需要额外的SSL配置

部署 Vue 项目

把打包好的dist文件上传到服务器上，重命名为bean，这里文件名需要与nginx上配置的路径保持一致
配置 nginx

server {
	// 请求路径设置
	location /bean/ {    
        proxy_http_version 1.1; 
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;  
        proxy_cache_bypass $http_upgrade;
        
        // dist文件存放目录
        alias  /var/www/vue-app/dist/;  
        index index.html; 
        try_files $uri $uri/ @rewrites;
	}

	// 重定向到静态文件目录
	location @rewrites { 
        rewrite ^/bean/(.*)$ /bean/index.html last;  
	}
}

注意事项

如果 nginx 的配置文件里配置的是location /bean/，需要在vue项目的vite.config.js文件配置base 选项 base: '/bean/'
nginx 配置踩雷：

以下配置会报错rewrite or internal redirection cycle while internally redirecting to "/bean/index.html"，这是因为需要把前端打包文件放在nginx的html目录下

server {
	location ^~/bean {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';  
        proxy_set_header Host $host; 
        proxy_cache_bypass $http_upgrade;
        
        // 这条指令用于处理 Vue Router 的前端路由。如果找不到请求的文件，Nginx 将尝试加载 `/bean/index.html`，从而交由 Vue Router 来处理该请求路径。
        try_files $uri $uri/ /bean/index.html;
	}
}

以下配置能正常打开页面，显示系统标题和浏览器icon，但是页面内容不能正常显示，会报错找不到js和css文件

server {
    location /bean/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';  
        proxy_set_header Host $host; 
        proxy_cache_bypass $http_upgrade;
        
        // 使用 alias 而不是 root,因为可以更加精确地映射路径,并避免内部重定向循环的问题。
        alias /var/www/vue-app/dist/; 
        index index.html;
        try_files $uri $uri/ /bean/index.html;
    }
}

通过查看 nginx 错误日志发现是因为前端工程文件地址问题，解决办法：将try_files $uri $uri/ /bean/index.html; 修改为try_files $uri $uri/ @rewrites;，再为静态资源单独设置一个 location 块，然后在nginx > html 下创建 bean 目录，然后把 assets 文件放进去便可。

server {
    location /bean/ {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';  
        proxy_set_header Host $host; 
        proxy_cache_bypass $http_upgrade;
        
        alias /var/www/vue-app/dist/; 
        index index.html;
        try_files $uri $uri/ @rewrites;
    }
    location @rewrites {
        rewrite ^/bean/(.*)$ /bean/index.html last; 
    }
}

建议使用第一种方法。以上，打开页面测试部署完成。如果大家有更好的方法可以分享学习～

大龄前端怎么卷起来？我来说说部署Express+Vue前后端项目

部署Express项目

Nginx 配置后端接口服务

部署 Vue 项目