前後端分離這個問題其實鬆哥和大家聊過很多了，上週鬆哥把自己的兩個開源專案部署在伺服器上以幫助大家可以快速線上預覽（喜大普奔，兩個開源的 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 乾貨！

相關推薦