欧阳简之 > Angular框架前后端分离nginx配置详解

热爱代码,对每一行代码保持一颗敬畏之心。

公司的一个项目前后端分离,前端使用的是Angular框架,参考了网上同学的解决方案,记录一下

server {
    listen       80;  
    server_name  localhost; 

    access_log  logs/access.log  main;
    error_log  logs/error.log  warn;

    location / {
        root   html; 
        #指定index页面
        index  index.html index.htm;
        #这个字段指定当前uri 访问的文件顺序,
        #即uri没有的话就访问uri/ 依次到index.html、404.配置这个字段的原因是angualr项目是单页应用,所以所有的uri都访问index.html
        try_files $uri $uri/ /index.html =404;  
    }

    #将/api开头的请求转发到8000端口
    location /api/ {
        proxy_pass http://127.0.0.1:8000/;
    }
}

try_files字段
一开始使用nginx做angualr项目的服务器的时候发现除了首页,其它页面全部404了,然后就查了下,发现了try_files字段(好像以前是rewrite),看rewrite感觉比较好理解一点。其作用就是将所有的路由都指向index.html文件,Angualr内置的路由会呈现不同的页面。

代理转发
之前请求后台接口都是在前端项目中配置一个固定ip与端口,后面发现当改变环境或者ip的时候就要重新修改,很麻烦。然后查到了代理转发将/api 开头的uri全转发到本地的3000端口。

gzip压缩
gzip压缩,压缩的等级最好在2或者4.还没有亲自测试。
gzip压缩的gzip_types 中最好不要压缩图片,因为图片好像以及使用过zip压缩算法压缩过了,在用gzip压缩的话效果很不明显,我亲自测试过,618kb的图片压缩之后还有609kb...效率低还消耗内存。图片的话可以考虑缓存,公网的话云加速,内网的话先加载模糊的图片,再依次加载清晰的图片。目前我也还没有实践,若是后面有实践,则再发一篇关于图片的处理。

跨域CORS配置
nginx还可以做跨域配置,因为我的项目是在后台代码配置,所以没有。需要用的

修改请求体限制
nginx默认的client_max_body_size为1m,不修改的情况下当你随便上传一个音乐文件的时候都会报413的错误,错误信息是“ Request Entity Too Large”

tagged by none