幾個月前，公司架構優化，首先就是前后端分離。
所謂前后端分離，就是在傳統的前后端代碼都在一個項目里的基礎上，將前后端代碼抽離，把前端代碼從后端項目了分離出來，前后端開發人員各自在自己的項目里開發。
為什么要前后端分離？
隨着項目越做越大，功能模塊越來越多，代碼量越來越多，前后端代碼都糅雜在一個項目里，前后端開發人員幾十個，代碼提交次數多而雜，項目變得很臃腫，代碼維護人員的工作變得難做，此時亟待解決此問題，把前后端代碼分離成兩個項目，前后端開發人員各自維護自己的項目，使項目輕量化，便於維護。
前后端分離后帶來的問題有哪些呢？
1、跨域。前后端分離后，勢必各自部署，那么前后端就會存在跨域的問題。
2、前端項目部署方式。前后端各自部署，后端好說，繼續用原來的方式部署就行了，前端怎么部署？
3、前后端怎么聯調？
帶着這3個問題，自然而然的就想到使用nginx做反向代理。
nginx [engine x]是一個HTTP和反向代理服務器，一個郵件代理服務器和一個通用的TCP / UDP代理服務器
我們線上用的是 Nginx ，分離后我們本地開發時有很多同事，還是使用原來的老方式， 把前端代碼復制到項目里跑，這樣太笨重。所以我就自己研究了一下 nginx ，配置好打好包分享給其他同事，在公司同事間推廣。
nginx做前后端分離具體怎么使用的呢？下面來說一下。
首先我們在Windows上搞好，下載nginx，官網[http://nginx.org/](http://nginx.org/)，
打開后可以看到目前最新版本是1.17.2
找一個版本下載后放到自己喜歡的目錄解壓就行了。
然后打開解壓后的目錄，找到conf目錄進去找到nginx.conf文件，文本方式打開。
這個就是nginx的配置文件，我們需要修改這個文件，以適用於我們的需要。
這里只截取了配置文件的一部分，這部分是關鍵。
解釋一下，在http模塊里，有兩個子模塊，upstream 和 server 。
upstream 模塊配置的是服務端的（集群）地址，eroly_server 是 upstream 的名稱，server 是服務器地址，后跟服務的ip:port，可以寫多個，也就是服務器集群地址。
server 模塊相當於使用Nginx做靜態服務器，配置靜態資源的一些信息，使其能夠被外部訪問。listen 是監聽的端口，server_name 是服務器ip，location 模塊主要配置資源的地址 location 后面跟的是一個正則表達式表示符合此正則的請求被路由到該模塊配置的資源地址。可以配置多個。其中，location 模塊中的 root 這里我配置的靜態資源的地址，當請求包含 /eroly/（我的項目根地址）時其實訪問的是我本地 D盤下的 eroly_static 目錄下的對應的文件。例如訪問http://localhost/eroly/login/index.html時，其實 nginx 會根據配置信息 從上到下去匹配你配置的 location ，此時將會匹配到 location /eroly/ 這個，那么其實真正訪問的是 D:/eroly_static/eroly/login/index.html。
root 下面一行被注釋掉的是什么意思？rewrite 表示重定向，假如此時我的D盤eroly_static目錄下沒有 eroly 這一層，就直接是 D:/eroly_static/login/index.html 少一層目錄（可能前端項目沒有這個目錄，所以從版本管理工具上下載下來就沒有。但是后端服務根目錄是這個，前端訪問的時候需要加上，如果手動添加的話，很麻煩又不能提交，所以用這個指令就很好的解決了這個尷尬的問題），我們就可以用這個指令配合 root 使用。
至於下面這個location 配置的就是服務端的了，假如服務端接口都是 /eroly/api/開頭的，那么前端訪問后端接口時，就會走這個location ，關鍵的是 proxy_pass 這個屬性，你看后面跟的是 http://eroly_server/ 就是 upstream 的名字。其他字段的含義這里不多說了，可以自行了解。
http { upstream eroly_server{ server localhost:8080; } server { listen 8091; server_name localhost; #static location /eroly/ { root D:/eroly_static; #rewrite ^/eroly/(.*?)$ /$1 break; } #server location /eroly/api { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_pass http://eroly_server/; proxy_redirect off; } } }
這里只是簡單的介紹下 Nginx 用於前后端分離，作為前端部署服務器的簡單用法，實際 Nginx 的應用非常強大。