前端配置Nginx的知识以及一些常用的配置网站

在前端开发中,Nginx不仅仅是一款高效的Web服务器,更是一个强大的工具,能够显著提升Web应用的性能和用户体验

Nginx简介

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在BSD-like协议下发行。由于其高性能、稳定性、丰富的功能集、简单的配置以及低资源消耗而被广泛使用

一般常用的Nginx配置详细说明

ini 复制代码
#定义Nginx运行的用户和用户组
user www www;

#nginx进程数,建议设置为等于CPU总核心数。
worker_processes 8;

#全局错误日志定义类型,[ debug | info | notice | warn | error | crit ]
error_log /var/log/nginx/error.log info;

#进程文件
pid /var/run/nginx.pid;

#一个nginx进程打开的最多文件描述符数目,理论值应该是最多打开文件数(系统的值ulimit -n)与nginx进程数相除,但是nginx分配请求并不均匀,所以建议与ulimit -n的值保持一致。
worker_rlimit_nofile 65535;

#工作模式与连接数上限
events
{
#参考事件模型,use [ kqueue | rtsig | epoll | /dev/poll | select | poll ]; epoll模型是Linux 2.6以上版本内核中的高性能网络I/O模型,如果跑在FreeBSD上面,就用kqueue模型。
use epoll;
#单个进程最大连接数(最大连接数=连接数*进程数)
worker_connections 65535;
}

#设定http服务器
http
{
  include mime.types; #文件扩展名与文件类型映射表
  default_type application/octet-stream; #默认文件类型
  
  #charset utf-8; #默认编码
  server_names_hash_bucket_size 128; #服务器名字的hash表大小
  client_header_buffer_size 32k; #上传文件大小限制
  large_client_header_buffers 4 64k; #设定请求缓
  client_max_body_size 8m; #设定请求缓
  sendfile on; #开启高效文件传输模式,sendfile指令指定nginx是否调用sendfile函数来输出文件,对于普通应用设为 on,如果用来进行下载等应用磁盘IO重负载应用,可设置为off,以平衡磁盘与网络I/O处理速度,降低系统的负载。注意:如果图片显示不正常把这个改成off。
  autoindex on; #开启目录列表访问,合适下载服务器,默认关闭。
  tcp_nopush on; #防止网络阻塞
  tcp_nodelay on; #防止网络阻塞
  keepalive_timeout 120; #长连接超时时间,单位是秒
  
  #FastCGI相关参数是为了改善网站的性能:减少资源占用,提高访问速度。下面参数看字面意思都能理解。
  fastcgi_connect_timeout 300;
  fastcgi_send_timeout 300;
  fastcgi_read_timeout 300;
  fastcgi_buffer_size 64k;
  fastcgi_buffers 4 64k;
  fastcgi_busy_buffers_size 128k;
  fastcgi_temp_file_write_size 128k;
  
  #gzip模块设置
  gzip on; #开启gzip压缩输出
  gzip_min_length 1k; #最小压缩文件大小
  gzip_buffers 4 16k; #压缩缓冲区
  gzip_http_version 1.0; #压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
  gzip_comp_level 2; #压缩等级
  gzip_types text/plain application/x-javascript text/css application/xml;
  #压缩类型,默认就已经包含text/html,所以下面就不用再写了,写上去也不会有问题,但是会有一个warn。
  gzip_vary on;
  #limit_zone crawler $binary_remote_addr 10m; #开启限制IP连接数的时候需要使用
  
  upstream blog.ha97.com {
    #upstream的负载均衡,weight是权重,可以根据机器配置定义权重。weigth参数表示权值,权值越高被分配到的几率越大。
    server 192.168.80.121:80 weight=3;
    server 192.168.80.122:80 weight=2;
    server 192.168.80.123:80 weight=3;
  }

  #虚拟主机的配置
  server
  {
    #监听端口
    listen 80;
    #域名可以有多个,用空格隔开
    server_name www.ha97.com ha97.com;
    index index.html index.htm index.php;
    root /data/www/ha97;
    location ~ .*.(php|php5)?$
    {
      fastcgi_pass 127.0.0.1:9000;
      fastcgi_index index.php;
      include fastcgi.conf;
    }
    #图片缓存时间设置
    location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
    {
      expires 10d;
    }
    #JS和CSS缓存时间设置
    location ~ .*.(js|css)?$
    {
      expires 1h;
    }
    #日志格式设定
    log_format access '$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$http_referer" '
    '"$http_user_agent" $http_x_forwarded_for';
    #定义本虚拟主机的访问日志
    access_log /var/log/nginx/ha97access.log access;
    
    #对 "/" 启用反向代理
    location / {
      proxy_pass http://127.0.0.1:88;
      proxy_redirect off;
      proxy_set_header X-Real-IP $remote_addr;
      #后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      #以下是一些反向代理的配置,可选。
      proxy_set_header Host $host;
      client_max_body_size 10m; #允许客户端请求的最大单文件字节数
      client_body_buffer_size 128k; #缓冲区代理缓冲用户端请求的最大字节数,
      proxy_connect_timeout 90; #nginx跟后端服务器连接超时时间(代理连接超时)
      proxy_send_timeout 90; #后端服务器数据回传时间(代理发送超时)
      proxy_read_timeout 90; #连接成功后,后端服务器响应时间(代理接收超时)
      proxy_buffer_size 4k; #设置代理服务器(nginx)保存用户头信息的缓冲区大小
      proxy_buffers 4 32k; #proxy_buffers缓冲区,网页平均在32k以下的设置
      proxy_busy_buffers_size 64k; #高负荷下缓冲大小(proxy_buffers*2)
      proxy_temp_file_write_size 64k;
      #设定缓存文件夹大小,大于这个值,将从upstream服务器传
    }
    
    # 部署Vue单页应用的资源,需要配置Nginx以将所有非静态文件请求重定向到`index.html`
    location / { 
      root /path/to/vue-app/dist; 
      try_files $uri $uri/ /index.html; 
    }
    
    #设定查看Nginx状态的地址
    location /NginxStatus {
      stub_status on;
      access_log on;
      auth_basic "NginxStatus";
      auth_basic_user_file conf/htpasswd;
      #htpasswd文件的内容可以用apache提供的htpasswd工具来产生。
    }
    
    #本地动静分离反向代理配置
    #所有jsp的页面均交由tomcat或resin处理
    location ~ .(jsp|jspx|do)?$ {
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://127.0.0.1:8080;
    }
    #所有静态文件由nginx直接读取不经过tomcat或resin
    location ~ .*.(htm|html|gif|jpg|jpeg|png|bmp|swf|ioc|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma)$
    { expires 15d; }
      location ~ .*.(js|css)?$
    { expires 1h; }
  }
}

我们先了解一下它的特性

事件驱动架构

Nginx采用了异步非阻塞的事件驱动模型,使其在并发高、内存使用少的场景下表现优异。这一特性对前端尤为重要,因为静态资源(如HTML、CSS、JavaScript文件)的高效传输直接影响到页面加载速度和用户体验

反向代理与负载均衡

Nginx可以作为反向代理服务器使用,帮助前端资源与后端应用服务器之间进行高效、安全的通信。通过配置负载均衡,Nginx还能够在多个后端服务器间智能分配请求,增强Web应用的可用性和扩展性

高效的静态资源服务

Nginx对静态资源的处理极为高效,支持压缩、缓存等优化手段,可以显著减少网络传输时间和带宽消耗,加快网页渲染速度

介绍几个适用的网站

DevOps

这个网站讲的很详细,DevOps实践涉及到开发部门以及软件研发的整个生命周期,这意味着在整个开发生命周期中,涉及到一大批新旧工具,包括从规划、编码、测试、发布、监控等自动化的流程工,DevOps

可视化Nginx配置

用户通过网页简单的Nginx配置属性,即可获得配置文件,用户还可以指定静态资源的根目录、默认文件等,使得静态网站的部署变得既快速又容易,可以预览一下图片,UI做的还是非常精美的

Nginx下载大全

这个网站提供了Nginx版本相关的下载地址,找到自己想要的版本点击下载即可,还是非常方便的

相关推荐
stark张宇8 小时前
攻克 CRMRB 部署难点:从 PHP 扩展、数据库配置到进程守护
nginx·centos·php
罗政9 小时前
【免费】轻量级服务器centos监控程序+内存+cpu+nginx+适合小型站长使用
服务器·nginx·centos
椎4951 天前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
2301_787328491 天前
25.负载均衡-Nginx、HAProxy、LVS 全解析
nginx·负载均衡·lvs
siriuuus1 天前
Nginx 负载均衡调度算法
运维·nginx·负载均衡
tjsoft2 天前
设置 windows nginx.exe 每天 重启
运维·windows·nginx
舰长1152 天前
nginx 负载均衡配置
运维·nginx·负载均衡
foundbug9992 天前
查看nginx日志文件
linux·nginx·github
一只程序烽.2 天前
java项目使用宝塔面板部署服务器nginx不能反向代理找到图片资源
java·服务器·nginx
福大大架构师每日一题2 天前
nginx 1.29.2 发布:AWS-LC 支持、QUIC及SSL优化等重要更新
nginx·ssl·aws