脚本宝典收集整理的这篇文章主要介绍了angular前后端分离部署,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近写了一个小项目玩,前端是Angular,后端是koa,分离部署,着实折腾了一天。地址在yukarin.cn
打包
ng build --PRod --aot
- 如果提示有错误,需要自行修改。
- 打包完成后会看到命令行弹出一些打包后的信息,主要有main.js css assets chunk.js 等,其中main.js是启动是就需要加载的,chunk是今后懒加载的。
如何控制首页加载速度
如何分离部署
- 服务器上装好nginx,关于nginx的安装和配置,可以参看我的这篇。
- 想办法把打包后的静态文件(dist下的那一坨)拖到服务器上放着,图省事的可以用winSCP。
-
用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代码。
以上是脚本宝典为你收集整理的angular前后端分离部署全部内容,希望文章能够帮你解决angular前后端分离部署所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。