假设有下面这样的场景，我们正在开发一个组件库，我们需要打包一个 umd 模块出来让其能在其他项目中使用，那么我们可以将其发布到 CDN 上，例如 unpkg 或者 jsDeliver。这样其他项目可以通过在 HTML 中引入我们的编写好的模块的 CDN 地址来直接使用它，而不必安装其他任何依赖项。
配置 docker-compose
首先我们创建一个 docker-compose.yml 文件并定义我们所需要的服务，网络和卷，这个文件应该包含 Nginx 容器的配置：
version: "3.9"
services:
cdn:
image: nginx:alpine
container_name: local-cdn
ports:
- "8080:80"
volumes:
- ./static:/usr/share/nginx/html
restart: unless-stopped
在上面的这些配置中使用 ports 将容器内部的 80 端口映射到宿主机的 8080 端口。并且使用 volumes 将宿主机的 ./static 目录映射到容器内的 /usr/share/nginx/html。这样，容器中的 Nginx 将能够访问到这些静态文件。
准备我们的静态文件
首先我们需要在 static 目录下创建一个 css 文件夹，并且需要在该文件夹下创建一个 index.css 文件，该文件内容如下所示：
div {
background-color: rgb(255, 0, 234);
font-size: 36px;
}
.moment {
background-color: rgb(28, 28, 171);
color: cadetblue;
}
在上面的代码中我们定义了两个 css 样式，其中一个样式为所有的 div 元素都设置了背景颜色和字体大小，另外一个具体的 css 类名设置了背景颜色和字体颜色。
除了 css 之外我们还可以创建一个 js 文件，那么我们应该在 static 目录下创建一个 js 文件夹，并且在该文件夹下创建一个 index.js 文件，之后我们可以编写一下我们想要的代码，如下所示：
const Moment = "你好鸭，我是 Moment";
window.onload = function () {
console.log(Moment);
};
在上面的代码中我们设置了一个变量，并且在 window.onload 事件中会在控制台中输出 你好鸭，我是 Moment 字段。
好了，这里我们的代码示例就编写完成了。
启动 Docker 容器
这些内容都编写完成之后，那么我们就可以来启动 Docker 容器了，在我们终端上包含 docker-compose.yml 的目录下，然后运行以下命令来启动或重新启动我们的服务：
docker-compose up -d
这个命令会启动 Nginx 容器，并将你的静态文件夹（包括 CSS 文件）映射到容器内的 /usr/share/nginx/html 目录。
使用本地 CDN 访问内容
现在我们就可以通过本地 CDN 的方式来访问我们的 CSS 文件和 js 文件了，我们创建一个 html 文件并编写我们的代码，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="http://localhost:8080/css/index.css
"
/>
</head>
<body>
<div>Moment</div>
<div class="moment">云梦泽</div>
<script src="http://localhost:8080/js/index.js"></script>
</body>
</html>
最终输出的结果如下图所示：
我们可以看到之前我们编写的代码都生效了。
其中通过如下 URL 访问这个文件：
http://localhost:8080/css/index.css
实现本地 CDN 的效果。其中 js 的也是同样的方法，找到他具体的文件即可。
实现过程
在上面的这些配置中，Nginx 扮演着关键角色。它作为一个 web 服务器，负责接收客户端（如浏览器）的 HTTP 请求，并根据请求提供相应的静态文件（如 HTML、CSS、JavaScript 文件）。以下是 Nginx 在这种环境中工作的具体细节：
HTTP 请求处理：当用户通过浏览器访问特定 URL（如 Nginx 的 Docker 容器。这里的 URL 包含了协议 (http)、主机名 (localhost) 和端口 (8080)，以及请求的资源路径 (/css/style.css)。
服务器配置和文件定位：Nginx 根据其配置来处理接收到的 HTTP 请求。在 Docker 容器中，Nginx 被配置为从 /usr/share/nginx/html 目录提供文件。这意味着任何请求路径都将映射到这个目录。例如，如果请求是 /css/index.css，Nginx 会尝试从
/usr/share/nginx/html/css/index.css返回文件。文件服务：如果请求的文件存在，Nginx 将文件内容读取到内存中，并将其作为 HTTP 响应的一部分发送回客户端。这个过程非常快速，因为 Nginx 非常擅长处理静态内容，它能够优化文件的读取和传输。
通过这些工作原理，Nginx 在你的本地 CDN 设置中提供了一个高效、可靠且易于配置的服务，使得本地资源的管理和测试变得更加方便和高效。
总结
我们如果还可以在 Nginx 配置中置中设置合适的缓存控制头部，以优化文件的加载和缓存策略。
通过以上步骤，你可以将 CSS 文件或其他任何静态资源有效地部署到本地 CDN，从而在本地开发环境中模拟真实的 CDN 行为。