springboot+vue2前后端分离 nginx代理 服务器部署

说明：前后端分离，且前后端部署在同一台服务器上，nginx代理解决跨域问题​​​​​​​​​​​​​​

目录

参考链接。

一、准备服务器和域名。

 二、编写前后端代码。（参考链接1）

三、服务器配置环境。

四、打包前端项目（打包前后端项目没有先后顺序）

五、打包后端项目（打包前后端项目没有先后顺序）

六、在服务器部署前后端

附：nginx.conf完整内容。（入门nginx请看参考链接3视频）

---

参考链接。

1、前后端代码：从0开始带你手撸一套SpringBoot+Vue后台管理系统（2022年最新版）_哔哩哔哩_bilibili

2、上线部署：项目下载、运行、配置、构建、打包、部署：全步骤实战演示。前后端分离式项目实战部署（含nginx、tomcat部署配置）视频教程_哔哩哔哩_bilibili

若依项目源码地址：RuoYi-App: RuoYi APP 移动端框架，基于uniapp+uniui封装的一套基础模版，支持H5、APP、微信小程序、支付宝小程序等，实现了与RuoYi-Vue、RuoYi-Cloud后台完美对接。

3、nginx入门：07、Nginx实战及总结_哔哩哔哩_bilibili

一、准备服务器和域名。

域名可能带外部端口号，在管理服务器的软件上，开放应用内部端口号。对于nginx代理方式，默认内部端口号为80。服务器配置相关参数如下图所示。

   后续需要使用的是内部服务器ip、内部端口号。

 二、编写前后端代码。（参考链接1）

编写至用户登录完成部分。

三、服务器配置环境。

1、安装数据库mysql，安装过程需注意以下几点，其它按默认即可。

Authentication Method建议选择use legacy authentication method，支持5.x。

Accounts and Roles自己定义数据库密码即可，项目设置中会用到这个密码，不匹配无法连接数据库。

2、安装java。下载地址：https://www.java.com/zh-CN/

只安装jdk即可，jre在开发阶段用，部署阶段不需要。下载安装后，通过命令行中输入：java -version测试是否安装、配置成功。若没有版本信息，则需要将java添加到环境变量。

3、安装nginx。下载地址：nginx: download

选择Stable version下载。解压后测试是否可以正常使用，通过命令行方式启动：

打开命令行，进入nginx解压的目录下（有nginx.exe），输入命令：start nginx.exe。命令行窗口会闪一下，没有任何输出。

打开网页输入网址：localhost或localhost:80，访问后显示为nginx欢迎界面，即可以正常使用。localhost默认端口为80，nginx默认也是从80访问，所以可以省略不写。

nginx基本使用方法请查看参考链接3。常用命令（windows）：

启动nginx：start nginx

重新加载nginx ：nginx.exe -s reload

停止nginx：nginx.exe -s quit，安全退出

停止nginx：nginx.exe -s stop，强制退出

4、安装编辑工具nodepad++。用于修改相关配置文件。

下载地址：https://github.com/notepad-plus-plus/notepad-plus-plus/releases

四、打包前端项目（打包前后端项目没有先后顺序）

按照参考链接1编写前后端代码时，前端代码需做以下修改，修改参考参考链接2项目源码。

（1）在项目文件夹下新建文件：new—>file，文件名为.env.production，文件内输入带代码：VUE_APP_BASE_API = '/prod-api' ，引号内的字段可以自己指定，在nginx配置文件中代理后端。

（2）找到request.js文件，将axios.create方法中的baseURL设置为baseURL:process.env.VUE_APP_BASE_API,，即调用（1）中建立的字段。request.js路径：src—>utils—>request.js。

至此前端修改完成，在idea下方terminal窗口输入打包命令：npm run build，没有报错的情况下，在项目文件夹中生成了一个dist的文件，这就是打包好的前端项目。之后直接复制到服务器使用即可。

五、打包后端项目（打包前后端项目没有先后顺序）

按照参考链接1编写前后端代码时，后端代码需做以下调整，修改参考参考链接2项目源码。

（1）配置数据库。打开application.yml文件，修改datasource的用户名和密码，这里的配置和一开始在服务器配置mysql的保持一致。application.yml文件路径：src—>main—>resource—>  application.yml。

（2）打开文件CorsConfig.java，将访问源地址设置修改为：

corsConfiguration.addAllowedOrigin("*") 

至此后端代码修改完成。在idea右侧边框上，找到maven，在项目名称下，选择Lifecycle，点击package进行打包。打包后在项目文件夹的target文件夹内生成对应jar包，此即为打包好的后端程序。

六、在服务器部署前后端

（1）将前端文件复制到服务器nginx目录下的html文件中，后端复制到服务器任何一个地方。

（2）用nodepad++修改nginx配置文件nginx.conf。（完整配置内容见附）

nginx.conf中listen为80的Server下的root，修改为html/dist;，这个路径与自己前端项目包名（dist）一致，即nginx默认从html/dist;目录下读取index.html。

在上面修改root的localtion块中，在最后一行添加如下配置：try_files $uri $uri/ /index.html;，防止刷新后网页失效。

nginx.conf中listen为80的Server下，添加如下代码，配置后端端口。

location /prod-api/ { # prod-api即为自己在前端代码的.env.production设置的字段
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;	
			proxy_pass http://192.xxx.xxx.xxx:8080/; # 内部服务器ip，8080为后端端口，
                                                  # 在后端application.yml的server处。
}

（3）运行前端。按照之前测试nginx是否正常运行的方法，运行nginx。

启动nginx ，输入命令start nginx.exe，再输入nginx.exe -s reload，在网页中输入服务器的域名进行访问，可以显示前端页面，由于还未启动后端，因此无法登录进界面。

nginx.exe -s reload命令用于更新nginx配置文件，每次修改完nginx.conf文件后，都需要执行这个命令，在执行命令前要保证nginx在运行，否则会报错。

终止nginx运行的命令为：nginx.exe -s quit，安装全退出。每次执行这个命令后请先等待几秒钟再执行启动命令，否则会退出失败，开启多个nginx服务，并导致新的配置无法正常运行，服务运行状态可以在任务管理器中查看。

（4）运行后端。另建一个命令行窗口，输入命令：java -jar 后端jar文件完整路径，形如java -jar d:/后端文件夹/springboot.jar。无报错，即可以在前端登录进界面。

附：nginx.conf完整内容。（入门nginx请看参考链接3视频）

#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;

	#upstream zjjc.cctegxr.com:8030 {
	#	server 127.0.0.1:80;
	#}
	

    server {
        listen       80;
        server_name  locahost;
		

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
			root   html/dist;
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;

		}
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;		
			proxy_pass http://192.xxx.xxx.xxx:8080/;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}