前端开发者必备的nginx知识
nginx在应用程序中的作用
- 解决跨域
- 请求过滤
- 配置gzip
- 负载均衡
- 静态资源服务器
nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。
nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必要的。
基本命令
nginx -t 检查配置文件是否有语法错误
nginx -s reload 热加载，重新加载配置文件
nginx -s stop 快速关闭
nginx -s quit 等待工作进程处理完成后关闭
nginx全局变量：
$args：这个变量等于请求行中的参数，同$query_string。
$is_args: 如果已经设置$args，则该变量的值为"?"，否则为""。
$content_length： 请求头中的Content-length字段。
$content_type： 请求头中的Content-Type字段。
$document_uri： 与$uri相同。
$document_root： 当前请求在root指令中指定的值。
$host： 请求主机头字段，否则为服务器名称。
$http_user_agent： 客户端agent信息。
$http_cookie： 客户端cookie信息。
$limit_rate： 这个变量可以限制连接速率。
$request_method： 客户端请求的动作，通常为GET或POST。
$remote_addr： 客户端的IP地址。
$remote_port： 客户端的端口。
$remote_user： 已经经过Auth Basic Module验证的用户名。
$request_body_file`: 客户端请求主体的临时文件名。
$request_uri: 请求的URI，带参数
$request_filename： 当前请求的文件路径，由root或alias指令与URI请求生成。
$scheme： 所用的协议，比如http或者是https，比如rewrite ^(.+)$ $scheme://example.com$1 redirect;。
$server_protocol： 请求使用的协议，通常是HTTP/1.0或HTTP/1.1。
$server_addr： 服务器地址，在完成一次系统调用后可以确定这个值。
$server_name： 服务器名称。
$server_port： 请求到达服务器的端口号。
$request_uri： 包含请求参数的原始URI，不包含主机名，如：/foo/bar.php?arg=baz，它无法修改。
$uri： 不带请求参数的当前URI，$uri不包含主机名，如/foo/bar.html可能和最初的值有不同，比如经过重定向之类的。它可以通过内部重定向，或者使用index指令进行修改。不包括协议和主机名，例如/foo/bar.html。
搭建好nginx服务器并启动过后，我们先看nginx默认配置，再逐个介绍不同使用场景。
默认配置
Nginx 安装目录下, 我们复制一份 nginx.conf成 nginx.conf.default作为配置文件备份，然后修改 nginx.conf
# 工作进程的数量
worker_processes 1;
events {
worker_connections 1024; # 每个工作进程连接数
}
http {
include mime.types;
default_type application/octet-stream;
# 日志格式
log_format access '$remote_addr - $remote_user [$time_local] $host "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
access_log /srv/log/nginx/access.log access; # 日志输出目录
gzip on;
sendfile on;
# 链接超时时间，自动断开
keepalive_timeout 60;
# 虚拟主机
server {
listen 8080;
server_name localhost; # 浏览器访问域名
charset utf-8;
access_log logs/localhost.access.log access;
# 路由
location / {
root www; # 访问根目录
index index.html index.htm; # 入口文件
}
}
# 引入其他的配置文件
include servers/*;
}
搭建站点
在其他配置文件servers目录下，添加新建站点配置文件 xx.conf。
电脑 hosts 文件添加 127.0.0.1 xx_domian
# 虚拟主机
server {
listen 8080;
server_name xx_domian; # 浏览器访问域名
charset utf-8;
access_log logs/xx_domian.access.log access;
# 路由
location / {
root www; # 访问根目录
index index.html index.htm; # 入口文件
}
}
执行命令 nginx -s reload，成功后浏览器访问 xx_domian 就能看到你的页面
根据文件类型设置过期时间
location ~.*\.css$ {
expires 1d;
break;
}
location ~.*\.js$ {
expires 1d;
break;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
access_log off;
expires 15d; #保存15天
break;
}
# curl -x127.0.0.1:80 http://www.test.com/static/image/common/logo.png -I #测试图片的max-age
禁止文件缓存
开发环境经常改动代码，由于浏览器缓存需要强制刷新才能看到效果。这是我们可以禁止浏览器缓存提高效率
location ~* \.(js|css|png|jpg|gif)$ {
add_header Cache-Control no-store;
}
防盗链
可以防止文件被其他网站调用
location ~* \.(gif|jpg|png)$ {
# 只允许 192.168.0.1 请求资源
valid_referers none blocked 192.168.0.1;
if ($invalid_referer) {
rewrite ^/ http://$host/logo.png;
}
}
静态文件压缩
server {
# 开启gzip 压缩
gzip on;
# 设置gzip所需的http协议最低版本 （HTTP/1.1, HTTP/1.0）
gzip_http_version 1.1;
# 设置压缩级别，压缩级别越高压缩时间越长 （1-9）
gzip_comp_level 4;
# 设置压缩的最小字节数， 页面Content-Length获取
gzip_min_length 1000;
# 设置压缩文件的类型 （text/html)
gzip_types text/plain application/javascript text/css;
}
执行命令 nginx -s reload，成功后浏览器访问
指定定错误页面
# 根据状态码，返回对于的错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /source/error_page;
}
执行命令 nginx -s reload，成功后浏览器访问
跨域问题
跨域的定义
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。
同源的定义
如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。
nginx解决跨域的原理
例如：
前端server域名为：http://xx_domain
后端server域名为：https://github.com
现在http://xx_domain对https://github.com发起请求一定会出现跨域。
不过只需要启动一个nginx服务器，将server_name设置为xx_domain,然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回github.com。如下面的配置：
## 配置反向代理的参数
server {
listen 8080;
server_name xx_domain
## 1. 用户访问 http://xx_domain，则反向代理到 https://github.com
location / {
proxy_pass https://github.com;
proxy_redirect off;
proxy_set_header Host $host; # 传递域名
proxy_set_header X-Real-IP $remote_addr; # 传递ip
proxy_set_header X-Scheme $scheme; # 传递协议
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
这样可以完美绕过浏览器的同源策略：github.com访问nginx的github.com属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。
最后
推荐几篇好文，方便查阅~~