前后端分离这个问题实在松哥和大家聊过很多了，上周松哥把自己的两个开源项目支配在做事器上以帮助大家可以快速在线预览（喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了），然后群里就有小伙伴想让松哥来聊聊如何结合 Nginx 来支配前后端分离项目？本日我们就来聊一聊这个话题。
不得不说的跨域
很多人对前后端分离支配感到困惑，实在紧张是困惑跨域问题怎么办理。由于前后端分离项目在开拓的时候，前端通过 nodejs 来运行，须要一个单独的端口，后端通过 Tomcat 或者 Jetty 来运行，也须要端口，两个不同的端口，就造成了跨域。
但是松哥之前多次和大家聊过这个问题，这种跨域并不是我们传统开拓中真正的跨域，这个所谓的跨域只在开拓环境中存在，生产环境下就不存在这个跨域问题了。以是我们不能按照以往的通过 JSONP 或者 CORS 之类的手段来办理这个跨域问题。
前后端分离开拓中，前端为了能够仿照出测试数据，并且仿照出要求，一样平常须要借助于 nodejs 来运行，这是开拓时候的状态，开拓时候的配置大家可以参考这篇文章：
前后端分离历险记等开拓完成后，我们会对前端项目编译打包，编译打包完成之后，就只剩下一堆 js、css 以及 html 文件了，我们把这些编译打包后的文件拷贝到后端项目中，这样再去运行就不存在跨域问题了（例如将编译打包后的静态文件拷贝到 Spring Boot 项目的 src/main/resources/static 目录下）。这种办法我就不再多说了，相信大家都会，本日咱们紧张来看看如何结合 Nginx 来支配。
Nginx 大杀器
结合 Nginx 来支配前后端分离项目算是目前的主流方案。一来支配方便，二来通过动静分离也可以有效提高项目的运行效率。
大家知道我们项目中的资源包含动态资源和静态资源两种，个中：
动态资源便是那些须要经由容器处理的资源，例如 jsp、freemarker、各种接口等。静态资源则是那些不须要经由容器处理，收到客户端要求就可以直接返回的资源，像 js、css、html 以及各种格式的图片，都属于静态资源。将动静资源分开支配，可以有效提高静态资源的加载速率以及全体系统的运行效率。
在前后端分离项目支配中，我们用 Nginx 来做一个反向代理做事器，它既可以代理动态要求，也可以直接供应静态资源访问。我们来一起看下。建议大家先阅读松哥以前关于 Nginx 的一篇旧文，可以有效帮助大家理解后面的配置：
Nginx 极简入门教程！后端支配
后端接口的支配，紧张看项目的形式，如果便是普通的 SSM 项目，那就提前准备好 Tomcat ，在 Tomcat 中支配项目，如果是 Spring Boot 项目，可以通过命令直接启动 jar，如果是微做事项目，存在多个 jar 的话，可以结合 Docker 来支配（参考一键支配 Spring Boot 到远程 Docker 容器），无论是那种形式，对付我们 Java 工程师来说，这都不是问题，我相信这一步大家都能搞定。
后端项目可以在一个非 80 端口上支配，支配成功之后，由于这个后端项目只是供应接口，以是我们并不会直接去访问他。而是通过 Nginx 要求转发来访问这个后端接口。
松哥这里以我去年为一个律所的小程序为例，后端是一个 Spring Boot 工程，那么我可以通过 Docker 支配，也可以直接通过命令来启动，这里大略点，直接通过命令来启动 jar ，如下：
nohup java -jar jinlu.jar > vhr.log &复制代码
后端启动成功之后，我并不急着直接去访问后端，而是安装并且去配置一个 Nginx，通过 Nginx 来转发要求，Nginx 的基本先容与安装，大家可以参考（Nginx 极简入门教程！
），我这里就直接来说干系的配置了。
这里我们在 nginx.conf 中做出如下配置：
首先配置上游做事器：
upstream zqq.com{ server 127.0.0.1:9999 weight=2;}复制代码
在这里紧张是配置做事真个地址，如果做事端是集群化支配，那么这里就会有多个做事端地址，然后可以通过权重或者 ip hash 等办法进行要求分发。
然后我们在 server 中配置转发规则：
location /jinlu/ { proxy_pass http://zqq.com; tcp_nodelay on; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}复制代码
这样配置完成后，假设我目前的域名是 javaboy.org，那么用户通过 http://www.javaboy.org/jinlu/ 格式的地址就可以访问到我做事真个接口。
前端支配
以 Vue 为例，如果是 SPA 运用，项目打包之后，便是一个 index.html 还有几个 js、css、images 以及 fonts ，这些都是静态文件，我们将静态文件首先上传到做事器，然后在 nginx.conf 中配置静态资源访问，详细配置如下：
location ~ .\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) { root /usr/local/nginx/html/;#所有静态文件直接读取硬盘 expires 30d; #缓存30天} 复制代码
当然我这里是按照资源类型来拦截的，即后缀为 js、css、ico 等的文件，统统都不进行要求分发，直接从本地的 /usr/local/nginx/html/ 目录下读取并返回到前端（我们须要将静态资源文件上传到 /usr/local/nginx/html/ 目录下）。
如果我们的做事器上支配了多个项目，这种写法就不太得当，由于多个项目的前端静态文件肯定要分门别类，各自放好的，这个时候我们一样可以通过路径来拦截，配置如下：
location /jinlu-admin/ { root /usr/local/nginx/html/jinlu-admin/;#所有静态文件直接读取硬盘 expires 30d; #缓存30天} 复制代码
这样，要求路径是 /jinlu-admin/ 格式的要求，则不会进行要求分发，而是直接从本机的 /usr/local/nginx/html/jinlu-admin/ 目录下返回干系资源。采取这方办法配置静态资源，我们就可以支配多个项目了，多个项目的支配办法和上面的一样。
这样支配完成之后，假设我的域名是 javaboy.org ，那么用户通过 http://www.javaboy.org/jinlu-admin/ 格式的要求就可以访问到前端资源了。
