Nginx安装配置方法、https配置、反向代理、重定向等

nginx安装和使用

一、nginx安装

1.1 编译安装

# 安装目录
cd /usr/local
# 下载nginx，解压
wget http://nginx.org/download/nginx-1.26.2.tar.gz
tar -zxvf nginx-1.26.2.tar.gz && cd /usr/local/nginx-1.26.2
# 安装依赖
apt-get install build-essential libpcre3 libpcre3-dev libgeoip-dev zlib1g zlib1g.dev libxslt-dev libgd-dev libatomic-ops-dev libperl-dev libssl-dev
# 编译
cd /usr/local/nginx-1.26.2
./configure --help
./configure --prefix=/usr/local/nginx --with-select_module --with-poll_module --with-threads --with-file-aio --with-http_ssl_module --with-http_v2_module --with-http_v3_module --with-http_realip_module --with-http_addition_module --with-http_xslt_module --with-http_image_filter_module --with-http_geoip_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_auth_request_module --with-http_random_index_module --with-http_secure_link_module --with-http_degradation_module --with-http_slice_module --with-http_stub_status_module --with-http_perl_module --with-http_sub_module --with-pcre --with-pcre-jit --with-debug --with-stream --with-stream_ssl_module --with-mail --with-mail_ssl_module --with-libatomic --with-stream_realip_module 
# 安装
make && make install

1.2直接安装

# 建议直接安装nginx
sudo apt update
sudo apt install nginx
# 配置Nginx文件（其中vue-app换成你自己项目的名字）
sudo nano /etc/nginx/sites-available/vue-app

二、配置文件模板

server {
    listen 80;
    server_name your_domain_or_ip;  # 替换为你的域名或 IP 地址

    root /var/www/vue-app;  # 替换为你的 dist 目录路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 如果需要配置 API 代理
    location /api {
        proxy_pass http://your_backend_server;  # 替换为后端 API 地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

• server_name：替换为你的域名或服务器 IP 地址。
• root：替换为你的 dist 目录路径（例如 /var/www/vue-app）。
• location /api：如果你的 Vue 应用需要调用后端 API，可以配置代理。

保存并退出编辑器（按 Ctrl+O 保存，按 Ctrl+X 退出）。

三、创建一个软链接，将 sites-available/vue-app 链接到 sites-enabled 目录：

sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/

特性	软链接 (Symbolic Link)	硬链接 (Hard Link)
作用	指向原文件路径	直接指向原文件数据块
是否依赖原文件	是（删除原文件，软链接失效）	否（删除原文件仍可访问）
是否可跨文件系统	可以	不可以
是否可指向目录	可以	不可以
占用空间	只占用少量路径信息	共享数据块，无额外空间

四、测试nginx配置

sudo nginx -t

五、重启nginx

sudo systemctl restart nginx

server {
    listen 443 ssl;
    server_name madeincxh.top;

    ssl_certificate /etc/letsencrypt/live/madeincxh.top/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/madeincxh.top/privkey.pem;

    root /var/www/vue-app-1002;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

https部署配置文件模板

server {
    listen 8019 ssl;
    server_name YouDomainName.com; # 这里替换成自己的域名！！

    root /etc/nginx/distDir/knowledge_master_dist;
    index index.html;
    
	#注意这里替换成自己的路径
    ssl_certificate CertificationPath; 
    ssl_certificate_key CertificationKayPath;
    
    location / {
        root /etc/nginx/distDir/knowledge_master_dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    location /query/{
        alias /etc/nginx/distDir/dist_dark_query/;
        index index.html;
        try_files $uri $uri/ /index.html;
        }
    location /query/assets/ {
    	alias /etc/nginx/distDir/dist_dark_query/assets/;
		}
    location /api/ {
        proxy_pass http://127.0.0.1:8989/;
        proxy_http_version 1.1;
        proxy_set_header Connection keep-alive;
        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_set_header X-Forwarded-Proto https;
    }
}

location的作用

location 是 Nginx 配置中非常重要的指令，用于根据请求的 URI（路径）匹配特定的配置块，从而对不同的请求路径应用不同的处理规则。它的作用是为不同的请求路径定义不同的行为，例如静态文件服务、反向代理、重定向等。

location 的基本语法

location [匹配模式] {
    # 配置指令
}

• 匹配模式：可以是前缀字符串、正则表达式或特殊的匹配模式。
• 配置指令：在匹配到该 location 块时，Nginx 会执行其中的指令。

---

location 的匹配模式

1. 前缀匹配：

   • 语法：location /path/ { ... }

   • 匹配以 /path/ 开头的 URI。

   • 例如：

     location /images/ {
         root /data;
     }
     

     请求 /images/logo.png 会映射到 /data/images/logo.png。

2. 精确匹配：

   • 语法：location = /exact/path { ... }

   • 只匹配完全相同的 URI。

   • 例如：

     location = /index.html {
         root /var/www/html;
     }
     

     只有请求 /index.html 时才会匹配，请求 /index.html/other 不会匹配。

3. 正则表达式匹配：

   • 语法：location ~ regex { ... }（区分大小写）或 location ~* regex { ... }（不区分大小写）。

   • 使用正则表达式匹配 URI。

   • 例如：

     location ~ \.php$ {
         proxy_pass http://backend;
     }
     

     匹配所有以 .php 结尾的请求。

4. 最长前缀匹配：

   • 语法：location ^~ /prefix/ { ... }

   • 匹配以 /prefix/ 开头的 URI，且优先级高于正则表达式匹配。

   • 例如：

     location ^~ /static/ {
         root /data;
     }
     

     匹配以 /static/ 开头的 URI，且优先级高于正则表达式匹配。

5. 通用匹配：

   • 语法：location / { ... }
   • 匹配所有请求，通常作为默认配置。

---

location 的优先级规则

Nginx 会按照以下优先级顺序匹配 location：

1. 精确匹配 (location = /path)：优先级最高。
2. 最长前缀匹配 (location ^~ /prefix/)：优先级高于正则表达式。
3. 正则表达式匹配 (location ~ regex 或 location ~* regex)：按配置文件中的顺序匹配。
4. 前缀匹配 (location /path/)：优先级最低。
5. 通用匹配 (location /)：作为默认配置。

---

location 的作用

1. 静态文件服务：

   • 使用 root 或 alias 指定文件路径，提供静态文件服务。

   • 例如：

     location /static/ {
         root /var/www;
     }
     

2. 反向代理：

   • 使用 proxy_pass 将请求转发到后端服务器。

   • 例如：

     location /api/ {
         proxy_pass http://backend;
     }
     

3. 重定向：

   • 使用 return 或 rewrite 实现 URL 重定向。

   • 例如：

     location /old/ {
         return 301 /new/;
     }
     

4. 访问控制：

   • 使用 allow 和 deny 控制访问权限。

   • 例如：

     location /admin/ {
         allow 192.168.1.0/24;
         deny all;
     }
     

5. 缓存配置：

   • 使用 proxy_cache 或 fastcgi_cache 配置缓存。

   • 例如：

     location /cache/ {
         proxy_cache my_cache;
         proxy_pass http://backend;
     }
     

6. 自定义错误页面：

   • 使用 error_page 定义错误页面。

   • 例如：

     location / {
         error_page 404 /404.html;
     }
     

---

示例配置

server {
    listen 80;
    server_name example.com;

    # 静态文件服务
    location /static/ {
        root /var/www;
    }

    # 反向代理
    location /api/ {
        proxy_pass http://backend;
    }

    # 精确匹配
    location = /index.html {
        root /var/www/html;
    }

    # 正则表达式匹配
    location ~ \.php$ {
        proxy_pass http://php_backend;
    }

    # 默认配置
    location / {
        try_files $uri $uri/ /index.html;
    }
}

alias 与 root 的区别：

1. root:
   • root 指令用于指定文件系统的根目录，Nginx 会将请求的 URI 附加到 root 指定的路径后面来查找文件。
   • 例如，如果 root 设置为 /etc/nginx/distDir/knowledge_master_dist，并且请求的 URI 是 /css/style.css，那么 Nginx 会尝试查找 /etc/nginx/distDir/knowledge_master_dist/css/style.css 文件。
2. alias:
   • alias 指令用于将请求的 URI 映射到文件系统中的某个特定路径，而不是将 URI 附加到 root 路径后面。
   • 例如，如果 alias 设置为 /etc/nginx/distDir/dist_dark_query/，并且请求的 URI 是 /query/index.html，那么 Nginx 会尝试查找 /etc/nginx/distDir/dist_dark_query/index.html 文件。
   • alias 通常用于将某个特定的 URI 路径映射到文件系统中的另一个路径，而不是简单地附加 URI。

反向代理的工作原理

反向代理（Reverse Proxy）是指代理服务器接收客户端的请求，然后将请求转发给后端服务器，并将后端服务器的响应返回给客户端。客户端并不知道它实际上是在与后端服务器通信，而是认为它在与代理服务器通信。

在你的配置中，location /api/ 部分配置了一个反向代理：

location /api/ {
    proxy_pass http://127.0.0.1:8989/;
    proxy_http_version 1.1;
    proxy_set_header Connection keep-alive;
    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_set_header X-Forwarded-Proto https;
}

• proxy_pass: 指定后端服务器的地址。Nginx 会将所有匹配 /api/ 的请求转发到 http://127.0.0.1:8989/。
• proxy_set_header: 这些指令用于设置转发给后端服务器的 HTTP 头信息。例如，X-Real-IP 会将客户端的真实 IP 地址传递给后端服务器。

try_files $uri $uri/ /index.html; 的作用

try_files 指令用于按顺序检查文件是否存在，并返回第一个找到的文件。如果所有文件都不存在，则返回最后一个参数指定的文件或路径。

• try_files $uri $uri/ /index.html;:
  • $uri: 首先检查请求的 URI 对应的文件是否存在。
  • $uri/: 如果文件不存在，检查是否存在一个目录与请求的 URI 对应。
  • /index.html: 如果前两个检查都失败，则返回 /index.html 文件。

这个配置通常用于单页应用（SPA），如使用 React 或 Vue.js 构建的应用。当用户刷新页面或直接访问某个路由时，Nginx 会尝试查找对应的文件或目录，如果找不到，则返回 index.html，由前端路由来处理路径。