如何进行前后端分离部署

从来没有部署过
前端是Vue项目用了axios，后端springboot项目和mybatise，数据库是mysql，然后想要迁移部署到服务器上
有没有相关的教程呢，我找了一些有说用tomcat和nignx，总归有点懵。
另外有一个问题，前后端代码中很多地方我写了绝对路径保存文件、图片到本地电脑，部署之前改如何修改呢，部分绝对路径如下

public String StoreCollectPhoto(MultipartFile file) throws Exception {
        String folder = "/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images";
        File imageFolder = new File(folder);
        File f = new File(imageFolder, StringUtils.getRandomString(6) + file.getOriginalFilename()
                .substring(file.getOriginalFilename().length() - 4));
        if (!f.getParentFile().exists())
            f.getParentFile().mkdirs();
        try {
            file.transferTo(f);
            String imgURL = "http://localhost:8081/api/file/" + f.getName();
            return imgURL;
        } catch (IOException e) {
            e.printStackTrace();
            return "";
        }
    }

axios 是接口调用的形式，Spring Boot打包成一个可以启动的Jar包之后用 nohup java -jar + 报名的方式启动起来。然后Vue的话你使用npm run build 的方式打包成dist的文件夹。用Nginx将这个dist的目录代理出来浏览器能访问到对应的页面。

调用的话由于是axios，所以当你的Spring Boot启动之后，如果两个东西在同一个服务器上，可以使用localhost的方式进行调用，如果是两个服务器的话可以使用域名或者IP的方式进行调用。

在如今的SpringBoot微服务项目中，前后端分离已成为业界标准使用方式，通过使用nginx等代理方式有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多个客户展现端，例如：web端，安卓app，IOSapp，微信小程序等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

img


上图是简单的分布式微服务开发及前后端分离的示意图。展现层也就是所谓的前端（客户可直观看到的），比如电商项目前端包含：app（安卓和IOS）、微信小程序、PC商城、Web后台。后端是整个项目的核心，也就是系列项目中讲的内容，后端用Springboot+Dubbo实现分布式开发微服务落地，服务实现层的每一个服务都是一个独立部署的应用，并提供服务（Dubbo的提供者），接口层根据前端的请求，然后找对应的服务提供者消费服务。

在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，各自有各自的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。前端（Web项目）分离处理，都是从原先的JSP转成了Html静态页面。

Web项目部署容器的选取

目前常用的部署Web项目的容器用Tomcat、Apache、Nginx等，那我们前后端分离后的前端Html静态项目到底部署在那个应用容器呢？我们先看看这几个应用容器的区别。

Nginx,Apache,Tomcat的区别：

Nginx常用做静态内容服务和代理服务器，直接外来请求转发给后面的应用服务器（如tomcat）,而tomcat更多用来做一个应用容器。

1，Apache和nginx应该叫做HTTP Server，而tomcat是一个Application Server是一个Servlet/JSO应用的容器。

2，HTTP Server访问服务器上存储的资源（HTML文件，图片文件等），HTTP Server是中只是把服务器上的文件如实通过HTTP协议传输给客户端。

3，Application Server（应用服务器）往往是运行在HTTP Server的背后并执行应用，将动态的内容转化为静态的内容之后，通过HTTP Server分发到客户端。

4，Apache是同步多进程模型，一个连接对应一个进程，而nginx是一步的，多个连接（万级别）可以对应一个进程。nginx轻量级，抗并发，处理静态文件好。

根据对比，我们不难发现Nginx是较好的选择，它是由俄罗斯人（伊戈尔·赛索耶夫）开发的一款高性能的HTTP和反向代理web服务器。本身是轻量级、抗并发、能实现万级的连接等。同时它也是一个反向代理服务器。因此，我们不仅可以用它部署静态的html应用，还可以实现域名及访问地址的代理。

Nginx部署前端Web项目

Nginx的安装这里不做介绍，只说配置及部署相关内容。首先进入linux系统中Nginx的安装录的conf目录下，找到nginx.config配置文件，vim nginx.config进入编辑模式，在http下的server对应的同级编辑或添加如下代码，然后在root对应的目录下上传对应的html今天项目文件。注意：这里上传的如果是压缩包就需要解压，目录下要有index.html。
但我们的实际项目中，经常有多个Web端需要部署，如前面图中的例子，Web端有PC商城和Web后台系统，甚至可能更多，这些多个Web静态项目我们都放在nginx的html目录下的不同文件夹里，然后通过域名或ip+port代理到对应目录。下面就是多个Web项目在Nginx里的配置。

##商城Html页面
编辑完成后保存，并重启nginx服务 service nginx restart。

注：server_name 这里可配置域名或ip+端口号。

后端项目的部署

大家应该都知道，SpringBoot里集成了Tomcat容器，所有Springboot的项目部署，很是容易，根本不需要你还安装什么Tomcat、JBoss等应用。我们只需打成jar文件，上传到服务器，然后通过执行java -jar ***.jar &命令即可。

我录过一个简单的从零搭建服务器到部署项目的视频：
https://www.bilibili.com/video/BV1fS4y1z7cZ?share_source=copy_web

  1. 安装ningx
  2. 打包前端项目
  3. 打包springboot项目为jar包
  4. 上传前端和后端项目（如果后端是docker容器部署则需要通过DockerFile打包）
  5. 配置nginx代理：映射前端所在目录(如果就是要通过根目录访问则直接上传到nginx目录下的html目录中即可)，代理后端服务器（后端服务可以不代理，根据自己实际需求决定，如果代理了需要将前端中请求服务器的地址改为代理地址）
    例如：在不使用nginx下html默认目录映射前端时，将前端打包后的项目上传到目录——/webpage,那么nginx中的映射配置为：
location /webpage {
  alias /webpage/;
}

然后重启ningx后访问http://localhost/webpage就可以访问到你的前端项目了。当然webpage是可以自己随意配置的
后端项目映射配置如下：

location /server-name {
  proxy_pass http://127.0.0.1:8083/serverPath;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-Server $host;
}

这里代理的具体情况根据自己的实际项目决定，这样代理完以后重启nginx使配置生效，然后前端改变请求地址为：http://localhost/server-name,其实这样也能觉跨域问题，具体更多的nginx配置参数可以根据自己的需要上网搜索。
以上就是基本的部署过程。更多问题可以私聊

  1. 前后端都要部署到服务器。
  2. 我比较常用的就是nginx，前端部署nginx只需要将第三方框架打包后的dist文件夹改成html，将nginx默认的html文件夹替换掉，nginx会默认将80端口指向html文件夹的index.html。
  3. 后端部署你使用springboot的话可以打包jar包，启动在你需要启动的端口。
  4. 这时候要注意很重要的一点，你前后端要统一一下请求了，得解决跨域问题，因为你的前端代码在比如80端口，你的后端代码可能在3000端口，反正不一致。比如你的请求命令/api，然后你得把前端代码中的所有请求修改成/api开头，你得将这个命令用nginx转发到后端对应的端口上，也就意味着80端口上的/api请求都是转发到3000端口，就解决了。
  5. 静态的文件路径的话，同样也可以在某个端口上暴露出来，然后就可以通过服务器域名+端口的形式访问到你的静态文件，比如某个图片，到时候无论是你在代码中还是直接浏览器访问，都只要访问服务器域名+端口+文件名。

前后端分离部署采用前端静态资源部署在服务器，然后需要nginx充当我们的前端静态文件代理服务器，然后后端使用jar包方式部署，还需要nginx的反向代理解决跨域问题，因为前后端分离项目前后端运行在不同的端口上就需要解决跨域的问题，需要在nginx里进行配置代理转发。

1.在nginx.conf配置文件中配置：

在http {

}中添加：

upstream java.project{　　//搭集群用　
　　server 192.168.16.107:8081 weight=5;
　　server 192.168.16.108:8080 weight=3; 
}
server {
　　listen 80;
　　server_name 192.168.16.107;　　
　　location / {
　　　　proxy_pass http://java.project;
　　　　proxy_redirect default;
　　}
　　location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html) {
　　　　#所有静态文件直接读取硬盘
　　　　root /etc/dist/;
　　　　expires 30d; #缓存30天
　　}
}


fastdfs映射示例配置：
location ~/group1/M00 {
　　root /home/fastdfs/storage/data;　　　　fastdfs地址
　　ngx_fastdfs_module;
}

location / {
　　index index.html index.htm;
　　proxy_pass http://192.168.101.56:56010/;　　网关地址
}

location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html) {
　　root /root/dist/;
　　expires 30d;
}

// 访问的是80端口，nginx会将请求代理转发到8081端口，解决跨域问题即设置代理转发

注意点：

// 1.访问ip报403：需要将配置文件中user nginx;改为user root;

// 2.访问ip报404：原因是由于nginx装在了docker里面，nginx配置的访问静态资源是在宿主机的目录下，而nginx容器只会在容器目录下查找，所以会找不到资源，就会报404

解决方案：将存放静态资源的宿主机目录与容器目录进行挂载，即可将宿主机的目录同步到容器内部，这样就可以访问到资源了

命令：docker run -p 80:80 --name nginx -v /root/nginx:/etc/nginx -v /root/dist:/etc/dist --privileged=true nginx，前面-v挂载的是配置文件，后面-v挂载的是静态资源目录，容器中没有dist目录挂载后会自动生成。

2.在启动jar包的前提下访问192.168.16.107/index.html即可访问成功

下载个宝塔部署会方便里面有集成的工具上传代码就可以，路径获取根目录下的相对路径，文件命名感觉尽量不用中文为好

直接是绝对路径肯定得改代码的，不管部署方案是怎么样的都得改毫无疑问。
比如：String folder = "/Users/hjz/Documents/本科毕业设计/青藏科考/20210126测试/2020青藏科考滇藏线_07.23拷/images";，再比如：String imgURL = "http://localhost:8081/api/file/" + f.getName()，
因为这些代码都是硬编码写死到本地路径的，如果只是单纯要部署最终演示出来，你可以跑在本地用内网穿透演示就没这个问题。常见的内网穿透有frp、ngrck，了解一下吧

参考博客https://blog.csdn.net/hyh17808770899/article/details/118897399，后端使用命令，前端使用nginx

前端：收发JSON，跳转页面。
后端：收发JSON，处理业务。

前后端分离部署，其实就是两个Springboot项目，一个用于放后端代码，另一个用于装载前端的dist中的文件，启动两个服务，就可以了。至于你写死的路径，自己把这个路径映射出来(相当于一个代理)，你就可以隐藏你的真实路径，访问代理路径就可以了

https://gitee.com/mirrors/springboot-vue 这个项目可以学习哦