例如 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 文件夹的静态文件.