Alice 上線小記

引言

Alice學生管理系統昨日正式上線測試，上線遇到的問題很多，但最後都完美解決了。

特此分享，一塊兒爬坑。

項目優化

登陸頁美化

原來的登陸頁採用的是黑背景，通過你們的充分討論，咱們須要換一個登陸頁，黑背景看着壓抑。

而後就在晨澍和潘佳琦的幫助下開始找各類登陸的模板，發現都特別醜，後來發現當前系統的登陸風格和微信的登陸風格很像，順手就抄過來了，感受效果還不錯。

上線問題

打包問題

前臺ng build --prod以後，發現樣式不一致。

期待：

實際結果：

查看元素髮現是Bootstrap的樣式在打包以後沒有了。

後來發現：黃庭祥在style.less中引用了一個在線的Bootstrap，打包確定打不進去啊。

引用的全部包，都不能引在線的，須要使用npm安裝。npm install以後的包才能被打包進去。

遠程文件拷貝

本地打完包，須要將文件上傳到服務器，查了一下，須要使用scp命令。

scp：secure copy，安全拷貝，將文件加密傳輸，安全的遠程文件拷貝命令。

scp -r /Users/panjie/github/yunzhiclub/alice/web/webApp/dist/webApp root@xxx.xxx.xxx.xxx:/root/

將本地打包的webApp目錄上傳到服務器的/root目錄下。

-r表明目錄，xxx.xxx.xxx.xxx請替換成相應的服務器IP地址。

nginx 403

前臺上線，瀏覽器端訪問服務器卻獲得了403，查看相關日誌後發現是nginx訪問文件時遭到了拒絕。

在nginx的配置文件中，有一行配置用戶的。

原配置是user nginx;，因此啓動時nginx進程的用戶是nginx，可是webApp文件的用戶全部者是root，因此就403了。

解決方案是把用戶配置改爲root(有權限的用戶)，而後從新加載配置文件便可。

刷新404問題

當用戶訪問127.0.0.1:8100時，根據路由的重定向，''重定向爲'setup'登陸界面。

可是用戶刷新或直接訪問127.0.0.1:8100/setup時，報404錯誤。

猜測，nginx轉發出現了問題，應該是/轉給了Angular，可是把/setup當成了文件夾。

這個只是個人猜想，若是您有什麼意見，歡迎在評論區中指出個人錯誤，感激涕零。

華軟就沒有該類問題，對比兩個項目，發現華軟中默認配置了hash路由。

hash路由

特地去官網學習了一下hash路由，感受應該能給你們講明白。

兩個路由：

127.0.0.1:8100/setup
127.0.0.1:8100/#/setup

普通的路由是不帶#的，hash路由是帶#的。

#號，咱們是否是在哪裏見過？你們還記得Spring的官方文檔嗎？

用a標籤實現頁面內跳轉。hash路由與之相似。

#以後的路由變化不會被髮送給服務器，也就是說：127.0.0.1:8100/setup，後臺nginx獲取到的路徑是/setup，而使用hash路由，對於路由127.0.0.1:8100/#/setup，後臺獲取到的路徑就是/。

注入hash路由策略，便可啓用hash路由。

再訪問，後臺獲取到的就是/，而後把angular應用返回回來，而後angular應用再去處理#以後的路由，不會出現404。

以上的論述，是我結合官方文檔和個人經驗得出的解決，若是有不正確之處，歡迎您批評指正。

不足

當時忙着上線，ng alain中默認也啓用了hash路由，就覺得hash路由是正統的解決方案。

可是今天看官方文檔，卻看到了這樣的描述：

幾乎全部的Angular項目都會使用默認的HTML 5風格。它生成的URL更易於被用戶理解，它也爲未來作服務端渲染預留了空間。

在服務器端渲染指定的頁面，是一項能夠在該應用首次加載時大幅提高響應速度的技術。那些本來須要十秒甚至更長時間加載的應用，能夠預先在服務端渲染好，並在少於一秒的時間內完整呈如今用戶的設備上。

默認的路由(不帶#)的，支持服務器端渲染，而hash路由則不支持。除非你有強烈的理由不得不使用hash路由，不然就應該堅定使用默認的HTML 5路由風格。

hash路由不推薦，不支持SSR。另外，我以爲應該是當前nginx的轉發配置寫得很差，之後再研究研究。

總結

對技術懷着一顆敬畏之心，努力地尋找着最佳實踐。