转自https://www.cnblogs.com/moveofgod/p/12363544.html

写得简洁明了。

------

例如 vue ， 这种前后端分离的框架如何部署

1. 前后端一起部署, 前端打包成静态文件后, copy 到后端项目中，然后部署后端项目。

　　如果选择这种方式, 需要把dist文件夹里的内容, 一样的 copy 到 resource/static 文件夹下.

　　这种静态资源不会被 spring security 拦截. 所以这里需要配置一下, 让它不拦截. 

　　然后, 需要给项目整体打包. 现在的 springBoot 可以打成 jar 包, 然后把 jar 包上传到服务器, java -jar xxx.jar 就可以了.

　　这样就可以使用浏览器来访问了. 这种部署方案不存在跨域问题.

2. 前后端分别部署，前端使用 Nginx 部署, 后端直接运行 jar.

　　后端一样需要独立的部署 jar 包, 跟上边类似, 只是不需要copy前端的静态资源了.

　　nginx 可以通过一个配置，解决跨域问题:

　　nginx 监听 80端口, 

　　　　如果你访问的地址是 /, 就转发到端口是8081, 对于浏览器来说, 它不知道8081的事情, 浏览器只是访问了80这个端口

　　　　如果你访问的是静态资源, 比如利用正则表达式判断你访问的是不是类似 jpg|css|js|html 等等, 如果是, 就访问nginx server本地的目录dist

　　实验:

　　　　首先, 访问登录页面, 是80端口, 首先找到 nginx, 发现是静态资源, nginx 直接通过访问server本地的 dist, 给与返回.

　　　　当用户点登录时, 实际上还是访问的nginx, 还是80端口, 只不过这个时候nginx 判断出来不是静态页面了, 然后nginx 帮我们把请求转给后台jar了

　　　　所以, 因为访问的都是 80 端口, 但是也不跨域.

　　　　

Comment: 无论是哪种部署, 都需要前端 npm run build 来打包前端程序为 dist 文件夹的静态文件.