使用 Nginx 部署先後端分離項目，解決跨域問題

先後端分離這個問題其實鬆哥和你們聊過不少了，上週鬆哥把本身的兩個開源項目部署在服務器上以幫助你們能夠快速在線預覽（喜大普奔，兩個開源的 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/**
格式的請求就能夠訪問到前端資源了。

此時你們發現，前端的靜態資源和後端的接口如今處於同一個域之中了，這樣就不存在跨域問題，因此我一開始基說不必用 JSONP 或者 CORS 去解決跨域。特殊狀況可能須要在 nginx 中配置跨域，這個鬆哥之後再和你們細聊~​

好了，不知道小夥伴有沒有看懂呢？有問題歡迎留言討論。

關注公衆號【江南一點雨】，專一於 Spring Boot+微服務以及先後端分離等全棧技術，按期視頻教程分享，關注後回覆 Java ，領取鬆哥爲你精心準備的 Java 乾貨！