Nginx+Tomcat部署Angular+javaweb專案的操作

最初時，我用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找不到頁面錯誤。

哇，好囉嗦。不過至少明白了是什麼原因，知道了什麼原因就該想如何解決吧！

解決方法1：

將Angular的url風格配置成hash風格，這個辦法是我見過的最多的了，都是從StackOverflow上面抄來抄去的。現在普遍都用H5的pushstate風格了，並且angular官方告訴我們，如果沒有足夠使用hash風格的理由，還是盡量使用H5風格，您現在還來個#錨點不太合適吧？而且也有人指出如果配置了hash風格，在微信支付或是angular的深路徑依然會出404的問題。如果你執意要用，那也沒問題，詳細可見官方文件

解決方法2：

既然它報404，你就在tomcat指定錯誤頁為根目錄不就好了嗎？

描述：開啟Tomcat容器目錄,Tomcat/conf/web.xml，移到底部，在上面加上以下程式碼：

配置完後，重啟Tomcat。這下再怎麼刷新，頁面都展示沒問題了。但我們發現，雖然頁面能展示，但是在network標籤下，我們是可以看到404的請求的。也就是說，我們刷新的那一刻，angular是找不到頁面的，只是被Tomcat當作404指引到了index.html去了。 Tomcat把一位誤入歧途的人引回了正路，只不過也同時在他身上印下了「他曾經是壞人」的標記。我們先不說配錯誤頁的方法合不合適，先說有這個404的標記會為我們帶來什麼問題。首先，只要是遇到了有404錯誤頁處理的平台，你肯定是完了。例如微信，他偵測到了你出現了404頁，他馬上給你一個幫丟失的孩子找到家的一個頁面。

很良心，很善良吧，他對公益是做好了，但你的工作要丟了啊。你的頁面要是放在公眾號裡面，一授權就進入了找小孩的頁面，你們經理不砍死你就好了。所以這個辦法用不用，你自己看著辦吧！

解決方法3

那你頁面找不到，我後端指導你咯！我寫個攔截器，或是過濾器。在你發送任何請求前，我先重定向到你index.html去，總沒問題吧！當然沒問題呀，這就是針對病因找特效藥啊~這一切似乎完美解決~但是，我們發現，我們今天的主題都沒講到，肯定得挑這個解決辦法的一點問題啊！不然就顯得我們的終極大招平淡無奇了。
由於我們專案是前後分離，無狀態化服務。後端負責資料庫操作，把相關介面資料回傳給前端，前端只負責處理顯示邏輯以及與後端互動。頻繁轉發，
後端ps：你都讓我不用處理頁面了，還讓我轉發，是不是傻啊？如果你們後端就是不想做轉發的工作，你能怎麼做？當然是欺負運維！

解決方法·終極

If you are an operation and maintenance master, then I guess you can just drink tea next to me. What if...a newbie? Then as the front end, you can help (zhuang) (bi), use nginx! Reverse proxy, load balancing, balabala…

Pretend you have an nginx environment here, I am using windows here. Open the nginx.conf file. I won’t write a specific description. Read the comments yourself. If you don’t want to read it, you can directly download the configuration file.

It should be noted that the root directory configuration is not location/{}, which means that all requests are forwarded.

以上是Nginx+Tomcat部署Angular+javaweb專案的操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！