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_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对服务端转发的请求不会触发浏览器的同源策略。

前端必备 Nginx 配置的更多相关文章

  1. 后端必备 Nginx 配置

    后端必备 Nginx 配置 概要 防盗链 根据文件类型设置过期时间 静态资源访问 日志配置 日志字段说明 access_log 访问日志 error_log 日志 日志切割 反向代理 禁止指定user ...

  2. Web前端必备-Nginx知识汇总

    一.Nginx简介 Nginx是一个高性能.轻量级的Web和反向代理服务器, 其特点是占有内存及资源少.抗并发能力强. Nginx安装简单.配置简洁.启动快速便捷.支持热部署.支持 SSL.拥有高度模 ...

  3. 前端部署: nginx配置

    前提:nginx 已安装 简介:nginx(engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Ram ...

  4. 前端搭建Linux云服务器,Nginx配置详解及部署自己项目到服务器上

    目录 搭建Linux云服务器 购买与基本配置 链接linux服务器 目录结构 基本命令 软件安装 Linux 系统启动 启动过程 运行级别 Nginx详解 1.安装 方式一:yum安装 方式二:自定义 ...

  5. nginx配置一、二级域名、多域名对应(api接口、前端网站、后台管理网站)

    前提:安装好nginx,如果已经启动nginx,先停止,命令: ./usr/local/nginx/sbin/nginx -s stop 修改nginx配置 vi /usr/local/nginx/c ...

  6. 前端nginx配置

    对nginx还是处于小白阶段,知道的只是简单基础,以下配置没有问题,已实现 文件:nginx-1.15.11\conf\nginx.conf 注释:# 后台接口 :location ^~ /geste ...

  7. Nginx配置配置文件详解

    文章目录 配置文件 nginx.conf配置文件详解 用于调试.定位问题的配置参数 正常运行必备的配置参数 优化性能的配置参数 事件相关配置 Fastcgi相关配置参数 常需要调整的参数 nginx作 ...

  8. nginx配置反向代理或跳转出现400问题处理记录

    午休完上班后,同事说测试站点访问接口出现400 Bad Request  Request Header Or Cookie Too Large提示,心想还好是测试服务器出现问题,影响不大,不过也赶紧上 ...

  9. Windos环境用Nginx配置反向代理和负载均衡

    Windos环境用Nginx配置反向代理和负载均衡 引言:在前后端分离架构下,难免会遇到跨域问题.目前的解决方案大致有JSONP,反向代理,CORS这三种方式.JSONP兼容性良好,最大的缺点是只支持 ...

随机推荐

  1. cf1242B

    题意简述:给出一个n个点的完全图,边权要么是1要么是0,输入只给出权值的是1的那些边,求解最小生成树的权值 解答:边很多,我们考虑使用prim算法,prim算法的过程中维护了一个dis数组,这里我们可 ...

  2. 数据库MySQL中关于“多表关联更新”的那些事

    在常见的sql中,我们经常在查询中进行多表关联查询,用的比较熟练.今天在开发中遇到一个实际业务场景是多表关联更新,一时不知所措.本着多学习的态度,没有直接写java代码去实现,终于把多表关联更新的sq ...

  3. Linux分区类型EXT2、EXT3、EXT4详解

    一.EXT2与EXT3 Linux之前缺省情况下使用的文件系统为Ext2,ext2文件系统的确高效稳定.但是,随着Linux系统在关键业务中的应用,Linux文件系统的弱点也渐渐显露出来了:其中系统缺 ...

  4. Qt中MySQL数据库的操作例程

    数据库连接不成功时,要将libmysql.dll放到C:\Qt\Qt5.11.0\5.11.0\mingw53_32\bin和C:\Qt\Qt5.11.0\5.11.0\msvc2017_64\bin ...

  5. 141.内置上下文处理器debug、request、auth、messages、media、static、csrf

    上下文处理器 上下文处理器可以返回一些数据,在全局模板中都可以使用,比如登录后的用户数据,在很多页面中都需要使用,那么我们就可以方在上下文处理器中,就没有必要在每个视图中返回这个对象了. 在setti ...

  6. php中的require和include区别

    require是无条件包含也就是如果一个流程里加入require,无论条件成立与否都会先执行require 1.require 的使用方法如 require("MyRequireFile.p ...

  7. 如何处理pom文件中没有找到HUB检查到高危漏洞的依赖包

    最近使用HUB工具检查到maven工程中存在高危险漏洞,虽然定位到具体的引用包了,但是在pom文件中却没有发现该依赖包.此时,我们就需要用到这条命令mvn dependency:tree,该命令会将m ...

  8. 开始自学JAVA了,找到一点有用的资料(不定时更新)

    入门代码https://blog.csdn.net/salmonwilliam/article/details/81952387 高精度https://www.cnblogs.com/downrain ...

  9. [Python]find_all函数 2020.2.7

    .find_all(name,attrs,recursive,string,**kwargs) name:对标签名称的检索字符串attrs:对标签属性值的检索字符串,可标注属性检索recursive: ...

  10. pytest学习8-运行上次执行失败的用例

    该插件提供了两个命令行选项,用于重新运行上次pytest调用的失败: --lf,--last-failed- 只重新运行上次失败的用例,如果没有失败则全部运行 --ff,--failed-first- ...