Nginx与CDN协同配置的最佳实践

更新时间：2026年07月22日 08:36:45 作者：知远漫谈

在现代 Web 架构中,静态资源的分发效率直接决定了用户体验的流畅度、服务器负载的均衡性以及整体系统的可扩展性,此时,CDN成为不可或缺的基础设施,本文将系统性地剖析 Nginx 与主流 CDN的协同配置策略,需要的朋友可以参考下

引言

在现代 Web 架构中，静态资源的分发效率直接决定了用户体验的流畅度、服务器负载的均衡性以及整体系统的可扩展性。无论是前端的 JavaScript、CSS 文件，还是图片、字体、视频等媒体资产，它们都构成了用户访问网站的第一印象。当用户遍布全球，访问高峰频发，单靠一台 Nginx 服务器直接提供静态资源，早已无法满足高并发、低延迟、高可用的业务需求。

此时，CDN（Content Delivery Network，内容分发网络）成为不可或缺的基础设施。CDN 通过在全球多个边缘节点缓存静态资源，使用户从地理上最近的节点获取内容，大幅降低网络延迟，减轻源站压力，提升访问速度与稳定性。

然而，CDN 并非“开箱即用”的魔法棒。它与源站 Nginx 的协同配置，决定了缓存命中率、资源更新时效、安全策略有效性等关键指标。一个配置不当的 CDN + Nginx 组合，可能导致缓存穿透、缓存污染、资源版本错乱、甚至被恶意利用进行 DDoS 攻击。

本文将系统性地剖析 Nginx 与主流 CDN（如 Cloudflare、阿里云 CDN、腾讯云 CDN）的协同配置策略，涵盖缓存控制头、静态资源路径规划、缓存刷新机制、安全加固、日志分析、Java 后端动态生成资源的缓存策略，以及如何通过 Mermaid 图表清晰呈现架构流转。我们将结合真实业务场景，提供可落地的 Nginx 配置片段、Java 代码示例与最佳实践，帮助你构建一个高性能、高安全、高可维护的静态资源分发体系。

一、CDN 工作原理与 Nginx 的角色定位

在深入配置之前，我们必须厘清 CDN 与 Nginx 在架构中的分工。

1.1 CDN 是什么？

CDN 是一种分布式网络服务，通过在全球部署大量边缘节点（Edge Nodes），将源站的静态资源（如图片、JS、CSS、HTML、字体等）缓存到离用户更近的服务器上。当用户请求资源时，DNS 会智能解析到最近的边缘节点，若该节点已有缓存，则直接返回；若无，则回源（Origin Pull）到你的 Nginx 服务器获取最新内容，并缓存至本地。

CDN 的核心价值：就近访问 + 缓存复用 + 带宽卸载 + 抗攻击能力

1.2 Nginx 在 CDN 架构中的角色

Nginx 在此架构中扮演**源站服务器（Origin Server）**的角色。它的职责包括：

提供静态资源的原始访问入口
设置正确的 HTTP 缓存控制头（Cache-Control, ETag, Last-Modified）
处理动态请求（如 API）与静态请求的分流
实现访问控制、防盗链、限流等安全策略
为 CDN 提供稳定、可预测的响应行为

关键认知：CDN 不是取代 Nginx，而是增强 Nginx。Nginx 是“地基”，CDN 是“屋顶”。地基不稳，屋顶再美也会坍塌。

1.3 典型请求流程图示（Mermaid）

下面是一个标准的 CDN + Nginx 请求流程图，清晰展示数据流转：

这个流程图揭示了两个核心点：

缓存命中：90% 以上的静态请求应被 CDN 缓存直接响应，无需回源。
缓存控制权：Nginx 必须通过响应头明确告诉 CDN：“这个资源能缓存多久？”、“是否可被代理缓存？”、“何时需要重新验证？”

二、Nginx 缓存控制头配置：CDN 的“指挥棒”

CDN 无法“猜”你希望缓存多久。它完全依赖你通过 HTTP 响应头传递的指令。Nginx 必须精准设置以下关键头部：

头部	作用	推荐值
`Cache-Control`	控制缓存行为的核心指令	`public, max-age=604800, s-maxage=604800`
`Expires`	HTTP/1.0 兼容过期时间	`Thu, 31 Dec 2030 23:59:59 GMT`
`ETag`	资源唯一标识，用于 304 验证	开启
`Last-Modified`	资源最后修改时间	开启
`Vary`	指示缓存是否因请求头不同而不同	`Accept-Encoding`

2.1 基础配置：为静态资源设置长缓存

假设你的静态资源位于 /var/www/html/assets/，我们配置 Nginx 为这些路径设置强缓存：

location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|ttf|svg|eot|json|xml)$ {
    root /var/www/html;
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, s-maxage=31536000";
    add_header ETag "";
    add_header Last-Modified "";
    add_header Vary "Accept-Encoding";
    gzip on;
    gzip_vary on;
    gzip_types text/css application/javascript image/svg+xml application/json;
}

✅ 说明：

expires 1y;：设置过期时间为 1 年（31536000 秒）
Cache-Control: public：允许中间代理（如 CDN）缓存
s-maxage=31536000：专门针对 CDN 等共享缓存的缓存时间（优先于 max-age）
关闭 ETag 和 Last-Modified 是为了减少响应头体积，提高缓存一致性（见下文）

2.2 为什么关闭 ETag 和 Last-Modified？

虽然 ETag 和 Last-Modified 是 HTTP 标准，用于“条件请求”（304 Not Modified），但在 CDN 场景下，它们可能带来副作用：

缓存不一致：不同源站节点生成的 ETag 可能不同（如基于 inode 或时间戳），导致 CDN 缓存多个版本
增加回源概率：CDN 在缓存过期后会发送 If-None-Match 或 If-Modified-Since 请求，若源站返回 304，CDN 仍需重新缓存，效率降低
性能损耗：每次验证都需要回源，违背 CDN 降低源站压力的初衷

✅ 最佳实践：对静态资源关闭 ETag 和 Last-Modified，依靠文件名版本控制（如 style.v2.1.3.css）实现缓存失效

2.3 带版本号的静态资源命名策略（Java 实现）

在 Java Web 应用中，我们可以通过构建工具（如 Maven、Gradle）或 Spring Boot 的 ResourceUrlEncodingFilter 实现资源版本化。

示例：Spring Boot + Maven 实现资源版本化

在 application.yml 中启用资源版本化：

spring:
  web:
    resources:
      cache:
        period: 31536000
      chain:
        strategy:
          content:
            enabled: true
            paths: /**

然后在 Thymeleaf 模板中使用：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/css/style.css}" rel="external nofollow"  />
    <script th:src="@{/js/app.js}"></script>
</head>
<body>
    <img th:src="@{/assets/logo.png}" alt="Logo" />
</body>
</html>

Spring Boot 会自动将请求路径转换为：

/css/style.css?v=abc123
/js/app.js?v=def456
/assets/logo.png?v=ghi789

其中 v=abc123 是文件内容的哈希值（如 SHA-256 前 6 位），内容不变则哈希不变，内容一变则哈希变，完美实现缓存强制刷新。

为什么这样设计？
CDN 缓存是基于完整 URL 的。/css/style.css?v=abc123 和 /css/style.css?v=def456 是两个不同的 URL，因此 CDN 会分别缓存。当你发布新版本时，前端模板生成新的带哈希的 URL，CDN 自动拉取新资源，旧资源在缓存过期后自动淘汰。

Java 工具类：手动计算资源哈希（用于自定义系统）

package com.example.cdn.util;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import java.io.IOException;
import java.nio.file.Files;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Base64;
public class ResourceHashUtil {
    /**
     * 计算资源文件的 SHA-256 哈希值（Base64 编码，取前8位）
     */
    public static String calculateResourceHash(String resourcePath) {
        try {
            Resource resource = new ClassPathResource(resourcePath);
            if (!resource.exists()) {
                return "00000000"; // 默认值，避免崩溃
            }
            byte[] fileBytes = Files.readAllBytes(resource.getFile().toPath());
            MessageDigest digest = MessageDigest.getInstance("SHA-256");
            byte[] hashBytes = digest.digest(fileBytes);
            String hash = Base64.getEncoder().encodeToString(hashBytes);
            return hash.substring(0, Math.min(8, hash.length())); // 取前8位
        } catch (IOException | NoSuchAlgorithmException e) {
            return "errorhash";
        }
    }
    public static void main(String[] args) {
        // 测试：计算 /static/css/main.css 的哈希
        String hash = calculateResourceHash("/static/css/main.css");
        System.out.println("CSS Hash: " + hash); // 输出类似: a1b2c3d4
    }
}

在模板中使用：

// 在 Controller 中传递版本号
@GetMapping("/index")
public String index(Model model) {
    String cssHash = ResourceHashUtil.calculateResourceHash("/static/css/main.css");
    String jsHash = ResourceHashUtil.calculateResourceHash("/static/js/app.js");
    model.addAttribute("cssVersion", cssHash);
    model.addAttribute("jsVersion", jsHash);
    return "index";
}

Thymeleaf 模板：

<link rel="stylesheet" th:href="@{/css/main.css(v=${cssVersion})}" rel="external nofollow"  />
<script th:src="@{/js/app.js(v=${jsVersion})}"></script>

✅ 优势：完全自动化，无需手动改名；部署即刷新；兼容所有 CDN；无缓存污染风险。

三、CDN 配置关键项：如何与 Nginx 对齐？

CDN 控制台配置往往比 Nginx 更复杂，但只要理解其与 Nginx 的“对话逻辑”，就能轻松对齐。

3.1 缓存规则配置（以阿里云 CDN 为例）

在阿里云 CDN 控制台中，你需要设置“缓存规则”：

规则类型	模式	缓存时间	说明
所有文件	自定义	365 天	适用于 `.jpg`, `.css`, `.js` 等静态资源
动态文件	自定义	0 秒	适用于 `/api/`, `/user/` 等动态路径
HTML 文件	自定义	1 小时	避免缓存过久导致页面不更新

重要：不要缓存 HTML 页面，除非你有完善的版本发布机制（如 SSR + CDN 刷新）。否则用户可能看到旧页面。

3.2 回源配置：Nginx 必须“友好”响应

CDN 回源时，会发送以下请求头：

Host: yourdomain.com
User-Agent: Alibaba Cloud CDN
X-Forwarded-For: CDN节点IP

你需要在 Nginx 中：

允许 CDN 回源 IP 访问（安全加固）
忽略 CDN 的缓存头干扰
记录真实客户端 IP

Nginx 防盗链 + CDN 回源白名单

# 只允许 CDN 回源和合法用户访问静态资源
map $http_user_agent $block_static {
    default 0;
    "~*AlibabaCloud" 0;
    "~*Qiniu" 0;
    "~*Cloudflare" 0;
    "~*Akamai" 0;
    "~*Amazon CloudFront" 0;
    "~*Fastly" 0;
}
# 白名单 CDN IP（示例，需替换为真实 IP 段）
geo $cdn_ip {
    default 0;
    101.226.10.0/24 1;    # 阿里云 CDN
    101.226.11.0/24 1;
    103.245.222.0/24 1;   # Cloudflare
    104.16.0.0/12 1;
}
location ~* \.(jpg|jpeg|png|css|js|woff2|ttf|svg)$ {
    root /var/www/html;
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, s-maxage=31536000";
    add_header Vary "Accept-Encoding";
    # 防盗链：仅允许来自本域名和 CDN 的 Referer
    valid_referers none blocked server_names
                   *.yourdomain.com
                   *.alibabacloud.com
                   *.cloudflare.com;
    if ($invalid_referer) {
        return 403;
    }
    # 仅允许 CDN 回源和合法用户访问
    if ($block_static = 0) {
        return 403;
    }
    # 记录真实客户端 IP
    set_real_ip_from 101.226.10.0/24;
    set_real_ip_from 103.245.222.0/24;
    real_ip_header X-Forwarded-For;
    real_ip_recursive on;
}

注意：CDN 提供商的回源 IP 段是公开的，务必定期更新

3.3 缓存刷新与预热机制

即使你设置了 1 年缓存，发布新版本时仍需主动刷新 CDN 缓存。

方法一：URL 版本化（推荐）✅

如前文所述，使用 style.v2.1.3.css，无需刷新，新 URL 自动生效。

方法二：CDN 控制台手动刷新

在阿里云/腾讯云/Cloudflare 控制台中，你可以：

刷新单个文件：https://cdn.yourdomain.com/css/style.css
刷新整个目录：https://cdn.yourdomain.com/css/
刷新通配符：https://cdn.yourdomain.com/assets/*

方法三：API 自动刷新（Java 实现）

在 CI/CD 流程中，部署新版本后，自动调用 CDN 刷新 API：

package com.example.cdn.service;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.*;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;
import java.util.Arrays;
import java.util.List;
@Service
public class CdnCacheService {
    @Value("${cdn.api.url}")
    private String cdnApiUrl;
    @Value("${cdn.api.key}")
    private String cdnApiKey;
    @Value("${cdn.api.secret}")
    private String cdnApiSecret;
    private final RestTemplate restTemplate = new RestTemplate();
    /**
     * 刷新 CDN 缓存（以阿里云为例）
     */
    public boolean refreshCache(List<String> urls) {
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        headers.set("x-acs-accesskey-id", cdnApiKey);
        headers.set("x-acs-accesskey-secret", cdnApiSecret);
        String jsonBody = "{ \"Action\": \"RefreshCdnObjectCaches\", \"ObjectPath\": " + 
                         new ObjectMapper().writeValueAsString(urls) + ", \"ObjectType\": \"File\" }";
        HttpEntity<String> request = new HttpEntity<>(jsonBody, headers);
        try {
            ResponseEntity<String> response = restTemplate.postForEntity(cdnApiUrl, request, String.class);
            return response.getStatusCode().is2xxSuccessful();
        } catch (Exception e) {
            System.err.println("CDN 刷新失败: " + e.getMessage());
            return false;
        }
    }
    // 使用示例：在部署脚本中调用
    public void onDeploymentComplete() {
        List<String> filesToRefresh = Arrays.asList(
            "https://cdn.yourdomain.com/css/main.css",
            "https://cdn.yourdomain.com/js/app.js",
            "https://cdn.yourdomain.com/assets/logo.png"
        );
        boolean success = refreshCache(filesToRefresh);
        if (success) {
            System.out.println("✅ CDN 缓存刷新成功");
        } else {
            System.out.println("❌ CDN 缓存刷新失败，建议手动操作");
        }
    }
}

四、安全加固：防止 CDN 被滥用

CDN 虽好，但若配置不当，可能成为攻击入口：

风险	防御策略
DDoS 攻击放大	启用 CDN 的 DDoS 防护、限速、WAF
缓存污染	禁止缓存带参数的 URL（如 `?id=123`）
源站暴露	限制回源 IP，关闭源站公网访问
敏感文件缓存	禁止缓存 `/admin/`, `/config/`, `/secret/`
CORS 配置错误	明确设置 `Access-Control-Allow-Origin`

4.1 防止缓存污染：禁止缓存带查询参数的资源

CDN 默认会缓存 style.css?v=123 和 style.css?v=456 为两个资源 —— 这是正确行为。但若用户访问：

/style.css?utm_source=xxx
/style.css?random=123

CDN 会为每个不同参数缓存一份，导致缓存碎片化，浪费存储，降低命中率。

✅ 解决方案：在 Nginx 中剥离无用参数

location ~* \.(css|js|png|jpg|jpeg|gif|woff2|ttf|svg)$ {
    root /var/www/html;
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, s-maxage=31536000";
    # 去除查询参数，只保留文件名
    if ($args != "") {
        rewrite ^(.*)$ $1? permanent;
    }
    # 或者更安全地：只保留特定参数（如 v=）
    if ($args ~* "^(v=[^&]+)&?(.*)$") {
        set $args $1;
    }
    if ($args != "" && $args !~ "^v=") {
        rewrite ^(.*)$ $1? permanent;
    }
}

更优雅的做法：在前端构建时，只允许 v= 参数，其他参数在 Nginx 层直接 301 重定向。

4.2 限制源站访问：关闭公网，只允许 CDN 回源

你的 Nginx 服务器不应直接暴露在公网。应：

关闭公网 80/443 端口
仅允许 CDN 回源 IP 访问
使用私有网络（VPC）或内网 DNS

# 仅允许 CDN 回源 IP 访问
allow 101.226.10.0/24;
allow 103.245.222.0/24;
deny all;
# 此配置应放在 server 块最顶部

4.3 WAF 与安全头设置

在 Nginx 中添加安全头，增强整体防护：

add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.yourdomain.com; style-src 'self' https://cdn.yourdomain.com; img-src 'self' data: https:; font-src 'self' https://cdn.yourdomain.com;" always;
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;

CSP 策略说明：明确允许脚本、样式、图片、字体仅从你的域名和 CDN 加载，防止 XSS 注入。

五、动静分离与 Nginx 路径规划

在真实项目中，Nginx 通常同时服务动态请求（Java Spring Boot）和静态资源。必须清晰划分路径。

5.1 推荐目录结构

/var/www/html/
├── assets/          # 静态资源根目录（CDN 缓存）
│   ├── images/
│   ├── css/
│   ├── js/
│   └── fonts/
├── static/          # 本地静态文件（用于回源）
│   └── ...          # 与 assets 同步
└── index.html       # 动态页面（不缓存）

5.2 Nginx 路由配置

server {
    listen 80;
    server_name yourdomain.com;
    # 动态请求：转发给 Java 后端
    location /api/ {
        proxy_pass http://localhost:8080;
        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 $scheme;
    }
    # 动态页面：不缓存
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }
    # 静态资源：强缓存 + CDN
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|ttf|svg|json|xml)$ {
        root /var/www/html/assets;
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, s-maxage=31536000";
        add_header Vary "Accept-Encoding";
        gzip on;
        gzip_vary on;
        gzip_types text/css application/javascript image/svg+xml application/json;
    }
}

关键设计：

/api/ → 转发 Java
/ → 返回动态 HTML（不缓存）
/assets/* → 强缓存（CDN 缓存）

5.3 Java 后端与静态资源部署同步

在 Spring Boot 项目中，静态资源默认放在 src/main/resources/static/，但为了与 Nginx /assets/ 对齐，建议：

构建时复制资源：

<!-- Maven 插件：构建时复制 static 到 target/assets -->
<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.3.1</version>
    <executions>
        <execution>
            <id>copy-assets</id>
            <phase>prepare-package</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.directory}/assets</outputDirectory>
                <resources>
                    <resource>
                        <directory>src/main/resources/static</directory>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

部署脚本：

#!/bin/bash
# deploy.sh
# 1. 构建 JAR
mvn clean package
# 2. 复制静态资源到 Nginx 目录
cp target/assets/* /var/www/html/assets/
# 3. 重启 Nginx
sudo systemctl reload nginx
# 4. 调用 CDN 刷新 API（如上 Java 示例）
java -jar cdn-refresh-tool.jar

六、监控与日志分析：你知道 CDN 命中率吗？

配置完 CDN 后，你是否知道缓存命中率是多少？

💬 多数团队配置了 CDN，但从未查看过命中率 —— 这是最大的误区。

6.1 Nginx 日志格式增强

修改 Nginx 日志格式，记录 CDN 是否命中：

log_format cdn_combined '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for" '
                        '$upstream_cache_status';
access_log /var/log/nginx/access.log cdn_combined;

$upstream_cache_status 是关键字段，可能值：

值	含义
`HIT`	CDN 缓存命中
`MISS`	CDN 未缓存，回源
`EXPIRED`	缓存过期，回源验证
`STALE`	缓存过期但允许使用（CDN 配置了 stale-while-revalidate）
`UPDATING`	缓存正在更新中
`BYPASS`	被绕过（如设置了 no-cache）

6.2 日志分析脚本（Python）

#!/usr/bin/env python3
# analyze_cdn_hits.py
import re
from collections import Counter
log_file = '/var/log/nginx/access.log'
hit_count = 0
miss_count = 0
total = 0
pattern = r'"\S+" \d+ \d+ ".*" ".*" "(.*?)" (\w+)'
with open(log_file, 'r') as f:
    for line in f:
        match = re.search(pattern, line)
        if match:
            upstream_status = match.group(2)
            total += 1
            if upstream_status == 'HIT':
                hit_count += 1
            elif upstream_status == 'MISS':
                miss_count += 1
if total > 0:
    hit_rate = (hit_count / total) * 100
    print(f"📊 CDN 缓存分析报告")
    print(f"总请求: {total}")
    print(f"命中: {hit_count} ({hit_rate:.2f}%)")
    print(f"未命中: {miss_count} ({(miss_count/total)*100:.2f}%)")
    print(f"✅ 建议目标: >95% 命中率")
else:
    print("❌ 无日志数据")

运行结果：

📊 CDN 缓存分析报告
总请求: 12450
命中: 11873 (95.37%)
未命中: 577 (4.63%)
✅ 建议目标: >95% 命中率

理想值：静态资源 CDN 命中率应 ≥95%。若低于 90%，检查：

是否设置了 s-maxage？
是否缓存了动态参数？
是否频繁刷新？

6.3 CDN 控制台监控面板

阿里云 CDN：控制台 → 数据监控 → 缓存命中率
Cloudflare：Analytics → Cache Hit Ratio
腾讯云 CDN：监控中心 → 缓存命中统计

建议：设置告警：当命中率 < 90% 持续 10 分钟，发送钉钉/企业微信通知。

七、CDN 与 HTTPS：SSL 证书与 HSTS 配置

CDN 支持 HTTPS 是基本要求。但配置不当会导致：

混合内容警告（HTTP 资源加载在 HTTPS 页面）
SSL 握手失败
HSTS 未生效

7.1 Nginx HTTPS 配置

server {
    listen 443 ssl http2;
    server_name yourdomain.com;
    ssl_certificate /etc/ssl/certs/fullchain.pem;
    ssl_certificate_key /etc/ssl/private/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512;
    ssl_prefer_server_ciphers off;
    # 强制 HTTPS
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
    # 静态资源缓存（同前）
    location ~* \.(jpg|css|js)$ {
        root /var/www/html/assets;
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, s-maxage=31536000";
    }
}

7.2 CDN 侧 SSL 配置

在 CDN 控制台中：

上传证书：将你的证书（.crt + .key）上传到 CDN
启用 HTTPS：选择“强制跳转 HTTPS”
开启 HTTP/2：提升多路复用性能
开启 OCSP Stapling：加快证书验证速度

7.3 避免混合内容（Mixed Content）

确保前端所有资源使用 HTTPS：

<!-- ❌ 错误 -->
<script src="http://cdn.yourdomain.com/app.js"></script>
<!-- ✅ 正确 -->
<script src="https://cdn.yourdomain.com/app.js"></script>
<!-- ✅ 更佳：协议相对 -->
<script src="//cdn.yourdomain.com/app.js"></script>

在 Java 后端，可通过 @Value 注入 CDN 域名：

@Value("${cdn.protocol}://${cdn.domain}")
private String cdnBaseUrl;
// 在模板中使用
model.addAttribute("cdnUrl", cdnBaseUrl);

Thymeleaf：

<img th:src="${cdnUrl} + '/assets/logo.png'" />

八、实战案例：一个电商网站的 CDN 优化之路

假设你负责一个电商网站，日 PV 500 万，静态资源占 70% 带宽。

8.1 优化前问题

首页加载时间：4.2s
源站 CPU 峰值：90%
CDN 命中率：65%
用户反馈：图片加载慢，尤其海外用户

8.2 优化方案

措施	效果
1. 静态资源迁移到 `/assets/` 目录	✅
2. Nginx 设置 `expires 1y` + `s-maxage=31536000`	✅
3. 资源路径加入哈希版本：`style.a1b2c3.css`	✅
4. 禁用 ETag / Last-Modified	✅
5. CDN 缓存规则：`.css`、`.js`、`*.png` 缓存 1 年	✅
6. 限制源站访问：仅允许 CDN 回源 IP	✅
7. 启用 Gzip + Brotli 压缩	✅
8. 部署脚本自动调用 CDN 刷新 API	✅
9. 设置监控告警：命中率 < 90% 发送告警	✅

8.3 优化后结果（1 周后）

指标	优化前	优化后	提升
首页加载时间	4.2s	1.1s	↓74%
源站 CPU 峰值	90%	15%	↓83%
CDN 命中率	65%	98.2%	↑33%
海外用户加载时间	6.8s	1.9s	↓72%
月带宽成本	¥8,200	¥2,100	↓74%

结论：CDN + Nginx 协同优化，不仅能提升体验，还能直接节省成本。

九、常见陷阱与避坑指南

陷阱	正确做法
❌ 缓存 HTML 页面	✅ 仅缓存静态资源，HTML 设置 `no-cache`
❌ 使用 `Cache-Control: no-cache` 但没设 `max-age`	✅ `no-cache` 表示需验证，但可以缓存；若不想缓存，用 `no-store`
❌ CDN 缓存带参数的 URL	✅ 剥离 `utm_`, `random`, `t=` 等参数
❌ 没有设置 `Vary: Accept-Encoding`	✅ 否则 CDN 可能缓存未压缩版本，返回给支持 gzip 的用户
❌ Nginx 与 CDN 缓存时间不一致	✅ Nginx 设置 `s-maxage`，CDN 设置相同值
❌ 使用 `etag` 做版本控制	✅ 使用文件名哈希，避免 ETag 不一致
❌ 没有监控命中率	✅ 每周分析日志，设置告警

十、未来展望：CDN + Edge Computing 的演进

随着 Cloudflare Workers、AWS Lambda@Edge、阿里云边缘函数的普及，CDN 已不再只是“缓存服务器”，而是边缘计算平台。

你可以：

在边缘节点动态修改响应头
根据用户地理位置返回不同语言的 CSS
在 CDN 层做 A/B 测试
拦截恶意请求，无需回源

趋势：Nginx 逐步退居“核心源站”，CDN 成为“智能边缘网关”。

未来架构可能演变为：

用户 → CDN (Edge Function) → [可选：Nginx 原站] → Java 微服务

此时，Nginx 的角色从“全能服务器”变为“可靠后端”，而 CDN 承担了更多智能路由与安全过滤职责。

结语：构建高性能静态分发体系，是每个工程师的必修课

静态资源分发，看似是“前端小事”，实则是影响用户体验、系统稳定性、运维成本的核心基础设施。

你今天配置的每一个 expires、每一个 Cache-Control、每一个回源 IP 白名单，都在为千万用户节省毫秒级的等待时间。

记住：

CDN 不是“可选”，而是“必须”
Nginx 不是“转发器”，而是“指挥官”
缓存不是“越久越好”，而是“越准越好”

通过本文的系统性梳理，你已掌握：

✅ Nginx 缓存头的精准配置
✅ Java 动态版本化资源的实现
✅ CDN 回源安全加固
✅ 缓存命中率监控与分析
✅ 防盗链、HTTPS、CSP 安全加固
✅ 架构演进方向

现在，是时候回到你的项目，检查 /assets/ 目录的缓存策略了。

别再让用户的浏览器，等你 3 秒加载一张 200KB 的图片了。

你的一行配置，可能改变千万人的体验。

静水流深，CDN 无声，但用户感知一切。

以上就是Nginx与CDN协同配置的最佳实践的详细内容，更多关于Nginx与CDN协同配置的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Linux中安装Nginx的正确步骤
这篇文章主要给大家介绍了关于在Linux中安装Nginx的正确步骤，文中通过示例代码介绍的非常详细，对大家学习或者使用Nginx具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
nginx中rewrite和if的使用及配置方式
文章主要解释了Nginx中rewrite和ifginx跳转需求的实现方式、rewrite和ifginx正则表达式、常用的Nginx正则表达式、案例配置等内容,并涉及到了rewrite和if的应用场景和用法,以及flag对Nginx中ginx防盗链案例等ginx的ginx基于浏览器实现ginx实现分离案例等
2026-05-05
Nginx Rewrite及Location的使用与区别
rewrite和location的功能有点相像,都能实现跳转,本文主要介绍了Nginx Rewrite及Location的使用与区别,具有一定的参考价值,感兴趣的可以了解一下
2023-08-08
Nginx与浏览器缓存的处理方法
这篇文章主要介绍了Nginx与浏览器缓存的处理方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-04-04
深入分析nginx+php-fpm服务HTTP状态码502
这篇文章主要介绍了深入分析nginx+php-fpm服务HTTP状态码502，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
关于nginx没有跳转到upstream地址的解决
这篇文章主要介绍了关于nginx没有跳转到upstream地址的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
详解用Nginx搭建CDN服务器方法(图文)
这篇文章主要介绍了详解用Nginx搭建CDN服务器方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
详解Nginx服务器中map模块的配置与使用
这篇文章主要介绍了Nginx服务器中map模块的配置与使用,文中同时给出了ngx_http_map_module模块的map命令用于制作服务器限速白名单的示例,需要的朋友可以参考下
2016-01-01
Nginx服务器中处理AJAX跨域请求的配置方法讲解
这篇文章主要介绍了Nginx服务器中处理AJAX跨域请求的配置方法讲解,包括Nginx作Apache的反向代理时的配置方法,需要的朋友可以参考下
2016-01-01
利用Nginx实现URL重定向的简单方法
使用Nginx的重定向功能时,除了可以重定向到新域名,还可以将请求重定向到特定的协议上,下面这篇文章主要给大家介绍了关于如何利用Nginx实现URL重定向的简单方法,需要的朋友可以参考下
2022-04-04