angular先後端分離部署

最近寫了一個小項目玩,前端是angular，後端是koa，分離部署，着實折騰了一天。地址在 yukarin.cn

打包

ng build --prod --aot

• 若是提示有錯誤，須要自行修改。
• 打包完成後會看到命令行彈出一些打包後的信息，主要有main.js css assets chunk.js 等，其中main.js是啓動是就須要加載的，chunk是從此懶加載的。

如何控制首頁加載速度

• 看看appModule裏導入了多少模塊，是否能夠將其中對的一部分分散到懶加載的模塊。
• 經過nginx的gzip，下面立刻說。

如何分離部署

1. 服務器上裝好nginx，關於nginx的安裝和配置，能夠參看個人這篇。
2. 想辦法把打包後的靜態文件（dist下的那一坨）拖到服務器上放着，圖省事的能夠用winSCP。

3. 用nginx代理這個angular靜態資源它，具體這麼作:

   server {
    listen 80;
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    server_name yukarin.cn;
    root /var/www/ng-starter;
    try_files $uri $uri/ /index.html;
    location /api {
   
           proxy_set_header Host $http_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/api;
       }
   }

   我試着努力解釋一下吧，畢竟nginx我也不懂，可是要知道如下幾點：

   1. servername是你要代理的域名，這裏我nginx代理的是yukarin.cn
   2. 以gzip開頭的配置就是配置nginx的gzip的，可讓咱們的包變小。這段設置是我在網上抄的，能用。
   3. root是靜態資源在服務器的路徑，nginx將去這個路徑下面找靜態文件
   4. try_files $uri $uri/ /index.html 這段話的意思是說若是用戶輸入的uri能找到對應的文件，那麼很好，可若是找不uri對應的文件，那麼nginx就把路由託管給index.html。注意這個很重要，不然會出現刷新找不到頁面的狀況。
   5. location /api 那後面就是反向代理設置了，主要是解決分離部署跨域的問題，畢竟後臺服務我跑在8080端口，而angular我是用nginx監聽80端口，個人restApi都是在/api開頭的，因此這裏的設置就是把出現/api的uri時，就把請求所有給導到127.0.0.1:8080/api去處理

一番折騰下來，總算部署成功

用了gzip後，首頁渲染速度獲得了質的提高。
個人一個包原本1.72，如今只有500多k了

加個首頁loading動畫，讓用戶體驗更好。

確實如此，能夠在網上找找loading的css代碼。copy到index中的app-root裏面便可，待app-root裏面的組件加載完後，會自動刪除咱們添加的loading代碼。