Nginx入门与反向代理（一）

胡萝卜一号
141 阅读6分钟

Nginx

Nginx是什么

Nginx是一款高性能的开源Web服务器软件，也可以作为反向代理服务器、负载均衡器和HTTP缓存等使用。它具有轻量级、高并发、低内存消耗和高度可扩展等特点，广泛应用于构建高性能的Web应用和提供静态内容服务。

为什么使用Nginx

Nginx作为广泛使用的Web服务器，具有如下优点，来帮助我们更好更快的完成前端项目部署：

  • 高性能：Nginx 的设计和实现使其能够处理大量并发连接，具有出色的性能表现。它采用异步、事件驱动的方式处理请求，能够高效地处理并发请求，适用于高流量的网站和应用。
  • 低内存消耗：Nginx 的内存使用效率非常高，相较于传统的 Web 服务器，它对系统资源的占用较少，可以在资源受限的环境中运行。
  • 可扩展性：Nginx 支持多进程和多线程模型，可以有效地利用多核 CPU，以支持大规模和高并发的请求。
  • 反向代理和负载均衡：Nginx 可以作为反向代理服务器，将请求转发给后端的多个服务器，实现负载均衡，提高应用程序的可用性和性能。
  • 静态文件服务：Nginx 可以高效地提供静态文件的服务，如图片、CSS、JavaScript 等，减轻动态请求的压力，提高网页加载速度。
  • SSL/TLS 支持：Nginx 可以处理 HTTPS 流量，提供安全的加密传输和证书管理，保障数据安全。
  • 虚拟主机支持：Nginx 允许配置多个虚拟主机，使得可以在同一台服务器上托管多个域名和网站。
  • 灵活的配置：Nginx 配置文件使用简洁、直观的语法，易于理解和维护。它可以灵活配置各种功能和策略，满足不同需求的应用场景。
  • 模块化架构：Nginx 的模块化架构使其支持丰富的第三方模块，可以根据需求灵活地添加或定制功能。

下载与使用

使用yum进行包管理 : sudo yum install nginx

若nginx下载成功，可以使用 nginx -v，来查看nginx版本

image.png

Nginx基础命令

sudo systemctl start nginx # 运行 nginx 默认监听端口:80
sudo systemctl stop nginx # 中止 nginx 进程 根据/run/nginx.pid文件
sudo systemctl reload nginx # 重新加载 nginx
sudo systemctl status nginx # 检查 nginx 服务状态

sudo systemctl start nginx 来启动nginx服务后，可使用 sudo systemctl status nginx 查看服务当前运行状态，下图状态则表示启动成功。

image.png

因为在浏览器中，默认访问的端口为 80 端口，因此，当你在浏览器中直接输入 http://example.com（省略了端口号）时，实际上是使用了 80 端口, 而Nginx配置文件nginx.conf中默认监听端口为80,所以当Nginx启动后，就可以通过你的公网IP（不需要添加端口号）访问到Nginx的默认页面。

image.png

Nginx相关文件

网站根目录

Nginx 通常会使用 /usr/share/nginx/html 作为默认的网站根目录，即存放网站文件的位置。这个目录下的文件将通过 Nginx 服务器提供给客户端，目录具体详情如下：

image.png

配置文件

Nginx 的主要配置文件通常位于 /etc/nginx 目录下。主要的配置文件是 nginx.conf，其他配置文件可能会放在 conf.d 或 sites-available 目录中，具体的组织结构可能因不同的系统而有所差异，/etc/nginx目录具体详情如下：

image.png

基础配置则在nginx.conf中,具体配置含义如下：

user nginx;
worker_processes auto; # 定义 Nginx 启动的 worker 进程数量，通常设置为 CPU 核心数的倍数，用于处理并发连接。
error_log /var/log/nginx/error.log; # 指定错误日志文件的路径
pid /run/nginx.pid; # 运行所占用的PID

include /usr/share/nginx/modules/*.conf; # 引入外部配置

# 用于配置与事件驱动模型相关的参数，比如连接的超时时间、使用的网络模型等。
events {
    worker_connections 1024; # 用于设置每个 worker 进程的最大并发连接数。
}

http {
    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  /var/log/nginx/access.log  main; # 指定访问日志文件的路径，记录客户端请求的访问信息，包括请求的 URL、状态码等。

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;
    
    # 定义一个虚拟主机，用于处理特定域名或 IP 的请求。在这个块内可以配置该虚拟主机的监听端口、服务器名称、根目录等
    server { 
        listen       8181 default_server; # 监听端口,如将 80端口 => 8181端口
        listen       [::]:8181 default_server; # 监听端口,如将 80端口 => 8181端口
        server_name  _; # 用于定义服务器块的名称。在这里，`_` 是一个通配符，表示这是一个默认服务器，即当请求的域名不匹配任何其他虚拟主机时，Nginx 将使用这个默认服务器处理请求。
        root         /usr/share/nginx/html; # 定义了服务器块的根目录，即网站文件的根目录。在这里，Nginx 将会从 `/usr/share/nginx/html` 目录中查找网站的文件。

        include /etc/nginx/default.d/*.conf;
        
        # 用于匹配 URL 路径，并定义相应的处理规则。这里的 `/` 表示匹配所有请求，即所有请求都会被这个 `location` 块处理。由于这个块内没有配置任何具体的处理规则，所以请求将被默认处理，即返回一个空响应。
        location / {
        }

        error_page 404 /404.html; # 表示当出现 404 错误（页面未找到）时，将会返回 `/404.html` 页面作为错误页面
            location = /40x.html {
            # 指定了 `/40x.html` 的处理规则，可自定义返回页面
        }

        error_page 500 502 503 504 /50x.html; # 表示当出现 500、502、503 或 504 错误时，将会返回 `/50x.html` 页面作为错误页面
            location = /50x.html {
            # 指定了 `/50x.html` 的处理规则，可自定义返回页面
        }
    }

更改sever中的listen的端口为8181后，就可通过公网IP:新端口号进行访问，如下图:

image.png 如访问不成功，可去云服务器控制台的防火墙当中，看一下当前监听端口是否对外开放:

image.png

日志文件

Nginx 的访问日志和错误日志通常位于 /var/log/nginx 目录下。访问日志记录所有请求的访问信息，错误日志记录 Nginx 服务器运行中的错误和警告，具体详情如下图：

image.png

反向代理

什么是反向代理

反向代理（Reverse Proxy）是一种网络代理服务，它作为服务器的前端，接收客户端的请求，并将这些请求转发给后端服务器。与传统的正向代理不同，反向代理不是代理客户端访问外部服务器，而是代理服务器接收客户端的请求，并将请求转发给内部的后端服务器，然后再将后端服务器的响应返回给客户端。

反向代理注意点
  1. 理解proxy_pass:

该指令用于设置代理服务器的地址, 可以是主机名称, 也可是ip地址加上服务使用的端口号

server {
    listen              8181;
    listen         [::]:8181;
    server_name     mydomain.com; //接口的域名
    // server_name   42.193.237.18; //也可以使用你的IP地址
    
    

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri /index.html;
        index   index.html index.htm;
    }

    location /api/ {
        proxy_pass      http://blogapi:3001/;
        // proxy_pass      http://42.193.237.18:3001/; 根据当前情况选择域名或IP
        
    }

    error_page   500 502 503 504  /50x.html;
    location =  /50x.html {
        root /usr/share/nginx/html;
    }
}

上述配置含义为监听8181端口，因为server_name设置为mydomain.com,即当客户端发起类似http://mydomain.com/*请求时，会通过location / {}匹配到/usr/share/nginx/html路径下所属文件,但当发起http://mydomain.com/api/*时，会通过location /api/ {},反向代理到 http://blogapi:3001/路径下

  1. 理解 proxy_pass http://blogapi:3001/与proxy_pass http://blogapi:3001的区别

proxy_pass 配置中 url 末尾不存在反斜杠（ / ）时，则直接客户端的请求的path，拼接在 proxy_pass 中 url 之后; proxy_pass 配置中 url 末尾存在反斜杠（ / ）时 则将原客户端请求去除 location匹配表达式后的内容拼接在 proxy_pass 中的 url 之后

如下配置中，因为location块使用了 '/api/' 作为uri变量的值来匹配的，当请求http://mydomain.com/api/article/findArticle时，请求的path为/api/article/findArticle配置1(不存在 / )， 所以将path直接拼接到代理路径上，后端服务器接收到的请求为 http://blogapi:3001/api/article/findArticle，而配置2存在（ / ），将path中的 location的匹配表达式（/api/）去除，拼接到配置2中的代理路径上，所以后端服务器接收到的请求为http://blogapi:3001/article/findArticle

server {
    listen              8181;
    listen         [::]:8181;
    server_name     mydomain.com;
    
    location /api/ {
          配置1： proxy_pass      http://blogapi:3001;
          配置2： proxy_pass      http://blogapi:3001/;
    }

    error_page   500 502 503 504  /50x.html;
    location =  /50x.html {
       ...
    }
}

一个简单的小例子

了解了Nginx的一些基础命令与配置，我们就可以尝试部署一个简单前端项目到自己的服务器上了

这里挑选了一个react的项目，进入当前项目文件夹后，我们运行npm run build 或者 yarn build，对当前项目进行构建 image.png 构建完成后，可以看到当前项目下会出现一个build文件夹,将此文件夹上传到你的服务器当中

image.png 将Nginx网站根目录当中的文件，替换为build文件夹中的内容

image.png 因为Nginx配置默认监听80端口, 所以替换完成后, 就可以通过自己的公网IP, 访问到自己的单页面应用了

image.png

avatar
文章
阅读
粉丝