简介本文详细介绍了Nginx配置文件nginx.conf的基本结构及其优化方法。首先通过删除注释简化了原始配置使其更易理解。接着文章将nginx.conf分为全局块、events块和http块三部分进行详细解析帮助读者更好地掌握其功能与配置。此外还介绍了如何通过简单修改实现网站上线并提供了Nginx的优化技巧包括解决前端History模式下的404问题、配置反向代理、开启gzip压缩、设置维护页面、在同一IP上部署多个网站以及实现动静分离等。最后附上了Nginx的基础命令如安装、启动、重启和关闭等操作方便读者实践应用。前言对于自己上线项目的前端来说nginx也是必须要了解和熟悉的查了很多的nginx文章看着写的都很详细但是却没有了整体的概念。这里就重新梳理一遍也理清思路。我们在安装nginx之后会自动生成很多的文件但是nginx.conf这个文件是我们的核心如何去正确的修改和优化它是nginx的核心。首先我们可以先看下原本的配置你会觉得无所适从因为感觉这个鬼东西也太多了吧。而且感觉根本就不理解也不知道该怎么写。下面就一步一步的教你如何入门到熟悉一.nginx.conf原本配置到解释看到这个118行是不是觉得有点害怕​ #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main $remote_addr - $remote_user [$time_local] $request # $status $body_bytes_sent $http_referer # $http_user_agent $http_x_forwarded_for; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apaches document root # concurs with nginxs one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} } ​没关系我们把其中的注释都删掉除掉了注释之后的nginx代码现在只有22行了。感觉好多了worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location /50x.html { root html; } } }注解版本#nginx进程数建议设置为等于CPU总核心数。 worker_processes 1; # 事件区块开始 events { #单个进程最大连接数最大连接数连接数*进程数 #根据硬件调整和前面工作进程配合起来用尽量大但是别把cpu跑到100%就行。每个进程允许的最多连接数理论上每台nginx服务器的最大连接数为。 worker_connections 1024; } #设定http服务器利用它的反向代理功能提供负载均衡支持 http { #include导入外部文件mime.types将所有types提取为文件然后导入到nginx配置文件中 include mime.types; #默认文件类型 default_type application/octet-stream; #开启高效文件传输模式sendfile指令指定nginx是否调用sendfile函数来输出文件对于普通应用设为 on如果用来进行下载等应用磁盘IO重负载应用可设置为off以平衡磁盘与网络I/O处理速度降低系统的负载。注意如果图片显示不正常把这个改成off。 #sendfile指令指定 nginx 是否调用sendfile 函数zero copy 方式来输出文件对于普通应用必须设为on。如果用来进行下载等应用磁盘IO重负载应用可设置为off以平衡磁盘与网络IO处理速度降低系统uptime。 sendfile on; #长连接超时时间单位是秒 keepalive_timeout 65; # 第一个Server区块开始表示一个独立的虚拟主机站点 server { # 提供服务的端口默认80 listen 80; # 提供服务的域名主机名 server_name localhost; #对 / 启用反向代理,第一个location区块开始 location / { root html; #服务默认启动目录 index index.html index.htm; # 默认的首页文件多个用空格分开 } # 错误页面路由 error_page 500 502 503 504 /50x.html; # 出现对应的http状态码时使用50x.html回应客户 location /50x.html { # location区块开始访问50x.html root html; # 指定对应的站点目录为html } } }二.整体基本理解虽然上面有了注解但是看起来还是很迷糊。接着解释我们可以把nginx.conf分为三个部分进行理解第一部分全局块第二部分events块第三部分http块对应图解全局块作用从配置文件开始到 events 块之间的内容主要会设置一些影响nginx 服务器整体运行的配置指令主要包括配 置运行 Nginx 服务器的用户组、允许生成的 worker process 数进程 PID 存放路径、日志存放路径和类型以 及配置文件的引入等。比如上面第一行配置的worker_processes 1;这是 Nginx 服务器并发处理服务的关键配置worker_processes 值越大可以支持的并发处理量也越多但是 会受到硬件、软件等设备的制约。events块作用events 块涉及的指令主要影响 Nginx 服务器与用户的网络连接常用的设置包括是否开启对多 work process 下的网络连接进行序列化是否 允许同时接收多个网络连接选取哪种事件驱动模型来处理连接请求每个 word process 可以同时支持的最大连接数等。worker_connections 1024;上述例子就表示每个 work process 支持的最大连接数为 1024。这部分的配置对 Nginx 的性能影响较大在实际中应该灵活配置。http块作用这算是 Nginx 服务器配置中最频繁的部分代理、缓存和日志定义等绝大多数功能和第三方模块的配置都在这里。需要注意的是http 块也可以包括 http全局块、server 块。http全局块http全局块配置的指令包括文件引入、MIME-TYPE 定义、日志自定义、连接超时时间、单链接请求数上限等。server 块这块和虚拟主机有密切关系虚拟主机从用户角度看和一台独立的硬件主机是完全一样的该技术的产生是为了 节省互联网服务器硬件成本。每个 http 块可以包括多个 server 块而每个 server 块就相当于一个虚拟主机。而每个 server 块也分为全局 server 块以及可以同时包含多个 locaton 块。全局 server 块最常见的配置是本虚拟机主机的监听配置和本虚拟主机的名称或IP配置。location 块一个 server 块可以配置多个 location 块。这块的主要作用是基于 Nginx 服务器接收到的请求字符串例如 server_name/uri-string对虚拟主机名称 也可以是IP 别名之外的字符串例如 前面的 /uri-string进行匹配对特定的请求进行处理。地址定向、数据缓 存和应答控制等功能还有许多第三方模块的配置也在这里进行。三.最简单的上线以上我们就知道了nginx整体大致的结构以及每部分的结构是用于做什么的。接下来我们就修改nginx关键位置来实现我们网站的代理功能。看着nginx配置很繁琐但是如果你只是需要上线一个网站那么你只需要去修改两个地方即可我们可以使用默认简单的配置然后指定server_name和root主要是告诉nginx代理的ip是xxx然后我放在服务器的文件在bbb文件夹即可。nginx便会在用户访问这个ip时自动的将bbb文件夹中的index.html返回到浏览器来展示页面。四.nginx优化1.前端history模式404问题location / { try_files $uri $uri/ /index.html; }这段代码的作用是当用户刷新页面时Nginx会先检查当前URL是否存在如果不存在就会尝试访问index.html从而可以正常显示页面。2.反向代理相信大家作为前端都了解跨域问题目前前端的主流解决跨域的方式就是开发生产cors解决开发proxy生产nginx解决。如何配置​ #接口端 location /police/ { proxy_pass http://192.168.1.182:8852/police/; proxy_redirect default; proxy_http_version 1.1; proxy_connect_timeout 60; proxy_send_timeout 60; proxy_read_timeout 90; } ​具体位置理解这段代码的意思大致就是如果遇到以/police请求开头的接口那么就去访问这个ip地址(http://192.168.1.182:8852/police/)的后台端口。例如我们通过axios去访问/police/getList这个后台接口时nginx会将这个请求转发到ip端口为http://192.168.1.182:8852的后台中后台将结果返回给nginxnginx再把结果给到浏览器实现反向代理。定义多个端口的反向代理copy上面的直接修改代理头和proxy_pass即可。3.开启gzip作用开启gzip对于前端来说还是比较重要的浏览器加载的包大概能节约一半的空间。例如首页需要加载a.js文件该文件为900kb在开启gzip之后浏览器会去加载a.js经过gzip之后的文件a.js.gz大概只有450kb能够很好的提升浏览速度。如何配置gzip on; # 默认off是否开启gzip gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xmlrss text/javascript; # 上面两个开启基本就能跑起了下面的愿意折腾就了解一下 gzip_static on; gzip_proxied any; gzip_vary on; gzip_comp_level 6; gzip_buffers 16 8k; # gzip_min_length 1k; gzip_http_version 1.1;具体位置4.维护页面作用在系统进行维护升级时用户打开我们的网站看到的维护页面。如何配置# 系统临时维护请打开下面这行注释并重启nginx,维护完毕后请注释下年这行,并重启nginx# rewrite ^(.*)$ /maintainace.html break;具体位置5.一个ip上线多个网站作用只有一个ip。利用nginx上线多个网站。例如访问192.168.1.154:8080访问我们的个人博客网站访问192.168.1.154:8081访问我们的直播网站。如何配置直接复制server块即可一个server块就代表了一个网站需要改端口和文件的路径等内容。# 第一个网站个人博客项目配置 server { listen 8080; root /data/www/hexo; index index.html; location / { try_files $uri $uri/ /index.html; # 路由模式history的修改 } } # 第二个网站直播网站项目配置 server { listen 8081; root /data/www/geov; index index.html; location / {} }具体位置注意点这里的8081一定要你的服务器开放了这个端口才可以使用否则你按照这个配置了也会访问不到让后端去配。如果是云服务器比如阿里云腾讯云则需要开放相应的入口为8081,否则用户访问不到。6.动静分离作用在Web开发中通常来说动态资源其实就是指那些后台资源而静态资源就是指HTMLJavaScriptCSSimg等文件。一般来说都需要将动态资源和静态资源分开将静态资源部署在Nginx上当一个请求来的时候如果是静态资源的请求就直接到nginx配置的静态资源目录下面获取资源如果是动态资源的请求nginx利用反向代理的原理把请求转发给后台应用去处理从而实现动静分离。在使用前后端分离之后可以很大程度的提升静态资源的访问速度同时在开过程中也可以让前后端开发并行可以有效的提高开发时间也可以有些的减少联调时间 。解析实际上我们在代理前端的html和接口时就已经做到了动静分离。我们打包后的dist包实际上就是纯静态的资源所以直接访问nginx静态资源服务器就不需要经过后台的tomcat。访问接口时就需要nginx先去访问后台服务器拿到结果再给到浏览器图解如何配置其实是优化因为一般配置会有动静分离假设有比较大的图片等需要放置到服务器上然后通过nginx来转发。或者是有一个纯前端的开源项目如pdf.js也需要放在服务器上。如果放在本地代码包打包出来体积会很大。location /image/ { root /var/filecenter/; } location /static/ { root /var/filecenter/; } location /car/ { root /var/filecenter/; } location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|js|css)$ { root /Users/dalaoyang/Downloads/static; }具体位置7.其他优化这里只讲了一些nginx基础的知识和一些基础的优化基本上够用了。但是如果你需要追求更高的性能那么可以添加其他的优化只需要根据一些搜索到的文章内容copy过来就行了nginx主要还是配置多一些但是理解了整体结构和脉络的话其实就还是蛮简单的。这里就不做过多的讲解了。五.nginx基础命令安装启动重启关闭安装nginx yum install nginx 看是否有nginx进程 netstat -anput | grep nginx 查看服务器端口占用情况 netstat -ntlp nginx启动: nginx nginx重启: nginx -s reload 关闭nginx nginx -s stop : 快速停止nginx nginx -s quit 完整有序的停止nginx 查看默认的nginx配置文件路径 nginx -t注如果有nginx.conf配置的更改需要重启nginx配置才会生效。如果只是更改dist包/html则可以不重启nginx。