前端必备 Nginx 配置

前端必备 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; # 每个工作进程连接数}{ include mime.types; default_type application/octet-stream; # 日志格式 log_format access '$remote_addr - $remote_user [$time_local] $host "$request" ' '$status $body_bytes_sent "$' '"$"$"$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 # 访问根目录 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 # 访问根目录 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 -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 ^/ }}

静态文件压缩

server { # 开启gzip 压缩 gzip on; # 设置gzip所需的（HTTP/1.1, HTTP/1.0） gzip_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域名为：​​配置反向代理的参数server { listen 8080; server_name xx_domain ## 1. 用户访问 location / { proxy_pass 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​​对服务端转发的请求不会触发浏览器的同源策略。

.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。