本文章用于说明，一个完整的前后端项目，如何部署到服务器上，供用户访问。
一、背景
前端：VUE3 + Vite
后端：SpringBoot3 + Maven3.8.3 + jdk17
服务器：Windows操作系统
数据库：MySQL5.7
二、基础环境搭建（开发环境，用于打包操作）
1.安装jdk17，并配置环境变量。
2.安装Maven3.8.3，并配置环境变量。
三、基础环境搭建（服务器环境，用于发布操作）
安装jdk17，并配置环境变量。
安装MySQL5.7数据库
四、打包
1.前端：使用 npm run build 命令，对项目进行打包，最终会生成一个名称为dist的目录，这个目录中的内容，就是整个项目打包的产物。
2.后端：使用 mvn clean package -Dmaven.test.skip=true 命令，利用maven对程序进行打包，最终的产物是jar文件。
五、发布
1.将打包的产物（dist整个目录和jar文件），一起上传到服务器某个目录下面。
2.下载nginx，并修改nginx配置
下面是完整的nginx配置，这个配置需要根据自己的实际情况进行修改的，不是直接拿来就能用。
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8888; # 只监听8888端口
server_name localhost; # 没有域名可以写localhost或_
# gzip压缩（可选，提升访问速度）
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 3;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
# 前端静态资源
location / {
alias C:/Sunland_SettleCenter/dist/;
try_files $uri $uri/ /index.html;
index index.html;
expires -1;
}
# 后端api反向代理
location /smart-admin-api/ {
proxy_pass http://localhost:1024/smart-admin-api/;
proxy_redirect off;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
expires -1;
add_header Set-Cookie "Path=/; HttpOnly";
add_header X-Content-Type-Options "nosniff";
add_header X-XSS-Protection "1; mode=block";
# 本地局域网可不设置X-Frame-Options和Content-Security-Policy
}
}
}
nginx配置中，主要关注的地方有这几个：
listen 8888; 这个表示用户访问的端口为8888location /smart-admin-api/ 表示前端发送到后端的请求路径中，会统一带上smart-admin-api路径（vite中进行配置），当nginx发现请求路径中有smart-admin-api字符串时，就会把请求转发到后端服务进行处理，后端服务处理完成，就把结果返回到前端
3.启动nginx服务
双击exe程序，启动服务，服务启动后，前端应用就可以访问了（注意：此时后端应用还没有启动）。
nginx其他操作：
重载配置（修改配置文件后，需要重新加载最新配置）
nginx -s reload
停止nginx服务
nginx -s stop
4.启动后端应用
简单的启动方式是在Windows命令窗口中，执行 java -jar XXX.jar 命令来启动jar文件。
这种方式有个很大的弊端，就是Windows的命令窗口在执行完毕启动命令后，窗口不能关闭，窗口一旦关闭，程序就自动停止运行，所以这个方式不够友好。
解决方法就是把启动命令进行服务化操作，最终直接在Windows的服务里面启动或者停止程序的运行，还可以设置开机自启等操作，方便管理。
这是使用到一个软件（WinSW），软件的介绍和完整的操作步骤，参见文章：
WinSW将执行文件服务化-CSDN博客
服务安装完毕，启动成功的话，如下图所示：
注意：如果jar文件需要更新，操作步骤为：停止服务 ---》 更新jar文件 ---》 启动服务
访问系统
通过以上操作，前端应用和后端应用就部署完成了，通过浏览器就可以对系统进行访问，端口为8888
如要使用Jenkins自动化部署，参考文章：
前后端分离项目的完整部署（Jenkins自动化部署）-CSDN博客