前端项目部署：Nginx 从入门到实战

Nginx（发音为 "engine-x"）是一款高性能的 HTTP 服务器、反向代理服务器，也是前端项目部署的首选工具 ------ 它能高效处理静态资源（HTML/CSS/JS/ 图片）、解决 SPA 路由问题、配置缓存与跨域，同时支持高并发场景。本文将带你从零开始，用 Nginx 完成前端项目的部署。

一、Nginx 安装：主流系统操作步骤

首先需在服务器 / 本地环境安装 Nginx，以下是 Linux（Ubuntu/CentOS）、Windows、Mac 三大系统的安装方法：

1.1 Linux 系统（生产环境常用）

Ubuntu/Debian 系列

bash 复制代码

# 更新软件源
sudo apt update
# 安装 Nginx
sudo apt install nginx -y
# 验证安装（查看版本）
nginx -v

CentOS/RHEL 系列

bash 复制代码

# 安装 EPEL 源（CentOS 默认无 Nginx 官方源）
sudo yum install epel-release -y
# 安装 Nginx
sudo yum install nginx -y
# 验证安装
nginx -v

1.2 Windows 系统（本地开发测试）

前往 Ng inx 官网下载 Windows 版本（选择 Stable version 稳定版，如 nginx-1.24.0.zip）；

解压压缩包到任意目录（如 D:\nginx-1.24.0）；

打开命令提示符（CMD），进入 Nginx 目录：

bash 复制代码

cd D:\nginx-1.24.0
# 启动 Nginx（无窗口，后台运行）
start nginx
# 验证是否启动（访问 http://localhost 或查看进程）
tasklist /fi "imagename eq nginx.exe"

1.3 Mac 系统（本地开发）

通过 Homebrew 快速安装（需先安装 Home brew）：

shell 复制代码

# 安装 Nginx
brew install nginx
# 验证安装
nginx -v
# 查看配置文件路径（Mac 默认路径：/usr/local/etc/nginx/nginx.conf）
nginx -t

二、Nginx 基本命令：服务管理与配置测试

无论哪种系统，Nginx 核心命令基本一致，以下是常用命令（Linux 需加 sudo，Windows 需在 Nginx 安装目录执行）：

命令	作用	示例
nginx	启动 Nginx 服务	Linux: sudo nginx / Windows: start nginx
nginx -s stop	强制停止 Nginx（可能中断现有连接）	sudo nginx -s stop
nginx -s quit	优雅停止 Nginx（处理完现有连接后停止）	sudo nginx -s quit
nginx -s reload	平滑重启（加载新配置，不中断服务）	sudo nginx -s reload（修改配置后必执行）
nginx -t	测试配置文件语法是否正确	sudo nginx -t（配置修改后先测试，避免报错）
nginx -v	查看 Nginx 版本	nginx -v
nginx -V	查看 Nginx 编译参数（如支持的模块）	nginx -V

注意：Windows 系统无 nginx -s quit 命令，停止需用 taskkill /f /t /im nginx.exe。

三、Nginx 核心配置解析：从基础到前端适配

Nginx 配置文件默认路径（不同系统略有差异）：

Linux（Ubuntu）：/etc/nginx/nginx.conf

Linux（CentOS）：/etc/nginx/nginx.conf

Windows：安装目录/conf/nginx.conf

Mac：/usr/local/etc/nginx/nginx.conf

配置文件结构分为 4 个核心块，层级关系为：全局块 → events 块 → http 块 → server 块 → location 块。

3.1 基础配置模板（前端部署通用）

以下是一个完整的前端项目部署配置模板，包含静态资源服务、SPA 路由适配、缓存优化：

ini 复制代码

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

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;

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

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

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
   
    server {
        listen 8012;
        server_name  _;
        
        location /static {
            alias /data/ddb/static/;
            autoindex on;  # 关闭"目录浏览"（防止他人查看所有资源文件，安全！）
            expires 7d;     # 缓存控制：资源在浏览器缓存7天（优化性能，减少重复请求）
            # 跨域配置（若前端域名与静态资源域名不同，需加此配置）
            add_header Access-Control-Allow-Origin *;
            charset utf-8;
        }

        location / { # 配置低代码应用的访问路径
            alias   /data/Web/dist/; # 指定低代码应用的静态文件路径
            index  index.html index.htm; # 指定默认页面
            try_files $uri $uri/ /index.html;
        }
    }