目標： 本文依賴自己的個人經驗，簡要介紹一下ReactJS+Tomcat的開發方式，經過團隊試用，覺得比較好。主要得益于ReactJS的開發方式和webpack工具的使用，結合強大的代理，實現了一個較為方便的小團隊開發環境。由于我是零基礎開始實驗這個方案，并得到了友人的幫助，其中遇到了不少坑，希望可以幫助到大家。 工具介紹： Webpack: Webpack可以使用webpack dev server實現熱替換和刷新，極大解放了前端開發人員的工作。通過前后端分離的開發方式，可以在年輕團隊中快速使用（所需要學習的成本較低）。 Ngnix/Aapache: 使用Ngnix/Aapache實現靜態文件和動態文件分流，可是較為方便的解耦前后端的關系，并可以協同迭代開發，實現小步快跑的開發模式。 Tomcat: Tomcat容器運行J2EE代碼，主要關注業務邏輯，我目前采用的時SPRingMVC+Spring+MyBatis+Shiro實現，由于部分使用了Shiro+jsp的權限訪問，因此頁面還是由JSP先加載，然后加載圖片，CSS和js等資源。 ReactJS: 前端框架，充分利用其組件的思想，可以加快頁面的開發速度和開發團隊的工作積累。 下圖為開發時的代理邏輯圖，不同的開發角色具有不同的選擇： 
通過上面邏輯圖的方式有利于實現前后端分離的開發模式，升級和部署也比較方便。 在開發團隊內部，建立一個測試服務器，把后端代碼部署在服務器上，后臺團隊升級時部署升級測試服務器的tomcat代碼，同時部署代理服務器和前端代碼，測試人員可以對測試服務器的程序進行測試。前端開發人員和手機App開發人員通過訪問測試服務器上的代理（Aapache/Nginx）端口，這樣前端/App開發人員就不需要關心后端的運行環境。 
注意：筆者在Windows10上面測試發現，Nginx+webpack-dev-server在Windows存在請求阻塞1分鐘的問題，而采用文件代理不存在問題，如果Windows運行webpack-dev-server, Ubuntu運行Nginx,就沒有這個問題。經過好幾天的折騰沒有找到原因，而采用Apache解決了Windows上這個代理問題。建議配置為：Windows采用Apache + Tomcat+Webpack，蘋果或者linux系統采用Nginx，或者都用Apache. Windows服務器部署建議采用2.4版本以上。
本文采用的目錄結構如下： 項目虛擬路徑是：/JFGJ 圖片虛擬路徑：/JFGJ/images/ css, js靜態文件虛擬路徑：/JFGJ/static webpack編譯后的目錄為 :[前端目錄]/build 1. 代理本地文件 Apache本地文件的代理需要3個指令才可以（采用代理時引入的復雜性）
Alias "/JFGJ/images" "D:/Intelligence Monitoring/JFGJ/web/images"<Directory "D:/Intelligence Monitoring/JFGJ/web/images"> Options Indexes FollowSymLinks AllowOverride None Require all granted</Directory>ProxyPass "/JFGJ/images" "!"指令說明： Alias使用別名，把URL映射到一個目錄 Directory定義了一個目錄，以及權限，2.4以上版本采用Require all granted獲得訪問權限。 ProxyPass 為代理配置，把遠程服務器的服務映射到本地，由于采用了前后端分離，后端文件和前端文件在不同服務器上，需要使用代理。同時，由于使用了多個代理后，代理的路徑存在優先級。Apache采用配置文件的順序，因此，需要對本地文件的代理時，需要使用感嘆號“！”實現對子目錄的代理訪問（排除從遠程服務器代理）。 2. 代理webpack-dev-server
ProxyPass /JFGJ/static/ http://localhost:8080/ProxyPassReverse /JFGJ/static/ http://localhost:8080/代理webpack-dev-server較為容易，使用ProxyPass和ProxyPassReverse兩個指令，第一個參數為需要代理的虛擬目錄前綴，后面為后端服務器的URL。需要注意是最后的“/”結束符，第一個參數有，那么第二個參數也需要有。同時，由于采用了“/”結束符，那么URL替換時是把匹配部分給替換掉。由于webpack-dev-server訪問文件時是直接使用http://localhost:8080/xxx.css訪問的，所以需要把http://localhost/JFGJ/static/xxx.css替換為http://localhost:8080/xxx.css. 3. 代理tomcat
ProxyPass /JFGJ http://192.168.1.50:8080/JFGJProxyPassReverse /JFGJ http://192.168.1.50:8080/JFGJ代理tomcat服務也類似，采用webpack的代理方法相同。這里主要說明一下配置的順序。 /JFGJ虛擬目錄需要代理到后端服務器的/JFGJ目錄 /JFGJ/images需要代理到本地文件 /JFGJ/static需要代理到webpack服務器 例如下發配置為前端開發人員的代理配置：
Alias "/JFGJ/images" "D:/Intelligence Monitoring/JFGJ/web/images"<Directory "D:/Intelligence Monitoring/JFGJ/web/images"> Options Indexes FollowSymLinks AllowOverride None Require all granted</Directory>ProxyPass /JFGJ/static/ http://localhost:8080/ProxyPassReverse /JFGJ/static/ http://localhost:8080/ProxyPass "/JFGJ/images" "!"ProxyPass /JFGJ http://192.168.1.50:8080/JFGJProxyPassReverse /JFGJ http://192.168.1.50:8080/JFGJ采用location + alias指令 2. 代理webpack-dev-server
location ^~ /JFGJ/static/{ proxy_pass http://localhost:8080/;}采用location + proxy_pass指令 3. 代理tomcat 與代理webpack服務器類似：
location /JFGJ/ { proxy_pass http://192.168.1.50:8080;}所有配置項如下：
location /JFGJ/ { proxy_pass http://192.168.1.50:8080;}location ^~ /JFGJ/static/{ proxy_pass http://localhost:8080/;}location ^~ /JFGJ/images/{ alias "D:/Intelligence Monitoring/JFGJ/web/images/";}需要說明的是Nginx的location對正則表達式是較為容易支持的，location直接支持，使用“~”表明后面的URL是一個正則表達式匹配。而Apache需要使用ProxyMatch指令實現匹配，并通過ReWrite實現URL重寫，從學習角度而言，Nginx配置相對而言簡單一些?？墒荳indows下的問題，讓我不得不使用Apache，而且Apache新版本也是很好用的，包括在Linux系統中。
發現的問題： 1. Windows環境下，Webpack + Ngnix + Tomcat出現超時1分鐘的問題？ 
沒有找到解決方案，并希望有高手幫到我。 2. Apache在某些Windows機器上存在代理失敗的問題？ 關閉殺毒軟件，問題解決。網上說是Apache用了一些API，殺毒軟件實施了攔截，導致代理失敗。 3. Apache運行一段時間后出現無法訪問的問題，重啟Apache服務后正常？ 該問題是由于AcceptEx API訪問拒絕導致的問題，日志中由相關錯誤信息，可以添加一下配置行解決。 AcceptFilter http none AcceptFilter https none AcceptEx參考連接
新聞熱點
疑難解答
