[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-qianduangongchengshibibeide-nginx-shizhanzhinancongbushudaoyouhua":3},{"id":4,"title":5,"slug":6,"summary":7,"content":8,"contentHtml":9,"wordCount":10,"readingTime":11,"categoryId":12,"tags":13,"coverImage":13,"thumbnail":13,"status":14,"isTop":15,"isRecommended":15,"allowComments":15,"password":13,"viewCount":16,"likeCount":15,"commentCount":15,"seoTitle":5,"seoKeywords":17,"seoDescription":18,"source":13,"sourceUrl":13,"publishTime":19},"2001944323155668993","前端工程师必备的 Nginx 实战指南：从部署到优化","qianduangongchengshibibeide-nginx-shizhanzhinancongbushudaoyouhua","作为现代前端开发者，仅仅会编写业务代码已经不够了。项目部署时的各种“坑”——如路由刷新404、资源加载失败、跨域问题等，常常让我们头疼不已。掌握 Nginx 这一强大工具，将成为你突破瓶颈、提升项目交付质量的利器。本文将从零开始，手把手带你玩转 Nginx 配置，让你的前端项目部署体验提升10倍。 ### 一、为什么前端要学习 Nginx？ Nginx 不仅仅是一个运维工具，更是前端性能和应用稳定性的“守护神”。其主要优势包括： 1. **静态资源服务之王**：高效分发 HTML、CSS、JS、图片等静态文件，性能远超 Node.js 的静态服务模块。 2. **路由控制的救世主**：完美解决 React、Vue 等框架在 History 路由模式下，刷新页面直接 404 的经典难题。 3. **性能优化利器**：轻松开启 Gzip 压缩、配置缓存策略，大幅提升应用加载速度。 4.","作为现代前端开发者，仅仅会编写业务代码已经不够了。项目部署时的各种“坑”——如路由刷新404、资源加载失败、跨域问题等，常常让我们头疼不已。掌握 Nginx 这一强大工具，将成为你突破瓶颈、提升项目交付质量的利器。本文将从零开始，手把手带你玩转 Nginx 配置，让你的前端项目部署体验提升10倍。\n\n### 一、为什么前端要学习 Nginx？\n\nNginx 不仅仅是一个运维工具，更是前端性能和应用稳定性的“守护神”。其主要优势包括：\n\n1.  **静态资源服务之王**：高效分发 HTML、CSS、JS、图片等静态文件，性能远超 Node.js 的静态服务模块。\n2.  **路由控制的救世主**：完美解决 React、Vue 等框架在 History 路由模式下，刷新页面直接 404 的经典难题。\n3.  **性能优化利器**：轻松开启 Gzip 压缩、配置缓存策略，大幅提升应用加载速度。\n4.  **跨域问题的终结者**：在服务端轻松配置代理和 CORS 规则，彻底告别 `Access-Control-Allow-Origin` 的困扰。\n5.  **HTTPS 轻松上阵**：简单配置即可启用 SSL 证书，提升应用安全性。\n\n### 二、快速上手：5分钟搭建 Nginx 环境\n\n#### 1. 安装 Nginx（以 Ubuntu 为例）\n\n```bash\nsudo apt update\nsudo apt install nginx -y\nsudo systemctl start nginx\n```\n\n安装完成后，在浏览器中访问服务器 IP 地址，如果看到 “Welcome to nginx!” 页面，说明安装成功。\n\n#### 2. 核心目录说明\n\n了解关键目录是后续配置的基础：\n\n*   **配置目录**：`\u002Fetc\u002Fnginx\u002F`\n*   **主配置文件**：`\u002Fetc\u002Fnginx\u002Fnginx.conf`\n*   **站点配置目录**：\n    *   `sites-available\u002F`：存放所有可用的站点配置文件。\n    *   `sites-enabled\u002F`：存放已启用的站点配置（通常是 `sites-available\u002F` 中文件的软链接）。\n*   **默认静态资源目录**：`\u002Fvar\u002Fwww\u002Fhtml\u002F`\n*   **日志目录**：`\u002Fvar\u002Flog\u002Fnginx\u002F`（`access.log` 为访问日志，`error.log` 为错误日志）\n\n#### 3. 常用命令\n\n```bash\n# 检查配置文件语法是否正确（非常重要！）\nsudo nginx -t\n\n# 重新加载配置，使更改生效（无需重启服务，无缝切换）\nsudo nginx -s reload\n\n# 启动\u002F停止\u002F重启 Nginx\nsudo systemctl start\u002Fstop\u002Frestart nginx\n```\n\n### 三、核心配置实战：解决前端部署三大难题\n\n#### 场景1：部署 SPA 项目（解决 History 路由 404 问题）\n\n以部署 React\u002FVue 打包后的 `dist` 目录为例，创建一个独立的配置文件（如 `\u002Fetc\u002Fnginx\u002Fsites-available\u002Fmy-app`）：\n\n```nginx\nserver {\n    listen 80;\n    server_name your-domain.com www.your-domain.com; # 请替换为你的域名或IP\n\n    # 静态资源根目录（指向你打包后的目录）\n    root \u002Fvar\u002Fwww\u002Fmy-app\u002Fdist;\n    index index.html;\n\n    location \u002F {\n        # 核心配置：尝试按顺序查找文件\n        # 先找 $uri（请求的路径），再找 $uri\u002F（目录），都找不到则返回 index.html\n        try_files $uri $uri\u002F \u002Findex.html;\n    }\n\n    # 配置静态资源缓存\n    location ~* \\.(jpg|jpeg|png|gif|ico|css|js)$ {\n        expires 30d; # 设置浏览器缓存30天\n        add_header Cache-Control \"public, no-transform\";\n    }\n}\n```\n\n**关键解释**：`try_files $uri $uri\u002F \u002Findex.html;` 是 SPA 路由的“生命线”。它让 Nginx 在找不到对应静态资源时，将控制权交还给 `index.html`，由前端路由接管 URL 解析。\n\n#### 场景2：配置 API 代理与跨域\n\n在开发环境中，我们常使用 `http:\u002F\u002Flocalhost:3000\u002Fapi` 这样的地址连接后端。部署后，需要通过 Nginx 将 `\u002Fapi` 请求代理到真实的后端服务器。\n\n```nginx\nlocation \u002Fapi\u002F {\n    # 重写请求路径（根据后端需求调整，这里去掉了 \u002Fapi 前缀）\n    rewrite ^\u002Fapi\u002F(.*) \u002F$1 break;\n\n    # 代理到后端服务器地址\n    proxy_pass https:\u002F\u002Fapi.your-backend.com;\n\n    # 设置代理请求头，确保后端能获取到真实客户端信息\n    proxy_set_header Host $host;\n    proxy_set_header X-Real-IP $remote_addr;\n    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n    proxy_set_header X-Forwarded-Proto $scheme;\n\n    # 可选：支持 WebSocket 代理\n    proxy_http_version 1.1;\n    proxy_set_header Upgrade $http_upgrade;\n    proxy_set_header Connection \"upgrade\";\n}\n```\n\n#### 场景3：开启 Gzip 压缩\n\nGzip 可以显著减小文本类资源的体积。在主配置文件 `nginx.conf` 的 `http { ... }` 块中添加：\n\n```nginx\ngzip on;\ngzip_min_length 1k;     # 超过1KB的文件才压缩\ngzip_comp_level 6;      # 压缩级别（1-9，6是常用平衡点）\ngzip_types text\u002Fplain text\u002Fcss application\u002Fjson application\u002Fjavascript text\u002Fxml application\u002Fxml text\u002Fjavascript; # 指定压缩类型\ngzip_vary on;\n```\n\n### 四、高级优化与安全配置\n\n#### 1. 启用 HTTP\u002F2\n\nHTTP\u002F2 的多路复用特性可以大幅提升页面加载效率。在 `listen` 指令中启用（需先配置 HTTPS）：\n\n```nginx\nserver {\n    listen 443 ssl http2; # 启用 HTTP\u002F2\n    server_name your-domain.com;\n    ssl_certificate \u002Fpath\u002Fto\u002Fyour\u002Fcert.pem;\n    ssl_certificate_key \u002Fpath\u002Fto\u002Fyour\u002Fprivate.key;\n    # ... 其他配置\n}\n```\n\n#### 2. 添加安全响应头\n\n增强应用的安全性，防止常见网络攻击。\n\n```nginx\n# 在 server 块中添加\nadd_header X-Frame-Options \"SAMEORIGIN\" always; # 防止点击劫持\nadd_header X-XSS-Protection \"1; mode=block\" always; # 启用XSS过滤\nadd_header X-Content-Type-Options \"nosniff\" always; # 禁止MIME类型嗅探\n# add_header Content-Security-Policy \"default-src 'self'; ...\"; # 内容安全策略（按需配置）\n```\n\n### 五、完整项目部署示例\n\n假设我们要部署一个 Vue3 电商 SPA，要求强制 HTTPS，并配置 API 代理。\n\n1.  **创建配置文件**：`\u002Fetc\u002Fnginx\u002Fsites-available\u002Fecommerce.conf`\n2.  **写入以下配置**：\n\n```nginx\n# HTTP 强制跳转到 HTTPS\nserver {\n    listen 80;\n    server_name shop.com www.shop.com;\n    return 301 https:\u002F\u002F$host$request_uri;\n}\n\n# HTTPS 主配置\nserver {\n    listen 443 ssl http2;\n    server_name shop.com www.shop.com;\n\n    # SSL 证书（可使用 Certbot 免费获取）\n    ssl_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fshop.com\u002Ffullchain.pem;\n    ssl_certificate_key \u002Fetc\u002Fletsencrypt\u002Flive\u002Fshop.com\u002Fprivkey.pem;\n\n    root \u002Fvar\u002Fwww\u002Fecommerce\u002Fdist;\n    index index.html;\n\n    # SPA 路由处理\n    location \u002F {\n        try_files $uri $uri\u002F \u002Findex.html;\n    }\n\n    # 静态资源缓存\n    location ~* \\.(?:jpg|jpeg|png|gif|ico|css|js|svg|woff2)$ {\n        expires 30d;\n        add_header Cache-Control \"public, immutable\";\n    }\n\n    # API 代理\n    location \u002Fapi\u002F {\n        rewrite ^\u002Fapi\u002F(.*) \u002F$1 break;\n        proxy_pass https:\u002F\u002Fapi.shop.com;\n        # ... 代理头配置同上\n    }\n\n    # 安全头\n    add_header X-Frame-Options \"SAMEORIGIN\" always;\n    add_header X-XSS-Protection \"1; mode=block\" always;\n    add_header X-Content-Type-Options \"nosniff\" always;\n}\n```\n\n3.  **启用配置并重载**：\n\n```bash\nsudo ln -s \u002Fetc\u002Fnginx\u002Fsites-available\u002Fecommerce.conf \u002Fetc\u002Fnginx\u002Fsites-enabled\u002F\nsudo nginx -t && sudo nginx -s reload\n```\n\n### 六、避坑指南与总结\n\n**新手常见问题：**\n\n*   **配置不生效？** 务必执行 `sudo nginx -t` 检查语法，并通过 `sudo nginx -s reload` 重载。\n*   **`try_files` 配了还是 404？** 检查 `root` 路径是否正确，以及 `index.html` 文件是否存在且有读取权限。\n*   **代理出现 502 Bad Gateway？** 检查 `proxy_pass` 地址是否正确，后端服务是否正常运行，防火墙是否放行。\n\n**总结：**\n\n掌握 Nginx 是前端工程师进阶的必经之路。请记住三个核心法则：\n\n1.  **`try_files`**：是 SPA 路由的生命线。\n2.  **`proxy_pass`**：是前后端分离架构的桥梁。\n3.  **`expires` + `gzip`**：是性能加速的双引擎。\n\n希望这篇指南能帮助你轻松驾驭 Nginx，让你的前端项目部署得更稳健、更高效！\n\n---","\u003Cp data-line=\"0\">作为现代前端开发者，仅仅会编写业务代码已经不够了。项目部署时的各种“坑”——如路由刷新404、资源加载失败、跨域问题等，常常让我们头疼不已。掌握 Nginx 这一强大工具，将成为你突破瓶颈、提升项目交付质量的利器。本文将从零开始，手把手带你玩转 Nginx 配置，让你的前端项目部署体验提升10倍。\u003C\u002Fp>\n\u003Ch3 data-line=\"2\" id=\"一、为什么前端要学习 Nginx？\">一、为什么前端要学习 Nginx？\u003C\u002Fh3>\n\u003Cp data-line=\"4\">Nginx 不仅仅是一个运维工具，更是前端性能和应用稳定性的“守护神”。其主要优势包括：\u003C\u002Fp>\n\u003Col data-line=\"6\">\n\u003Cli data-line=\"6\">\u003Cstrong>静态资源服务之王\u003C\u002Fstrong>：高效分发 HTML、CSS、JS、图片等静态文件，性能远超 Node.js 的静态服务模块。\u003C\u002Fli>\n\u003Cli data-line=\"7\">\u003Cstrong>路由控制的救世主\u003C\u002Fstrong>：完美解决 React、Vue 等框架在 History 路由模式下，刷新页面直接 404 的经典难题。\u003C\u002Fli>\n\u003Cli data-line=\"8\">\u003Cstrong>性能优化利器\u003C\u002Fstrong>：轻松开启 Gzip 压缩、配置缓存策略，大幅提升应用加载速度。\u003C\u002Fli>\n\u003Cli data-line=\"9\">\u003Cstrong>跨域问题的终结者\u003C\u002Fstrong>：在服务端轻松配置代理和 CORS 规则，彻底告别 \u003Ccode>Access-Control-Allow-Origin\u003C\u002Fcode> 的困扰。\u003C\u002Fli>\n\u003Cli data-line=\"10\">\u003Cstrong>HTTPS 轻松上阵\u003C\u002Fstrong>：简单配置即可启用 SSL 证书，提升应用安全性。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3 data-line=\"12\" id=\"二、快速上手：5分钟搭建 Nginx 环境\">二、快速上手：5分钟搭建 Nginx 环境\u003C\u002Fh3>\n\u003Ch4 data-line=\"14\" id=\"1. 安装 Nginx（以 Ubuntu 为例）\">1. 安装 Nginx（以 Ubuntu 为例）\u003C\u002Fh4>\n\n        \u003Cdetails  data-line=\"16\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">bash\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-bash\" language=bash>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> apt update\n\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> apt install nginx -y\n\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> systemctl start nginx\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Cp data-line=\"22\">安装完成后，在浏览器中访问服务器 IP 地址，如果看到 “Welcome to nginx!” 页面，说明安装成功。\u003C\u002Fp>\n\u003Ch4 data-line=\"24\" id=\"2. 核心目录说明\">2. 核心目录说明\u003C\u002Fh4>\n\u003Cp data-line=\"26\">了解关键目录是后续配置的基础：\u003C\u002Fp>\n\u003Cul data-line=\"28\">\n\u003Cli data-line=\"28\">\u003Cstrong>配置目录\u003C\u002Fstrong>：\u003Ccode>\u002Fetc\u002Fnginx\u002F\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli data-line=\"29\">\u003Cstrong>主配置文件\u003C\u002Fstrong>：\u003Ccode>\u002Fetc\u002Fnginx\u002Fnginx.conf\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli data-line=\"30\">\u003Cstrong>站点配置目录\u003C\u002Fstrong>：\n\u003Cul data-line=\"31\">\n\u003Cli data-line=\"31\">\u003Ccode>sites-available\u002F\u003C\u002Fcode>：存放所有可用的站点配置文件。\u003C\u002Fli>\n\u003Cli data-line=\"32\">\u003Ccode>sites-enabled\u002F\u003C\u002Fcode>：存放已启用的站点配置（通常是 \u003Ccode>sites-available\u002F\u003C\u002Fcode> 中文件的软链接）。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli data-line=\"33\">\u003Cstrong>默认静态资源目录\u003C\u002Fstrong>：\u003Ccode>\u002Fvar\u002Fwww\u002Fhtml\u002F\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli data-line=\"34\">\u003Cstrong>日志目录\u003C\u002Fstrong>：\u003Ccode>\u002Fvar\u002Flog\u002Fnginx\u002F\u003C\u002Fcode>（\u003Ccode>access.log\u003C\u002Fcode> 为访问日志，\u003Ccode>error.log\u003C\u002Fcode> 为错误日志）\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4 data-line=\"36\" id=\"3. 常用命令\">3. 常用命令\u003C\u002Fh4>\n\n        \u003Cdetails  data-line=\"38\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">bash\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-bash\" language=bash>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\"># 检查配置文件语法是否正确（非常重要！）\u003C\u002Fspan>\n\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> nginx -t\n\n\u003Cspan class=\"hljs-comment\"># 重新加载配置，使更改生效（无需重启服务，无缝切换）\u003C\u002Fspan>\n\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> nginx -s reload\n\n\u003Cspan class=\"hljs-comment\"># 启动\u002F停止\u002F重启 Nginx\u003C\u002Fspan>\n\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> systemctl start\u002Fstop\u002Frestart nginx\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"49\" id=\"三、核心配置实战：解决前端部署三大难题\">三、核心配置实战：解决前端部署三大难题\u003C\u002Fh3>\n\u003Ch4 data-line=\"51\" id=\"场景1：部署 SPA 项目（解决 History 路由 404 问题）\">场景1：部署 SPA 项目（解决 History 路由 404 问题）\u003C\u002Fh4>\n\u003Cp data-line=\"53\">以部署 React\u002FVue 打包后的 \u003Ccode>dist\u003C\u002Fcode> 目录为例，创建一个独立的配置文件（如 \u003Ccode>\u002Fetc\u002Fnginx\u002Fsites-available\u002Fmy-app\u003C\u002Fcode>）：\u003C\u002Fp>\n\n        \u003Cdetails  data-line=\"55\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">nginx\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-nginx\" language=nginx>\u003Cspan class=\"md-editor-code-block\">server {\n    \u003Cspan class=\"hljs-keyword\">listen\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">80\u003C\u002Fspan>;\n    server_name your-domain.com www.your-domain.com; \u003Cspan class=\"hljs-comment\"># 请替换为你的域名或IP\u003C\u002Fspan>\n\n    \u003Cspan class=\"hljs-comment\"># 静态资源根目录（指向你打包后的目录）\u003C\u002Fspan>\n    root \u002Fvar\u002Fwww\u002F\u003Cspan class=\"hljs-keyword\">my\u003C\u002Fspan>-app\u002Fdist;\n    \u003Cspan class=\"hljs-keyword\">index\u003C\u002Fspan> index.html;\n\n    location \u002F {\n        \u003Cspan class=\"hljs-comment\"># 核心配置：尝试按顺序查找文件\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-comment\"># 先找 $uri（请求的路径），再找 $uri\u002F（目录），都找不到则返回 index.html\u003C\u002Fspan>\n        try_files \u003Cspan class=\"hljs-variable\">$uri\u003C\u002Fspan> \u003Cspan class=\"hljs-variable\">$uri\u003C\u002Fspan>\u002F \u002Findex.html;\n    }\n\n    \u003Cspan class=\"hljs-comment\"># 配置静态资源缓存\u003C\u002Fspan>\n    location ~* \\.(jpg|jpeg|png|gif|ico|css|js)$ {\n        expires 30d; \u003Cspan class=\"hljs-comment\"># 设置浏览器缓存30天\u003C\u002Fspan>\n        add_header Cache-Control \u003Cspan class=\"hljs-string\">"public, no-transform"\u003C\u002Fspan>;\n    }\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Cp data-line=\"78\">\u003Cstrong>关键解释\u003C\u002Fstrong>：\u003Ccode>try_files $uri $uri\u002F \u002Findex.html;\u003C\u002Fcode> 是 SPA 路由的“生命线”。它让 Nginx 在找不到对应静态资源时，将控制权交还给 \u003Ccode>index.html\u003C\u002Fcode>，由前端路由接管 URL 解析。\u003C\u002Fp>\n\u003Ch4 data-line=\"80\" id=\"场景2：配置 API 代理与跨域\">场景2：配置 API 代理与跨域\u003C\u002Fh4>\n\u003Cp data-line=\"82\">在开发环境中，我们常使用 \u003Ccode>http:\u002F\u002Flocalhost:3000\u002Fapi\u003C\u002Fcode> 这样的地址连接后端。部署后，需要通过 Nginx 将 \u003Ccode>\u002Fapi\u003C\u002Fcode> 请求代理到真实的后端服务器。\u003C\u002Fp>\n\n        \u003Cdetails  data-line=\"84\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">nginx\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-nginx\" language=nginx>\u003Cspan class=\"md-editor-code-block\">location \u002Fapi\u002F {\n    \u003Cspan class=\"hljs-comment\"># 重写请求路径（根据后端需求调整，这里去掉了 \u002Fapi 前缀）\u003C\u002Fspan>\n    rewrite ^\u002Fapi\u002F(.*) \u002F\u003Cspan class=\"hljs-variable\">$1\u003C\u002Fspan> \u003Cspan class=\"hljs-built_in\">break\u003C\u002Fspan>;\n\n    \u003Cspan class=\"hljs-comment\"># 代理到后端服务器地址\u003C\u002Fspan>\n    proxy_pass https:\u002F\u002Fapi.your-backend.com;\n\n    \u003Cspan class=\"hljs-comment\"># 设置代理请求头，确保后端能获取到真实客户端信息\u003C\u002Fspan>\n    proxy_set_header Host \u003Cspan class=\"hljs-variable\">$host\u003C\u002Fspan>;\n    proxy_set_header X-Real-IP \u003Cspan class=\"hljs-variable\">$remote_addr\u003C\u002Fspan>;\n    proxy_set_header X-Forwarded-For \u003Cspan class=\"hljs-variable\">$proxy_add_x_forwarded_for\u003C\u002Fspan>;\n    proxy_set_header X-Forwarded-Proto \u003Cspan class=\"hljs-variable\">$scheme\u003C\u002Fspan>;\n\n    \u003Cspan class=\"hljs-comment\"># 可选：支持 WebSocket 代理\u003C\u002Fspan>\n    proxy_http_version 1.1;\n    proxy_set_header Upgrade \u003Cspan class=\"hljs-variable\">$http_upgrade\u003C\u002Fspan>;\n    proxy_set_header Connection \u003Cspan class=\"hljs-string\">"upgrade"\u003C\u002Fspan>;\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch4 data-line=\"105\" id=\"场景3：开启 Gzip 压缩\">场景3：开启 Gzip 压缩\u003C\u002Fh4>\n\u003Cp data-line=\"107\">Gzip 可以显著减小文本类资源的体积。在主配置文件 \u003Ccode>nginx.conf\u003C\u002Fcode> 的 \u003Ccode>http { ... }\u003C\u002Fcode> 块中添加：\u003C\u002Fp>\n\n        \u003Cdetails  data-line=\"109\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">nginx\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-nginx\" language=nginx>\u003Cspan class=\"md-editor-code-block\">gzip on;\ngzip_min_length 1k;     \u003Cspan class=\"hljs-comment\"># 超过1KB的文件才压缩\u003C\u002Fspan>\ngzip_comp_level 6;      \u003Cspan class=\"hljs-comment\"># 压缩级别（1-9，6是常用平衡点）\u003C\u002Fspan>\ngzip_types text\u002Fplain text\u002Fcss application\u002Fjson application\u002Fjavascript text\u002Fxml application\u002Fxml text\u002Fjavascript; \u003Cspan class=\"hljs-comment\"># 指定压缩类型\u003C\u002Fspan>\ngzip_vary on;\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"117\" id=\"四、高级优化与安全配置\">四、高级优化与安全配置\u003C\u002Fh3>\n\u003Ch4 data-line=\"119\" id=\"1. 启用 HTTP\u002F2\">1. 启用 HTTP\u002F2\u003C\u002Fh4>\n\u003Cp data-line=\"121\">HTTP\u002F2 的多路复用特性可以大幅提升页面加载效率。在 \u003Ccode>listen\u003C\u002Fcode> 指令中启用（需先配置 HTTPS）：\u003C\u002Fp>\n\n        \u003Cdetails  data-line=\"123\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">nginx\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-nginx\" language=nginx>\u003Cspan class=\"md-editor-code-block\">server {\n    listen \u003Cspan class=\"hljs-number\">443\u003C\u002Fspan> ssl http2; # 启用 \u003Cspan class=\"hljs-type\">HTTP\u003C\u002Fspan>\u003Cspan class=\"hljs-operator\">\u002F\u003C\u002Fspan>\u003Cspan class=\"hljs-number\">2\u003C\u002Fspan>\n    server_name your\u003Cspan class=\"hljs-operator\">-\u003C\u002Fspan>domain.com;\n    ssl_certificate \u003Cspan class=\"hljs-regexp\">\u002Fpath\u002F\u003C\u002Fspan>to\u003Cspan class=\"hljs-regexp\">\u002Fyour\u002F\u003C\u002Fspan>cert.pem;\n    ssl_certificate_key \u003Cspan class=\"hljs-regexp\">\u002Fpath\u002F\u003C\u002Fspan>to\u003Cspan class=\"hljs-regexp\">\u002Fyour\u002F\u003C\u002Fspan>\u003Cspan class=\"hljs-keyword\">private\u003C\u002Fspan>.key;\n    # \u003Cspan class=\"hljs-operator\">...\u003C\u002Fspan> 其他配置\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch4 data-line=\"133\" id=\"2. 添加安全响应头\">2. 添加安全响应头\u003C\u002Fh4>\n\u003Cp data-line=\"135\">增强应用的安全性，防止常见网络攻击。\u003C\u002Fp>\n\n        \u003Cdetails  data-line=\"137\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">nginx\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-nginx\" language=nginx>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\"># 在 server 块中添加\u003C\u002Fspan>\nadd_header X-Frame-Options \u003Cspan class=\"hljs-string\">"SAMEORIGIN"\u003C\u002Fspan> always; \u003Cspan class=\"hljs-comment\"># 防止点击劫持\u003C\u002Fspan>\nadd_header X-XSS-Protection \u003Cspan class=\"hljs-string\">"1; mode=block"\u003C\u002Fspan> always; \u003Cspan class=\"hljs-comment\"># 启用XSS过滤\u003C\u002Fspan>\nadd_header X-Content-\u003Cspan class=\"hljs-type\">Type\u003C\u002Fspan>-Options \u003Cspan class=\"hljs-string\">"nosniff"\u003C\u002Fspan> always; \u003Cspan class=\"hljs-comment\"># 禁止MIME类型嗅探\u003C\u002Fspan>\n\u003Cspan class=\"hljs-comment\"># add_header Content-Security-Policy "default-src 'self'; ..."; # 内容安全策略（按需配置）\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"145\" id=\"五、完整项目部署示例\">五、完整项目部署示例\u003C\u002Fh3>\n\u003Cp data-line=\"147\">假设我们要部署一个 Vue3 电商 SPA，要求强制 HTTPS，并配置 API 代理。\u003C\u002Fp>\n\u003Col data-line=\"149\">\n\u003Cli data-line=\"149\">\u003Cstrong>创建配置文件\u003C\u002Fstrong>：\u003Ccode>\u002Fetc\u002Fnginx\u002Fsites-available\u002Fecommerce.conf\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli data-line=\"150\">\u003Cstrong>写入以下配置\u003C\u002Fstrong>：\u003C\u002Fli>\n\u003C\u002Fol>\n\n        \u003Cdetails  data-line=\"152\" class=\"md-editor-code\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">nginx\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-nginx\" language=nginx>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\"># HTTP 强制跳转到 HTTPS\u003C\u002Fspan>\nserver {\n    listen 80;\n    server_name shop.com www.shop.com;\n    \u003Cspan class=\"hljs-built_in\">return\u003C\u002Fspan> 301 https:\u002F\u002F$host\u003Cspan class=\"hljs-variable\">$request_uri\u003C\u002Fspan>;\n}\n\n\u003Cspan class=\"hljs-comment\"># HTTPS 主配置\u003C\u002Fspan>\nserver {\n    listen 443 ssl http2;\n    server_name shop.com www.shop.com;\n\n    \u003Cspan class=\"hljs-comment\"># SSL 证书（可使用 Certbot 免费获取）\u003C\u002Fspan>\n    ssl_certificate \u002Fetc\u002Fletsencrypt\u002Flive\u002Fshop.com\u002Ffullchain.pem;\n    ssl_certificate_key \u002Fetc\u002Fletsencrypt\u002Flive\u002Fshop.com\u002Fprivkey.pem;\n\n    root \u002Fvar\u002Fwww\u002Fecommerce\u002Fdist;\n    index index.html;\n\n    \u003Cspan class=\"hljs-comment\"># SPA 路由处理\u003C\u002Fspan>\n    location \u002F {\n        try_files \u003Cspan class=\"hljs-variable\">$uri\u003C\u002Fspan> \u003Cspan class=\"hljs-variable\">$uri\u003C\u002Fspan>\u002F \u002Findex.html;\n    }\n\n    \u003Cspan class=\"hljs-comment\"># 静态资源缓存\u003C\u002Fspan>\n    location ~* \\.(?:jpg|jpeg|png|gif|ico|css|js|svg|woff2)$ {\n        expires 30d;\n        add_header Cache-Control \u003Cspan class=\"hljs-string\">"public, immutable"\u003C\u002Fspan>;\n    }\n\n    \u003Cspan class=\"hljs-comment\"># API 代理\u003C\u002Fspan>\n    location \u002Fapi\u002F {\n        rewrite ^\u002Fapi\u002F(.*) \u002F\u003Cspan class=\"hljs-variable\">$1\u003C\u002Fspan> \u003Cspan class=\"hljs-built_in\">break\u003C\u002Fspan>;\n        proxy_pass https:\u002F\u002Fapi.shop.com;\n        \u003Cspan class=\"hljs-comment\"># ... 代理头配置同上\u003C\u002Fspan>\n    }\n\n    \u003Cspan class=\"hljs-comment\"># 安全头\u003C\u002Fspan>\n    add_header X-Frame-Options \u003Cspan class=\"hljs-string\">"SAMEORIGIN"\u003C\u002Fspan> always;\n    add_header X-XSS-Protection \u003Cspan class=\"hljs-string\">"1; mode=block"\u003C\u002Fspan> always;\n    add_header X-Content-Type-Options \u003Cspan class=\"hljs-string\">"nosniff"\u003C\u002Fspan> always;\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Col start=\"3\" data-line=\"197\">\n\u003Cli data-line=\"197\">\u003Cstrong>启用配置并重载\u003C\u002Fstrong>：\u003C\u002Fli>\n\u003C\u002Fol>\n\n        \u003Cdetails  data-line=\"199\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">bash\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-bash\" language=bash>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> \u003Cspan class=\"hljs-built_in\">ln\u003C\u002Fspan> -s \u002Fetc\u002Fnginx\u002Fsites-available\u002Fecommerce.conf \u002Fetc\u002Fnginx\u002Fsites-enabled\u002F\n\u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> nginx -t && \u003Cspan class=\"hljs-built_in\">sudo\u003C\u002Fspan> nginx -s reload\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"204\" id=\"六、避坑指南与总结\">六、避坑指南与总结\u003C\u002Fh3>\n\u003Cp data-line=\"206\">\u003Cstrong>新手常见问题：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul data-line=\"208\">\n\u003Cli data-line=\"208\">\u003Cstrong>配置不生效？\u003C\u002Fstrong> 务必执行 \u003Ccode>sudo nginx -t\u003C\u002Fcode> 检查语法，并通过 \u003Ccode>sudo nginx -s reload\u003C\u002Fcode> 重载。\u003C\u002Fli>\n\u003Cli data-line=\"209\">\u003Cstrong>\u003Ccode>try_files\u003C\u002Fcode> 配了还是 404？\u003C\u002Fstrong> 检查 \u003Ccode>root\u003C\u002Fcode> 路径是否正确，以及 \u003Ccode>index.html\u003C\u002Fcode> 文件是否存在且有读取权限。\u003C\u002Fli>\n\u003Cli data-line=\"210\">\u003Cstrong>代理出现 502 Bad Gateway？\u003C\u002Fstrong> 检查 \u003Ccode>proxy_pass\u003C\u002Fcode> 地址是否正确，后端服务是否正常运行，防火墙是否放行。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp data-line=\"212\">\u003Cstrong>总结：\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp data-line=\"214\">掌握 Nginx 是前端工程师进阶的必经之路。请记住三个核心法则：\u003C\u002Fp>\n\u003Col data-line=\"216\">\n\u003Cli data-line=\"216\">\u003Cstrong>\u003Ccode>try_files\u003C\u002Fcode>\u003C\u002Fstrong>：是 SPA 路由的生命线。\u003C\u002Fli>\n\u003Cli data-line=\"217\">\u003Cstrong>\u003Ccode>proxy_pass\u003C\u002Fcode>\u003C\u002Fstrong>：是前后端分离架构的桥梁。\u003C\u002Fli>\n\u003Cli data-line=\"218\">\u003Cstrong>\u003Ccode>expires\u003C\u002Fcode> + \u003Ccode>gzip\u003C\u002Fcode>\u003C\u002Fstrong>：是性能加速的双引擎。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp data-line=\"220\">希望这篇指南能帮助你轻松驾驭 Nginx，让你的前端项目部署得更稳健、更高效！\u003C\u002Fp>\n\u003Chr data-line=\"222\">\n",5330,17,"0","",2,0,6,"#,配置,nginx,Nginx,代理","作为现代前端开发者，仅仅会编写业务代码已经不够了。项目部署时的各种“坑”——如路由刷新404、资源加载失败、跨域问题等，常常让我们头疼不已。掌握 Nginx 这一强大工具，将成为你突破瓶颈、提升项目交付质量的利器。本文将从零开始，手把手带你玩转 Nginx 配置，让你的前端项目部署体验提升10倍。\n一、为什么前端要学习 Nginx？","2025-12-19 17:14:54"]