配置nginx静态文件代理和gzip

接着上一篇在同一台服务器上配置app1.domain.com和app2.domain.com多个web应用,这里记录下在nginx下给express web app配置静态代理和文件压缩。

目的

为了减少node.js对静态文件的处理和加快前端下载静态资源的速度,决定使用nginx做静态代理,并且对其进行gzip压缩。(为什么不使用express的compression中间,请移步:生产环境最佳实践:性能和可靠性

静态文件代理

express项目结构

以上一篇中的blog应用为例,blog的express项目结构如下,所有的静态资源,例如js, css, font, image等都放在static目录下

- blog
    - dist
        - static
            - images
            - javascripts
            - stylesheets
            - fonts
            - font-awesome
            - ...
    - src
    - ...        

页面上所有引用资源时都是static/XXX/XXX/XXX.XXX

修改blog应用的nginx配置文件

blog的配置文件路径/etc/nginx/jackyang.me/blog.conf

upstream blog.jackyang.me {
    server 127.0.0.1:3000;
    keepalive 8;
}
 
server {
    listen 0.0.0.0:80;
    server_name blog.jackyang.me;

    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;
      proxy_pass http://blog.jackyang.me/;
      proxy_redirect off;
    }
    
    # new config lines for static files proxy
    location /static/ {
        root /var/www/jackyang.me/blog;
    }
 }

/static/的配置告诉nginx:碰到static/开头的任何请求,如:blog.jackyang.me/static/images/demo.png,都会去/var/www/jackyang.me/blog/static/目录下去找。

重启nginx

sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

重启nginx,查看expresslog,你将不会看到关于那些静态文件的GET请求。

开启gzip

修改blog应用的nginx配置文件

gzip可以配置在http, server, location作用域下,我这里是只为blog.jackyang.me配置,所以将其放在/etc/nginx/jackyang.me/blog.conf中:

upstream blog.jackyang.me {
    server 127.0.0.1:3000;
    keepalive 8;
}
 
server {
    listen 0.0.0.0:80;
    server_name blog.jackyang.me;

    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;
      proxy_pass http://blog.jackyang.me/;
      proxy_redirect off;
    }
    
    # new config lines for gzip
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 8k;
    gzip_http_version 1.1;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
    
    location /static/ {
        root /var/www/jackyang.me/blog;
    }
 }

这里给了一个简单的配置,关于更多gzip的配置属性信息请查看官方文档

重启nginx

sudo /usr/local/nginx/sbin/nginx -s stop
sudo /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

打开浏览器访问页面,在调试工具中可以看到对应MINE类型的资源的response header中被标记gzip
图片描述

(自己在配置时碰到问题,cssgzipjavascript没有。最后对比发现这里的Content-Type值在配置文件gzip_types中没有包含:content-typeapplication/javascript,而gzip_types中配置的为application/x-javascript


外籍杰克
分享能帮助自己更好的理解
8.8k 声望
820 粉丝
0 条评论
推荐阅读
Sequelizejs 关联
看似一对一,其实一对多.这里的 One-To-One 指的应该是查询数据(主表)结果中,关联信息是以单个形式作为一个属性挂在主表每一个对象中

外籍杰克6阅读 3.3k评论 1

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

从零搭建 Node.js 企业级 Web 服务器(五):数据库访问
回顾 从零搭建 Node.js 企业级 Web 服务器(一):接口与分层,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,控制层与服务层实现了业务处理过程,模型层定义了业务实体并以 对象-关系...

乌柏木32阅读 4.5k评论 9

从零搭建 Node.js 企业级 Web 服务器(十三):断点调试与性能分析
Node.js 官方提供了断点调试机制,出于安全性考虑默认为关闭状态,可以通过 node 参数 --inspect 或 --inspect-brk 开启,配合 IDE 能够非常方便地调试代码,本章就上一章已完成的项目 licg9999/nodejs-server-ex...

乌柏木29阅读 3.8k评论 9

从零搭建 Node.js 企业级 Web 服务器(八):网络安全
计算机网络依据 TCP/IP 协议栈分为了物理层、网络层、传输层、应用层,通常基础设施供应商会解决好前三层的网络安全问题,需要开发者自行解决应用层的网络安全问题,本章将着重表述应用层常见的网络安全问题及处...

乌柏木31阅读 5.7k评论 1

8.8k 声望
820 粉丝
宣传栏