[TOC] > 具体可以查看我的《React HandBook》-部署章节 # 简介 在开发中大型的JavaEE项目时，前后端分离的框架逐渐成为业界的主流，传统的单机部署前后端在同一个项目中的工程项目越来越少。这类JavaWeb项目的后端通常都采用微服务的架构，后端会被分解为诸多个小项目，然后使用dubbo+zookeeper或者springCloud来构建微服务，前端则会是一个单独的项目，前台的请求通过微服务来调用。但是，不同与传统的web项目，这类前后端分离的项目如何在开发中部署和运行呢？ ## 前后端的工作 前端的工作：实现整一个前端页面以及交互逻辑，以及利用ajax与nodejs服务器（中间层)交互。 后端的工作：提供API接口，利用redis来管理session,与数据库交互。 ## RESTful Api和Json搭建前后台交互  实现前后端分离，可以让前后端独立开发、独立部署、独立单测，双方通过JSON进行数据交互。 对于前端开发人员来说，不用每次调试都需要启动或配置Java/Tomcat运行环境；对于后端开发人员来说 ，也不用在需要往JSP页面注入数据。 # 如何在开发时部署和运行前后端分离的JavaWeb项目 当前后端分离时，后端项目一定会被加载到tomcat的webapp目录下面，但是前端的资源院该如何被访问到呢？这里以tomcat这个中间件为例，探讨在开发这类项目的时候，如何让前后端分离的项目部署并且运行起来，即后端项目部署在tomcat之后如何在运行时访问静态资源（非上线部署）。 主要有两种方案： 1. 在本地通过Nginx、Node来处理这些静态资源。 2. 将静态资源统一放入一个javaweb应用中，并将自动生成的war包随后端项目一期丢入tomcat。 下面详细介绍： ## 一、使用 Nginx 来访问静态资源。 在本地安装 nginx 并且修改`nginx.conf`，修改相关配置，将 web 访问的端口的资源进行更改，配置如下： ~~~ ... server { listen 80; server_name localhost; charset utf-8; #access_log logs/host.access.log main; location / { proxy_pass http://tomcat_pool; proxy_redirect off; proxy_set_header HOST $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 10m; client_body_buffer_size 128k; proxy_connect_timeout 90; proxy_send_timeout 90; proxy_read_timeout 90; proxy_buffer_size 4k; proxy_buffers 4 32k; proxy_busy_buffers_size 64k; proxy_temp_file_write_size 64k; } location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$ { root D:\Workspaces\esop-html; index index.html; } ... ~~~ listen对象改为你本地的tomcat访问端口，最下面location中的root改为你前端项目中静态资源的位置，这样就可以实现只部署后端的项目就能访问前端的页面了。 ## 二、将前端项目转换为动态的web项目，随后端项目一起丢入tomcat 这个方案省去了在本地安装和配置nginx，但是也只适用于开发阶段项目的部署运行和调试，**真正在生产环境通常前后端项目会部署在不同的服务器**。 * 如果是Intellij Idea,在导入前端项目之后，右键项目 add framework support --> web application，这时将会把前端项目转换为一个javaweb项目，然后将静态资源放在生成的web目录下即可。 * 如果是eclipse，可以新建一个javaweb项目然后将静态资源放入web或者webcontent目录下，或者直接先导入前端项目，然后通过 project facts 将项目转换为dynamic web项目并勾选 js等相关配置。 然后，运行项目时把后端的war包和前端的war包一同添加到 deployment中运行即可。 # node部署前端 通过 nginx 来部署前端代码，可以帮助前端实现以下基本需求： 1. 请求转发，解决请求跨域的问题 2. gzip 请求压缩 网站开启 gzip 压缩，不仅能够节省带宽，也能够快速响应用户的访问 # node部署前端 为什么要引入nodejs？ 1. 我觉得引入nodejs主要是为了分层开发，职责划分，nodejs作为前端服务器，由前端开发人员负责，前端开发人员不需要知道java后台是如何实现的，也不需要知道API接口是如何实现的，我们只需要关心我们前端的开发工作，并且管理好nodejs前端服务器，而后台开发人员也不需要考虑如何前端是如何部署的，他只需要做好自己擅长的部分，提供好API接口就可以； 2. nodejs本身有着独特的异步、非阻塞I/O的特点，这也就意味着他特别适合I/O密集型操作，在处理并发量比较大的请求上能力比较强，因此，利用它来充当前端服务器，向客户端提供静态文件以及响应客户端的请求，我觉得这是一个很不错的选择。 前端服务器如何部署 nodejs前端服务器的职责 1、作为静态文件服务器，当用户访问网站的时候，将index.html以及其引入的js、css、fonts以及图片返回给用户 2、负责将客户端发来的ajax请求转发给后台服务器 其实前端服务器的部署工作是算比较简单的，具体有以下两个点: 1、将开发完的前端代码，利用webpack打包成静态压缩文件 2、在服务器上，利用pm2负载均衡器来执行以下的代码来开启服务器: # 部署到不同的站点 前端站点和后端API部署到不同的站点，就会产生跨域问题。 # 跨域处理 前端站点和后端API布署到不同的站点，就会产生跨域问题。 什么是同源策略？ 同源是域名，协议，端口相同。也就是说如果不同，则是非同源。 同源策略是浏览器的一基本的安全功能，非同源访问，浏览器会进行拒绝。 HMTL上面的SRC地址，你可以指定任何URL，表单提交，你可以提交到任何URL。 但是，你如果使用AJAX技术，就会受到同源策略的影响，拒绝提交。 现代浏览器几乎都支持跨域资源请求的一种方式。这种技术叫CORS（跨域资源共享） CORS 跨域分两种： 1. 简单跨域。 2. 复杂跨域。 解决方案：HTTP输出标头增加如何节点 注意有前端框架版本，对安全要求较高，不能使用通配符*，要指定跨域域名。 ``` Access-Control-Allow-Origin：* ``` 下面节点可填，可不填，根据实际情况，自行决定。 ``` Access-Control-Allow-Methods：GET,POST,OPTIONS Access-Control-Allow-Credentials：true Access-Control-Allow-Headers：根据请求头的内容，填写 ``` 注意：复杂跨域比要简单跨域麻烦，更花费性能。因为复杂跨域在请求之前会先发一个options预请求，根据响应判断服务器是否支持跨域。也就是说，实际上请求了两次。 # Cookies作用域 不同的站点，如何通用Cookies? 一般情况只需把 cookies 作用域设置顶级域名，浏览器会自动把 cookies 在访问子域名的时候捎上去。 示例，访问二级域名时候，cookies 默认会被传送过去。 ~~~ 顶级域名:baidul.com cookies作用域：.baidu.com 二级域名： www.baidu.com api.baidu.com ~~~ # 其他 这个视你们项目的实际情况而定。我所了解的有两种情况： 项目部署在云服务器上：前后端可以分开部署，各自的发布流程互不影响，可以通过一些手段（比如git的CI）实现自动化部署。但是前后端可能不在同一个域上，要做跨域处理。 项目要打成安装包部署在指定的机器（一般是内网服务器）上：前后端代码最终都要打在一个安装包下面，所以主流的做法就是把前端生成的静态资源包放到后端指定的静态资源目录，这一过程可能就是你现在的场景。这一过程能否实现自动化要看自己了，目前没看到有类似的解决方案。这种方式有个好处就是前后端在同一个域下，不存在跨域的问题。 # 参考 [如何在开发时部署和运行前后端分离的JavaWeb项目](https://www.cnblogs.com/waliwaliwa/p/7222258.html)