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代码。