最近項目進入了即將驗收階段伸但，項目部署是必不可少的。由于某些原因留搔，我們把前端項目(Angular4)和后端項目(JavaWeb)更胖，由于要部署了四個項目：Angular4(微信端)，微信端數(shù)據(jù)服務(wù)催式，JavaWeb(PC端)*2，并且是放在同一個服務(wù)器下避归。Java項目比較好部署荣月，Tomcat/Jetty都可以輕松部署好。但是Angular部署起來不是那么的容易(當(dāng)然是對于我這種菜鳥而言)蒸其，我先說下為什么我說不容易的原因茵汰。

最初時已卷，我用ng build –prod –aot編譯打包的時候。這里注意一下萌业，由于現(xiàn)在官方已經(jīng)內(nèi)置了，所以打包的時候只需要輸入ng build –prod即可了奸柬。這里可以以我的項目體積相比較一下：

ng build : 8,348,761字節(jié)
ng build –aot : 9,232,405字節(jié)
ng build –prod : 1,839,811字節(jié)
ng build –prod –aot : 1,839,811字節(jié)

最后可以看出生年，ng build –prod即可完成產(chǎn)品化最小打包。這里我有一點不懂廓奕，預(yù)編譯構(gòu)建反而比常規(guī)構(gòu)建的體積還要大抱婉，希望大神可以幫忙解答。

這里就不再講如何讓項目更小了桌粉。

當(dāng)我把dist里面的文件拷到Tomcat的ROOT文件夾下蒸绩，打開http://127.0.0.1的時候，熟悉的項目頁面展示了出來铃肯。習(xí)慣性按了F5刷新患亿，發(fā)現(xiàn)出現(xiàn)了404錯誤。在百度找了相關(guān)的問題押逼，得出：在第一次進入頁面時步藕，跑正常流程以及正常流程都是由Angular的路由機制進行處理。然而如果有刷新操作挑格，那么則是向后端服務(wù)發(fā)送的請求漱抓，如果后端沒有把你的請求重定向到index.html(此處是指單頁面應(yīng)用入口)，那就會報404找不到頁面錯誤恕齐。

哇乞娄，好啰嗦啊瞬逊。不過至少明白了是什么原因，知道了什么原因那就應(yīng)該想該如何去解決吧仪或！

• 解決方法1：

  將Angular的url風(fēng)格配置成hash風(fēng)格确镊，這個辦法是我見的最多的了，都是從StackOverflow上面抄來抄去的》渡荆現(xiàn)在普遍都用H5的pushstate風(fēng)格了蕾域，并且angular官方告訴我們，如果沒有足夠使用hash風(fēng)格的理由到旦，還是盡量使用H5風(fēng)格旨巷，您現(xiàn)在還來個#錨點不太合適吧？而且也有人指出如果配置了hash風(fēng)格添忘，在微信支付或是angular的深路徑依然會出404的問題采呐。如果你執(zhí)意要用，那也沒問題搁骑，詳細(xì)可見官方文檔

• 解決方法2：

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

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

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

配置完后，重啟Tomcat乏冀。這下再怎么刷新蝶糯，頁面都展示沒問題了。但是我們發(fā)現(xiàn)辆沦，雖然頁面能展示裳涛，但是在network標(biāo)簽下，我們是可以看到404的請求的众辨。也就是說端三，我們刷新的那一刻，angular是找不到頁面的鹃彻，只是被Tomcat當(dāng)作404指引到了index.html去了郊闯。Tomcat把一位誤入歧途的人引回了正路，只不過也同時在他身上印下了“他曾經(jīng)是壞人”的標(biāo)記蛛株。我們先不說配錯誤頁的方法合不合適团赁，先說有這個404的標(biāo)記會給我們帶來什么問題。首先谨履，只要是遇到了有404錯誤頁處理的平臺欢摄，你肯定是完了。比如微信笋粟，他檢測到了你出現(xiàn)了404頁怀挠，他馬上給你一個幫丟失的孩子找到家的一個頁面析蝴。

很良心，很善良吧绿淋，他對公益是做好了闷畸，但你的工作要丟了啊。你的頁面要是放在公眾號里面吞滞，一授權(quán)就進入了找小孩的頁面佑菩，你們經(jīng)理不砍死你就好了。所以這個辦法用不用裁赠，你自己看著辦吧殿漠！

• 解決辦法3
  那你頁面找不到，我后端就指導(dǎo)你咯佩捞！我寫個攔截器绞幌，或者過濾器。你發(fā)送任何請求前失尖，我先重定向到你index.html去啊奄，這總沒問題吧渐苏！當(dāng)然沒問題呀掀潮，這就是針對病因找特效藥啊_{這一切似乎完美解決}但是，我們發(fā)現(xiàn)琼富，我們今天的主題都沒講到仪吧，肯定得挑這個解決辦法的一點問題啊鞠眉！不然就顯得我們的終極大招平淡無奇了薯鼠。

由于我們項目是前后分離，無狀態(tài)化服務(wù)械蹋。后端負(fù)責(zé)數(shù)據(jù)庫操作出皇，把相關(guān)接口數(shù)據(jù)返回給前端，前端只負(fù)責(zé)處理顯示邏輯以及與后端進行交互哗戈。頻繁轉(zhuǎn)發(fā)郊艘，
后端ps：你都讓我不用處理頁面了，還讓我轉(zhuǎn)發(fā)唯咬，是不是傻吧醋ⅰ？如果你們后端就是不想做轉(zhuǎn)發(fā)的工作胆胰，你能怎么辦狞贱？當(dāng)然是欺負(fù)運維啊蜀涨！

• 解決辦法·終極
  如果是運維大神瞎嬉，那估計你可以在旁邊喝茶就好了蝎毡。如果是…萌新？那你作為前端佑颇，就可以幫(zhuang)忙(bi)了顶掉，用nginx啊挑胸！反向代理痒筒，負(fù)載均衡,balabala…

  這里假裝你有nginx環(huán)境，我這里用到的是windows茬贵。打開nginx.conf文件簿透，不寫具體描述了，自己看注釋解藻，如果不想看的老充，可以直接去下載該配置文件。

  http {
  
  # 此處省略好多字
  
  server {
  
      # nginx才配使用80端口螟左，其他服務(wù)速速離去
      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項目红且，意思是當(dāng)你訪問http://ip/xxx的時候坝茎，會到這個代碼塊里面進行對應(yīng)操作
      location /xxx {
          # 這些照著加就好了，無非是獲取服務(wù)器host/ip相關(guān)暇番，一定要加嗤放，否則如果你的項目并不是前后端分離，而是SSH/SSM帶有jsp或者模板頁面的壁酬，那就會出現(xiàn)找不到css/js等找不到一切靜態(tài)資源文件的錯誤次酌。為什么會報錯，因為你看network面板你就知道厨喂，他是去訪問http://127.0.0.1/xxx/css...而并不是訪問服務(wù)器的真實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;
      }
    }
  }
  

  好了蜕煌，就這么多派阱，行不行你自己看著辦吧！
  歡迎大神指導(dǎo)改正斜纪！蟹蟹~