前后端分离项目的完整部署（人工部署）-EW帮帮网

本文章用于说明，一个完整的前后端项目，如何部署到服务器上，供用户访问。

一、背景

前端：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; 这个表示用户访问的端口为8888
location /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

前后端分离项目的完整部署（人工部署）