linux系统基于Nginx实现前后端分离项目部署(SpringBoot+Vue2)

在linux中先安装好前面的JDK、Tomact、MySql、Redis、Nginx

注意Nginx成功需要访问到

先打包前端项目vue

npm run build

可以看到在项目中生成了一个目录>dist

里面就是前端打包好的项目文件

上传文件到Nginx目录中： /usr/local/nginx

改变配置：

进入Nginx目录：cd  /usr/local/nginx

改变配置信息： vi  conf/nginx.conf

需要关闭Nginx后重启生效:

查看nginx： ps -ef|grep nginx

使用：kill -g  进程号   删除进程

启动 nginx，命令:

进入到 etc 目录

命令：cd /etc

命令：nginx

访问如下图，说明成功

后端项目部署

1 将后端项目 jar 包上传至服务器目录：/usr/local/nginx-demo，如下所示：

后端项目 jar 包：《演示示例 1：项目素材部署》中提供

2 使用 xshell 连接服务器，进入目录：/usr/local/nginx-demo

命令：cd /usr/local/nginx-demo/

3 启动后端项目（注意：要开放 8080 端口）

命令：nohup java -jar nginx-demo-0.0.1-SNAPSHOT.jar >debug.log 2>&1 &

4 查看日志

命令：tail -f debug.log

页5 使用 Postman 测试接口，接口地址：http://127.0.0.1:8080/nginx-demo/html/getTestInfo1

如下所示即后端项目部署成功。

注意：接口地址中的 127.0.0.1 应更换为部署后端项目所在的服务器 IP 地址

使用 Nginx 反向代理后端服务

1 进入到 Nginx 的配置目录：/usr/local/nginx/conf/

注意：服务器中的 Nginx 安装目录如果不是”/usr/local/nginx”，请更换相应的安装目录，以

下配置都是基于”/usr/local/nginx”目录。

命令：cd /usr/local/nginx/conf/

2 修改 Nginx 的配置文件

命令：vi nginx.conf

修改后的配置文件详解：

① "listen 80"：指定 Nginx 监听所有 IP 地址且端口号为 80 的请求。

② "location /nginx-demo/"：反向代理后端服务。当 URL 路径匹配该 location 时，就会

反向代理到"http://127.0.0.1:8080"地址上，然后调用后端服务中对应的接口

注意：配置文件中 127.0.0.1 应更换为部署后端项目所在的服务器 IP 地址

配置文件如下所示

    location /nginx-demo/ {

      proxy_pass http://127.0.0.1:8080;

    }

3 启动 Nginx

命令：/usr/local/nginx/sbin/nginx

4 使用 Postman 测试接口，接口地址：http://127.0.0.1/nginx-demo/html/getTestInfo127.

示即反向代理后端服务成功。

注意：127.0.0.1 应更换为部署 Nginx 所在的服务器 IP 地址

四、前端项目部署

1 前端项目上传至服务器目录：/usr/local/nginx/html。html 目录是 Nginx 默认解析的静态文

件目录。如下所示：

2 前端项目源码在《演示示例 1：项目素材部署》中提供，home.js 文件如下所示：

注意：127.0.0.1 应更换为部署后端项目所在的服务器 IP 地址

更改后

页3 进入到 Nginx 的配置目录：/usr/local/nginx/conf/

命令：cd /usr/local/nginx/conf/

4 修改 Nginx 的配置文件

命令：vi nginx.conf

修改后的配置文件详解：

"location /test/"：配置前端项目。当 URL 路径匹配该 location 时，会执行该 location 下

的代码。如果访问"http://127.0.0.1/test/"，Nginx 服务器就会指向根目录下的

html/test/home.html 页面。

注意：配置文件中 127.0.0.1 应更换为部署后端项目所在的服务器 IP 地址

配置文件如下所示：

    server {      

           listen       80;     

          server_name  localhost;

          location / {   

                       root   dist; 

                      index  index.html index.htm;

                        }

         location /test {           

                alias   /usr/local/nginx/test;

                index  home.html;

             }

        location /nginx-demo/ {

                proxy_pass  http://127.0.0.1:8080;

             }

       error_page   500 502 503 504  /50x.html;

              location = /50x.html {

            root   html;

        }

      }

5 重启 nginx

命令：/usr/local/nginx/sbin/nginx -s stop

命令：/usr/local/nginx/sbin/nginx

6 打开浏览器，访问地址：http://127.0.0.1/test/，如下所示即前端项目部署成功：

注意：127.0.0.1 应更换为安装 Nginx 的服务器地址

前段会报错，主要浏览器的安全机制：

假如小明 现在在A网站浏览网页

黑客小红往A网站的网站内容中注入了一些非法内容(代码，获取用户的信息，并且将数据提交至小红的服务器)

跨域安全策略: A->数据请求的地址不属于A网站而是B网站的，这时浏览器就禁止此请求完成

打开项目源码，先修改配置yml

我们前面使用的是yml文件，现在我们使用dev

先把数据库上传到你的linux中mysql去

改配置信息

打包项目

在打包项目

上传到服务器

去启动我们jar包

进入目录：cd /usr/local/est

命令：nohup java -jar est-web-0.0.1-SNAPSHOT.jar >debug.log 2>&1 &

查看日志：tail -f debug.log

测试没有问题：

配置反向代理：

   

          location /api {

                 proxy_set_header  Host  $host;

                 proxy_set_header  X-Real-IP $remote_addr;

                 proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;

                 proxy_pass  http://192.168.74.124:8088/est/api;

           }

重启 nginx

命令：/usr/local/nginx/sbin/nginx -s stop

命令：/usr/local/nginx/sbin/nginx