例如 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 文件夾的靜態文件.