前端必备 Nginx 配置

Nginx (engine x) 是一个轻量级高性能的HTTP和反向代理服务器，同时也是一个通用 代理服务器 （TCP/UDP/IMAP/POP3/SMTP），最初由俄罗斯人Igor Sysoev编写。基本命令nginx -t 检查配置文件是否有语法错误
nginx -s reload 热加载，重新加载配置文件
nginx -s stop 快速关闭
nginx -s quit 等待工作进程处理完成后关闭
复制代码搭建好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 (KaTeX parse error: Expected '}', got 'EOF' at end of input: …rite ^/ 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对服务端转发的请求不会触发浏览器的同源策略。如果觉得我的文章对你有用，请点赞鼓励

服务推荐

• 蜻蜓代理
• 代理ip
• 微信域名检测
• 微信域名拦截检测
• 微信域名在线拦截检测工具
• 微信域名在线批量拦截检测工具