Nginx+Tomcat部署Angular+javaweb項目(解決刷新404)

最近項目進入了即將驗收階段，項目部署是必不可少的。因爲某些緣由，咱們把前端項目(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找不到頁面錯誤。

哇，好囉嗦啊。不過至少明白了是什麼緣由，知道了什麼緣由那就應該想該如何去解決吧！

• 解決方法1：

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

• 解決方法2：

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

  描述：打開Tomcat容器目錄,Tomcat/conf/web.xml，移到底部，在</web-app>上加上如下代碼：

  <error-page>
      <error-code>404</error-code>
      <location>/</location>
  </error-page>

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

很良心，很善良吧，他對公益是作好了，但你的工做要丟了啊。你的頁面要是放在公衆號裏面，一受權就進入了找小孩的頁面，大家經理不砍死你就行了。因此這個辦法用不用，你本身看着辦吧！

• 解決辦法3 
  那你頁面找不到，我後端就指導你咯！我寫個攔截器，或者過濾器。你發送任何請求前，我先重定向到你index.html去，這總沒問題吧！固然沒問題呀，這就是針對病因找特效藥啊~這一切彷佛完美解決~可是，咱們發現，咱們今天的主題都沒講到，確定得挑這個解決辦法的一點問題啊！否則就顯得咱們的終極大招平淡無奇了。

因爲咱們項目是先後分離，無狀態化服務。後端負責數據庫操做，把相關接口數據返回給前端，前端只負責處理顯示邏輯以及與後端進行交互。頻繁轉發， 
後端ps：你都讓我不用處理頁面了，還讓我轉發，是否是傻啊？若是大家後端就是不想作轉發的工做，你能怎麼辦？固然是欺負運維啊！

• 解決辦法·終極 
  若是是運維大神，那估計你能夠在旁邊喝茶就行了。若是是…萌新？那你做爲前端，就能夠幫(zhuang)忙(bi)了，用nginx啊！反向代理，負載均衡,balabala…

  這裏僞裝你有nginx環境，我這裏用到的是windows。打開nginx.conf文件，不寫具體描述了，本身看註釋，若是不想看的，能夠直接去下載該配置文件。

  http {
  
  # 此處省略好多字
  
  server {
  
      # nginx才配使用80端口，其餘服務速速離去
      listen       80;
  
      # 沒啥好解釋的
      server_name  localhost;
  
      # 指定根目錄，因爲個人前端項目是直接放在nginx下的html文件夾，因此我這樣配
      root html;
  
      # 這裏實際上是由if變過來的，意思是若是uri存在，那就訪問uri的資源，若是uri不存在，那就訪問該目錄下index.html文件。若是看不懂個人解釋，能夠看這個https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/#front-controller-pattern-web-apps
      try_files $uri $uri/ /index.html;
  
      # 這裏是配你Tomcat裏面的其餘java項目，意思是當你訪問http://ip/xxx的時候，會到這個代碼塊裏面進行對應操做
      location /xxx {
          # 這些照着加就行了，無非是獲取服務器host/ip相關，必定要加，不然若是你的項目並非先後端分離，而是SSH/SSM帶有jsp或者模板頁面的，那就會出現找不到css/js等找不到一切靜態資源文件的錯誤。爲何會報錯，由於你看network面板你就知道，他是去訪問http://127.0.0.1/xxx/css...而並非訪問服務器的真實ip，因此仍是乖乖加上吧！
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          # 去該地址去找項目資源
          proxy_pass http://127.0.0.1:8080/xxx;
      }
    }
  }

   

要注意的是根目錄配置並非location / {}，這表明着全部請求都作轉發。

 

好了，就這麼多，行不行你本身看着辦吧！  歡迎大神指導改正！蟹蟹~