Nginx+Tomcat部署Angular+javaweb項目的操作
| 導讀 | 最近項目進入了即將驗收階段，項目部署是必不可少的。由於某些原因，我們把前端項目(Angular4)和後端項目(JavaWeb)，由於要部署了四個項目：Angular4(微信端)，微信端數據服務，JavaWeb(PC端)*2，並且是放在同一個服務器下。Java項目比較好部署，Tomcat/Jetty都可以輕鬆部署好。但是Angular部署起來不是那麼的容易(當然是對於我這種菜鳥而言)，我先說下爲什麼我說不容易的原因。 |
最初時，我用ng build –prod –aot編譯打包的時候。這裏注意一下，由於現在官方已經內置了，所以打包的時候只需要輸入ng build –prod即可了。這裏可以以我的項目體積相比較一下：
ng build : 8,348,761字節 ng build –aot : 9,232,405字節 ng build –prod : 1,839,811字節 ng build –prod –aot : 1,839,811字節
最後可以看出，ng build –prod即可完成產品化最小打包。這裏我有一點不懂，預編譯構建反而比常規構建的體積還要大，希望大神可以幫忙解答。
這裏就不再講如何讓項目更小了。
當我把dist裏面的文件拷到Tomcat的ROOT文件夾下，打開http://127.0.0.1的時候，熟悉的項目頁面展示了出來。習慣性按了F5刷新，發現出現了404錯誤。在百度找了相關的問題，得出：在第一次進入頁面時，跑正常流程以及正常流程都是由Angular的路由機制進行處理。然而如果有刷新操作，那麼則是向後端服務發送的請求，如果後端沒有把你的請求重定向到index.html(此處是指單頁面應用入口)，那就會報404找不到頁面錯誤。
哇，好囉嗦啊。不過至少明白了是什麼原因，知道了什麼原因那就應該想該如何去解決吧！
將Angular的url風格配置成hash風格，這個辦法是我見的最多的了，都是從StackOverflow上面抄來抄去的。現在普遍都用H5的pushstate風格了，並且angular官方告訴我們，如果沒有足夠使用hash風格的理由，還是儘量使用H5風格，您現在還來個#錨點不太合適吧？而且也有人指出如果配置了hash風格，在微信支付或是angular的深路徑依然會出404的問題。如果你執意要用，那也沒問題，詳細可見官方文檔
既然它報404，你就在tomcat指定錯誤頁爲根目錄不就好了嗎？
描述：打開Tomcat容器目錄,Tomcat/conf/web.xml，移到底部，在上加上以下代碼：
配置完後，重啓Tomcat。這下再怎麼刷新，頁面都展示沒問題了。但是我們發現，雖然頁面能展示，但是在network標籤下，我們是可以看到404的請求的。也就是說，我們刷新的那一刻，angular是找不到頁面的，只是被Tomcat當作404指引到了index.html去了。Tomcat把一位誤入歧途的人引回了正路，只不過也同時在他身上印下了「他曾經是壞人」的標記。我們先不說配錯誤頁的方法合不合適，先說有這個404的標記會給我們帶來什麼問題。首先，只要是遇到了有404錯誤頁處理的平臺，你肯定是完了。比如微信，他檢測到了你出現了404頁，他馬上給你一個幫丟失的孩子找到家的一個頁面。
很良心，很善良吧，他對公益是做好了，但你的工作要丟了啊。你的頁面要是放在公衆號裏面，一授權就進入了找小孩的頁面，你們經理不砍死你就好了。所以這個辦法用不用，你自己看着辦吧！
那你頁面找不到，我後端就指導你咯！我寫個攔截器，或者過濾器。你發送任何請求前，我先重定向到你index.html去，這總沒問題吧！當然沒問題呀，這就是針對病因找特效藥啊~這一切似乎完美解決~但是，我們發現，我們今天的主題都沒講到，肯定得挑這個解決辦法的一點問題啊！不然就顯得我們的終極大招平淡無奇了。
由於我們項目是前後分離，無狀態化服務。後端負責數據庫操作，把相關接口數據返回給前端，前端只負責處理顯示邏輯以及與後端進行交互。頻繁轉發，
後端ps：你都讓我不用處理頁面了，還讓我轉發，是不是傻啊？如果你們後端就是不想做轉發的工作，你能怎麼辦？當然是欺負運維啊！
如果是運維大神，那估計你可以在旁邊喝茶就好了。如果是…萌新？那你作爲前端，就可以幫(zhuang)忙(bi)了，用nginx啊！反向代理，負載均衡,balabala…
這裏假裝你有nginx環境，我這裏用到的是windows。打開nginx.conf文件，不寫具體描述了，自己看註釋，如果不想看的，可以直接去下載該配置文件。
要注意的是根目錄配置並不是location / {}，這代表着所有請求都做轉發
免費提供最新Linux技術教程書籍，爲開源技術愛好者努力做得更多更好：https://www.linuxprobe.com/