前端项目配置 Nginx 全攻略

        在前端开发中，项目开发完成后，如何高效、稳定地将其部署到生产环境是至关重要的一步。Nginx 作为一款轻量级、高性能的 Web 服务器和反向代理服务器，凭借其出色的性能和丰富的功能，成为了前端项目部署的首选方案。本文将详细介绍在 Nginx 已安装好的基础上，如何进行前端项目的配置，让你的前端项目顺利上线。

一、Nginx 基础认知

1.1 工作原理

Nginx 采用事件驱动的异步非阻塞处理方式，在处理大量并发连接时表现出色。它通过多个工作进程监听客户端请求，每个工作进程可以处理多个连接，避免了传统服务器在高并发场景下的性能瓶颈。

1.2 核心配置文件

Nginx 的核心配置文件存放位置会因安装方式和操作系统的不同而有所变化，当然也可以在定义安装路径。我的核心配置文件位于 /usr/local/nginx/conf/nginx.conf 。同时，为了方便管理不同的项目，我们可以在 /usr/local/nginx/conf 目录下创建一个 conf.d 子目录，用于存放各个项目的独立配置文件。

二、前端静态资源部署

2.1 准备前端项目

那目前已完成了前端项目的开发，并使用构建工具Webpack进行了打包，生成了包含 HTML、CSS、JavaScript、图片等的静态文件。将这些打包后的文件存放在一个指定的目录下，例如 /var/www/my-frontend-project 。

其中如果本地机器和服务器之间能够通过 SSH 正常通信，把文件上传到服务器可以通过scp命令

scp -r /home/user/my-frontend-project username@server_ip:/var/www/

• username ：你在服务器上的登录用户名。
• server_ip ：服务器的 IP 地址。

2.2 配置 Nginx

2.2.1 创建项目配置目录

首先，在 /usr/local/nginx/conf 目录下创建 conf.d 目录（如果该目录不存在）：

mkdir -p /usr/local/nginx/conf/conf.d

2.2.2 创建项目配置文件

在 conf.d 目录下创建一个新的配置文件，例如 my-frontend-project.conf ，并添加以下内容：

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/my-frontend-project;
    index index.html index.htm;

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

• listen 80：指定 Nginx 监听的端口号为 80，这是 HTTP 协议的默认端口。
• server_name your_domain_or_ip：填写服务器的域名或 IP 地址，以便客户端能够通过该地址访问项目。
• root /var/www/my-frontend-project：指定前端项目的根目录，Nginx 将从该目录中查找并返回静态文件。
• index index.html index.htm：设置默认的索引文件，当客户端访问根目录时，Nginx 会优先返回 index.html 或 index.htm 文件。
• location /：配置根路径的请求处理规则，try_files $uri $uri/ /index.html 表示当请求的文件不存在时，返回 index.html 文件，这对于单页面应用（SPA）非常重要。

注意：使用80端口之前通过“netstat -ntulp | grep 80”命令确认80端口是否被占用， 如果被占用可以换一个端口，避免影响其他业务。

2.2.3 引入项目配置文件

在 /usr/local/nginx/conf/nginx.conf 文件中添加以下语句，以确保 conf.d 目录下的配置文件被加载：

include /usr/local/nginx/conf/conf.d/*.conf;

2.3 检查配置并重启 Nginx

在修改完配置文件后，需要检查配置文件是否存在语法错误：

/usr/local/nginx/sbin/nginx -t

 如果检查通过，重启 Nginx 服务使配置生效：

/usr/local/nginx/sbin/nginx -s reload

2.4 验证部署

在浏览器中输入服务器的域名或 IP 地址，如果能够看到前端项目的页面，说明部署成功。

三、静态资源缓存配置

为了提高前端项目的性能，减少服务器的负载，可以对静态资源进行缓存配置。在 my-frontend-project.conf 文件中添加以下内容：

location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

• location ~* \.(css|js|png|jpg|jpeg|gif|ico)$：匹配 CSS、JavaScript、图片等静态资源文件。
• expires 30d：设置静态资源的缓存时间为 30 天，客户端在 30 天内再次请求该资源时，将直接使用本地缓存。
• add_header Cache-Control "public, no-transform"：添加 Cache-Control 头信息，允许公共缓存，不进行转换。

四、反向代理配置

如果前端项目需要与后端 API 进行交互，可以使用 Nginx 进行反向代理配置。在 my-frontend-project.conf 文件中添加以下内容：

四、反向代理配置

如果前端项目需要与后端 API 进行交互，可以使用 Nginx 进行反向代理配置。在 my-frontend-project.conf 文件中添加以下内容：

location /api/ {
    proxy_pass http://backend_server_ip:port/;
    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 /api/：匹配以 /api/ 开头的请求。
• proxy_pass http://backend_server_ip:port/：将请求转发到后端服务器的指定地址和端口。
• proxy_set_header：设置请求头信息，将客户端的真实 IP 地址传递给后端服务器。

完整的  my-frontend-project.conf 文件

server {
    listen 80;
    server_name your_domain;

    # 前端项目根目录
    root /var/www/my-frontend-project;
    # 默认索引文件
    index index.html index.htm;

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

    # 前端项目根路径配置
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理配置，将 /api/ 开头的请求转发到后端服务器
    location /api/ {
        proxy_pass http://backend_server_ip:port/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

请根据实际情况修改上述配置文件中的域名、前端项目路径、后端 API 地址等信息。修改配置文件后，使用 sudo /usr/local/nginx/sbin/nginx -t 检查配置语法，确认无误后使用 sudo /usr/local/nginx/sbin/nginx -s reload 重新加载配置。