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：设置反向代理的目标地址

ini 复制代码

# 全局块
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;
        }
    }
}

配置文件示例

bash 复制代码

########### 每个指令必须有分号结束。#################
#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 中文文档

命令	作用
nginx -s reload	重新加载配置文件，优雅重启
nginx -s reopen	重启日志文件
nginx -s stop	强制停止
nginx -s quit	安全退出（处理完正在进行中请求后停用）
nginx -t	检测配置文件地址以及检测配置是否正常
nginx -v	显示版本信息
nginx -h	显示帮助信息
pidof nginx	查看 nginx 进程 id
kill -9 <nginx_pid>	杀死 nginx 进程（<nginx_pid>是进程id）
killall nginx	杀死所有 nginx 进程

部署静态资源

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

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

1）配置 nginx

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

ini 复制代码

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 应用