nginx实战分析

下载安装

1）在 Windows 上安装

访问 nginx 官方网站 下载 Stable version 的 nginx 并解压，打开 cmd 进入 nginx 解压目录下，输入start nginx启动 nginx

2）验证 nginx 是否安装成功

在浏览器地址栏输入网址 http://localhost:80 ，回车，出现以下页面说明启动成功

nginx 配置说明

文件夹说明

nginx 安装目录中有如下这些文件夹：

• conf：通常包含 nginx 的配置文件，如nginx.conf，这是 nginx 的主配置文件，定义了全局设置、事件处理和 HTTP 服务等
• contrib：包含一些额外的工具和脚本
• docs：包含 nginx 的文档，这些文档可以帮助了解 nginx 的功能和配置方法
• html：包含 nginx 的默认网页文件。当用户访问 nginx 服务器时，如果没有指定特定的页面，nginx 会默认提供这个目录下的网页，如上面的 welcome to nginx 页面
• logs：存放 nginx 的日志文件，这些日志文件记录了服务器的运行状态、访问信息等
• temp：存放 nginx 运行时产生的临时文件

文件结构

在/nginx/conf/nginx.conf中，文件结构如下，nginx 的配置文件通常分为几个主要部分：

1）全局块

• 位置：配置文件的最顶部

• 作用：设置影响整个 nginx 服务器的全局参数，如用户组、进程数、日志路径等

• 示例指令：

  • user：指定运行 nginx 的用户
  • pid：指定存储 nginx 进程 id 的文件路径

2）events 块

• 位置：紧跟在全局块之后

• 作用：配置网络连接的处理方式，如每个进程的最大连接数、事件驱动模型等

• 示例指令：

  • worker_connections：设置每个工作进程的最大连接数
  • use：指定事件模型，如epoll、kqueue等

3）http 块

• 位置：events 块之后

• 作用：定义 HTTP 相关的配置，如代理设置、缓存、日志格式、MIME 类型等

• 示例指令：

  • sendfile：启用或禁用 sendfile 传输文件
  • keepalive_timeout：设置保持连接的超时时间

4）server 块

• 位置：http 块内部，可以有多个

• 作用：配置虚拟主机的相关参数，如监听端口、域名、根目录等

• 示例指令：

  • listen：指定服务器监听的端口
  • server_name：指定服务器的域名
  • root：指定网站的根目录

5）location 块

• 位置：server 块内部，可以有多个

• 作用：定义请求的路由和页面处理规则，如静态文件服务、反向代理等

• 示例指令：

  • root：指定 location 块的根目录
  • index：指定默认页面
  • proxy_pass：设置反向代理的目标地址

# 全局块
worker_processes  1;

# events块
events {
    worker_connections  1024;
}

# http块
http {
    # http全局块
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    # server块
    server {
        # server全局块
        listen       80;
        server_name  localhost;

        # location块
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

配置文件示例

########### 每个指令必须有分号结束。#################
#user administrator administrators;  #配置用户或者组，默认为 nobody nobody。
#worker_processes 2;  #允许生成的进程数，默认为1
#pid /nginx/pid/nginx.pid;   #指定nginx进程运行文件存放地址
error_log log/error.log debug;  #制定日志路径，级别。这个设置可以放入全局块，http块，server块，级别以此为：debug|info|notice|warn|error|crit|alert|emerg
events {
    accept_mutex on;   #设置网路连接序列化，防止惊群现象发生，默认为on
    multi_accept on;  #设置一个进程是否同时接受多个网络连接，默认为off
    #use epoll;      #事件驱动模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
    worker_connections  1024;    #最大连接数，默认为512
}
http {
    include       mime.types;   #文件扩展名与文件类型映射表
    default_type  application/octet-stream; #默认文件类型，默认为text/plain
    #access_log off; #取消服务日志    
    log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定义格式
    access_log log/access.log myFormat;  #combined为日志格式的默认值
    sendfile on;   #允许sendfile方式传输文件，默认为off，可以在http块，server块，location块。
    sendfile_max_chunk 100k;  #每个进程每次调用传输数量不能大于设定的值，默认为0，即不设上限。
    keepalive_timeout 65;  #连接超时时间，默认为75s，可以在http，server，location块。

    upstream mysvr {   
      server 127.0.0.1:7878;
      server 192.168.10.121:3333 backup;  #热备
    }
    error_page 404 https://www.baidu.com; #错误页
    server {
        keepalive_requests 120; #单连接请求上限次数。
        listen       4545;   #监听端口
        server_name  127.0.0.1;   #监听地址       
        location  ~*^.+$ {       #请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。
           #root path;  #根目录
           #index vv.txt;  #设置默认页
           proxy_pass  http://mysvr;  #请求转向mysvr 定义的服务器列表
           deny 127.0.0.1;  #拒绝的ip
           allow 172.18.5.54; #允许的ip           
        } 
    }
}

nginx 常用命令

要启动 nginx，需要运行可执行文件。一旦 nginx 启动，就可以通过带-s参数调用可执行文件来控制它。以下是一些常用命令，更多可参考 nginx 中文文档

部署静态资源

在部署之前，需要对项目进行构建，详细可参考：Webpack 搭建 Vue3 脚手架详细步骤

部署静态资源分以下几个步骤：

1）配置 nginx

在/nginx/conf/nginx.conf中，添加一个新的 server 块来托管静态资源，例如：

server {
    listen 80;
    server_name localhost;

    location / {
        root /path/to/your/dist/directory;  # 替换为你的构建输出目录
        index index.html;
    }
}

确保将/path/to/your/dist/directory替换为dist目录的实际路径，示例如下图所示：

PS：确保构建生成的 dist 里面有 index.html，否则访问会出现 403forbidden 的错误

部署多的项目就添加 server 块，配置不同的监听端口、域名或路径

2）重启 nginx

保存配置文件并重启 nginx：

nginx -s reload

3）测试部署

在浏览器中访问http://localhost，就能看到 Vue 应用