前端需要掌握的 Nginx 配置

前言

当谈到前端开发时，很少有人会将 Nginx 放在首要位置。通常，前端开发人员将其主要精力投入到HTML、CSS、JavaScript 和各类前端框架上，而将服务器配置等任务留给后端或者运维工程师。然而 Nginx 配置对于前端开发人员同样至关重要，熟悉 Nginx 配置能够更好地理解网站的全貌。

Nginx 作用

Nginx 是一个高性能的 HTTP 和反向代理 web 服务器，同时也提供了 IMAP/POP3/SMTP 服务。Nginx 对前端开发人员具有重要作用，主要表现在以下几个方面：

1. 前端资源管理和交付

Nginx 可以用来管理前端资源文件的静态文件服务。通过 Nginx 的配置，前端工程师可以实现文件压缩、缓存控制，以及快速资源传输，从而加速网页加载速度，提高用户体验。

2. 接口代理

Nginx 允许前端开发人员设置接口代理，将客户端请求路由到后端服务器，实现反向代理和负载均衡。这有助于分散流量，提高应用程序的可用性，减轻后端服务器的负载，使应用程序更加稳定和高效。

3. HTTPS 设置

Nginx 的SSL/TLS配置能够帮助前端开发人员为网站启用HTTPS，加密数据传输，保护用户隐私，提高网站的安全性。此外，搜索引擎对启用 HTTPS 的网站给予更高的排名，对于前端 SEO 也至关重要。

4. URL 重写和重定向

Nginx 允许前端开发人员执行 URL 重写和重定向操作，以改进网站的可访问性和搜索引擎优化。这有助于实现友好的 URL 结构，提高网站的可发现性。

5. 缓存管理

Nginx 支持反向代理缓存，允许前端开发人员缓存静态内容和动态内容，从而减轻服务器负载，加速内容传输，降低带宽成本。

Nginx 安装

以 CentOS 系统为例，一般有软件包安装和手动安装两种方式：

1. 软件包安装

bash 复制代码

# nginx 不在 yum 官方源中，需要安装三方的 yum 源
yum -y install epel-release

# 更新 yum 源
yum -y update

# 安装 nginx 默认最新版本
yum install -y nginx

检查或者安装 nginx 需要的依赖：

perl 复制代码

# 检查
yum list installed | grep gcc pcre-devel zlib-devel openssl openssl-devel

# 安装
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

验证安装是否成功：

bash 复制代码

# 启动 nginx
systemctl start nginx

# 检查 nginx 状态
systemctl status nginx

# 配置 nginx 在系统启动时自动启动
systemctl enable nginx

2. 手动安装

在官网下载 nginx 压缩包，目前最新的版本为 nginx-1.25.2。

使用 rz 命令或者 sftp 工具将文件上传到服务器。

解压压缩包：

复制代码

tar zvxf nginx-1.25.2.tar.gz

编译并安装，默认安装的路径是 /usr/local/nginx，也可以通过 ./configure --prefix=路径 配置安装地址。

bash 复制代码

# 进入目录
cd nginx-1.25.2

# 检查配置生成 makefile
./configure

# 编译并安装
make && make install

在安装目录启动 nginx：

bash 复制代码

/usr/local/nginx/sbin/nginx

Nginx 配置

找到 nginx 的配置文件，一般 yum 安装在 /etc/nginx/nginx.conf 目录，手动安装在 /usr/local/nginx/conf/nginx.conf 目录。

1. 常规配置

perl 复制代码

http {
    client_max_body_size 10m;           # 请求体大小限制
    
    server {
       listen         80;               # 监听的端口
       server_name    localhost;        # 域名/ip
    }
}

2. 前端静态资源配置

在 server 下配置 location 规则：

bash 复制代码

location / {
    root  /home/admin/frontend/;         # 前端打包后的项目目录
    index  index.html index.htm;         # 入口文件
    try_files $uri $uri/ /index.html;    # 使用 history 路由时的查找规则，避免 404
    error_page 405 =200 $uri;
}

3. 二级资源目录配置

假设有一个 mobile 项目与前一个项目共用同一个域名/端口，用二级路由访问时，需要配置二级资源目录：

bash 复制代码

location /mobile/ {
    alias  /home/admin/mobile-frontend/;
    index  index.html index.htm;
    try_files $uri $uri/ /mobile/index.html;
    error_page 405 =200 $uri;
}

同时需要在项目中配置路由 basename 和打包的 base 路径为 /mobile。

4. 接口代理配置

约定代理字段为 gateway 时：

bash 复制代码

location ^~ /gateway {
   proxy_pass 代理地址;
}

4. https 配置

将 ssl 证书文件上传到服务器，一般是一个 .pem 文件和一个 .key 文件。

ini 复制代码

server {
   listen         80;
   server_name    localhost;
   rewrite ^(.*)$ https://${host}$1 permanent;  # 当访问 http 时转到 https
}

server {
    listen       443 ssl;
    server_name  localhost;

    ssl_certificate     .pem 文件路径;
    ssl_certificate_key .key 文件路径;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
        ...
    }
}

5. 修改配置后重启 nginx

bash 复制代码

# 检查配置是否正确
/usr/local/nginx/sbin/nginx -t 

# 通过原生命令重启
/usr/local/nginx/sbin/nginx -s reload

# 通过 systemctl 重启
systemctl restart nginx

总结

本文介绍了一些前端开发人员需要了解的 Nginx 配置方面的关键内容。我们探讨了 Nginx 的基本安装和启动过程，如何处理静态资源，以及如何实现反向代理、HTTPS 配置。当然 Nginx 能做的远不止这些，还有更多的功能等待我们学习。