前端必备 Nginx 配置

本文涉及的产品
.cn 域名,1个 12个月
简介: 前端必备 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解决跨域的原理

例如:

现在http://xx_domainhttps://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访问nginxgithub.com属于同源访问,而nginx对服务端转发的请求不会触发浏览器的同源策略。


目录
相关文章
|
16天前
|
缓存 前端开发 JavaScript
终极 Nginx 配置指南(全网最详细)
本文详细介绍了Nginx配置文件`nginx.conf`的基本结构及其优化方法。首先通过删除注释简化了原始配置,使其更易理解。接着,文章将`nginx.conf`分为全局块、events块和http块三部分进行详细解析,帮助读者更好地掌握其功能与配置。此外,还介绍了如何通过简单修改实现网站上线,并提供了Nginx的优化技巧,包括解决前端History模式下的404问题、配置反向代理、开启gzip压缩、设置维护页面、在同一IP上部署多个网站以及实现动静分离等。最后,附上了Nginx的基础命令,如安装、启动、重启和关闭等操作,方便读者实践应用。
206 84
终极 Nginx 配置指南(全网最详细)
|
5天前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
16 4
|
5天前
|
缓存 应用服务中间件 nginx
nginx如何配置?配置项都是什么意思?
nginx如何配置?配置项都是什么意思?
16 1
|
8天前
|
应用服务中间件 nginx Docker
docker应用部署---nginx部署的配置
这篇文章介绍了如何使用Docker部署Nginx服务器,包括搜索和拉取Nginx镜像、创建容器并设置端口映射和目录映射,以及如何创建一个测试页面并使用外部机器访问Nginx服务器。
|
2月前
|
应用服务中间件 nginx Docker
本地通过域名访问虚拟机上nginx的服务、搭建域名访问环境一(反向代理配置)
这篇文章介绍了如何通过域名在本地访问虚拟机上的nginx服务,包括创建nginx容器、修改配置文件、修改本地host文件以及进行访问测试的详细步骤。文章提供了具体的Docker命令来创建并配置nginx容器,展示了配置文件的修改示例,说明了如何在本地系统的hosts文件中添加虚拟机IP和自定义域名,以及如何通过浏览器进行测试访问。
本地通过域名访问虚拟机上nginx的服务、搭建域名访问环境一(反向代理配置)
|
28天前
|
应用服务中间件 nginx
一文搞定Nginx配置RTMP!
一文搞定Nginx配置RTMP!
63 3
|
29天前
|
Ubuntu 应用服务中间件 数据库
Nginx配置:阻止非国内IP地址访问的设置方法
此外,出于用户隐私和法律合规性的考虑,应慎重考虑阻止特定国家或地区IP地址的决策。在某些情况下,这可能被视为歧视性或违反当地法律。
51 2
|
8天前
|
应用服务中间件 nginx 索引
7-15|Nginx配置
7-15|Nginx配置
|
2月前
|
Ubuntu 应用服务中间件 Linux
在Linux中,如何配置Web服务器(如Apache或Nginx)?
在Linux中,如何配置Web服务器(如Apache或Nginx)?
|
2月前
|
JavaScript IDE 前端开发
前端开发工具配置 nodejs & git & IDE
前端开发工具配置 nodejs & git & IDE
下一篇
无影云桌面