前端必备Nginx配置详解

 更新时间:2019年09月17日 10:15:47   作者:锐玩道  
这篇文章主要介绍了前端必备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 ($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对服务端转发的请求不会触发浏览器的同源策略。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 在Linux中查看Apache或Nginx服务状态的详细步骤

    在Linux中查看Apache或Nginx服务状态的详细步骤

    在Linux中,查看Apache或Nginx服务的状态通常涉及到使用系统管理工具或特定于这些Web服务器的命令,以下是如何查看Apache和Nginx服务状态的详细步骤,需要的朋友可以参考下
    2024-03-03
  • Nginx DNS resolver配置实例

    Nginx DNS resolver配置实例

    这篇文章主要介绍了Nginx DNS resolver配置实例,本文讲解在proxy_pass 和 upstream server 通信的时候需要手动指定 resolver,本文就给出了配置实例,需要的朋友可以参考下
    2015-01-01
  • 使用Nginx Ingress 优雅显示错误页面

    使用Nginx Ingress 优雅显示错误页面

    这篇文章主要为大家介绍了使用Nginx Ingress 优雅显示错误页面实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Nginx文件已经存在全局反向代理问题排查记录

    Nginx文件已经存在全局反向代理问题排查记录

    反向代理除了实现负载均衡之外,还提供如缓存来减少上游服务器的压力,下面这篇文章主要给大家介绍了关于Nginx文件已经存在全局反向代理问题排查的相关资料,需要的朋友可以参考下
    2022-07-07
  • nginx配置后访问出现白屏的问题解决

    nginx配置后访问出现白屏的问题解决

    本文主要介绍了nginx配置后访问出现白屏
    2024-06-06
  • 针对OpenSSL安全漏洞调整Nginx服务器的方法

    针对OpenSSL安全漏洞调整Nginx服务器的方法

    这篇文章主要介绍了针对OpenSSL漏洞调整Nginx服务器的方法,2014年爆出的SSL安全漏洞震惊了全世界,需要的朋友可以参考下
    2015-06-06
  • Linux下安装配置nginx详解

    Linux下安装配置nginx详解

    本篇文章主要介绍了Linux下安装配置nginx,介绍了在Linux系统下安装配置Nginx的详细过程,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • 为nginx设置默认虚拟主机(空主机头,默认主机头)

    为nginx设置默认虚拟主机(空主机头,默认主机头)

    nginx的默认虚拟主机在用户通过IP访问,或者通过未设置的域名访问(比如有人把他自己的域名指向了你的ip)的时候生效
    2010-11-11
  • Nginx配置详解(推荐)

    Nginx配置详解(推荐)

    Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能
    2017-05-05
  • nginx proxy_cache 缓存配置详解

    nginx proxy_cache 缓存配置详解

    这篇文章主要介绍了nginx proxy_cache 缓存配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11

最新评论