假设有下面这样的场景，我们正在开发一个组件库，我们需要打包一个 umd 模块出来让其能在其他项目中使用，那么我们可以将其发布到 CDN 上，例如 unpkg 或者 jsDeliver。这样其他项目可以通过在 HTML 中引入我们的编写好的模块的 CDN 地址来直接使用它，而不必安装其他任何依赖项。

配置 docker-compose

首先我们创建一个 docker-compose.yml 文件并定义我们所需要的服务，网络和卷，这个文件应该包含 Nginx 容器的配置：

yml 复制代码

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 文件，该文件内容如下所示：

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 文件，之后我们可以编写一下我们想要的代码，如下所示：

js 复制代码

const Moment = "你好鸭，我是 Moment";

window.onload = function () {
  console.log(Moment);
};

在上面的代码中我们设置了一个变量，并且在 window.onload 事件中会在控制台中输出 你好鸭，我是 Moment 字段。

好了，这里我们的代码示例就编写完成了。

启动 Docker 容器

这些内容都编写完成之后，那么我们就可以来启动 Docker 容器了，在我们终端上包含 docker-compose.yml 的目录下，然后运行以下命令来启动或重新启动我们的服务：

bash 复制代码

docker-compose up -d

这个命令会启动 Nginx 容器，并将你的静态文件夹（包括 CSS 文件）映射到容器内的 /usr/share/nginx/html 目录。

使用本地 CDN 访问内容

现在我们就可以通过本地 CDN 的方式来访问我们的 CSS 文件和 js 文件了，我们创建一个 html 文件并编写我们的代码，如下所示：

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 访问这个文件：

url 复制代码

http://localhost:8080/css/index.css

实现本地 CDN 的效果。其中 js 的也是同样的方法，找到他具体的文件即可。

实现过程

在上面的这些配置中，Nginx 扮演着关键角色。它作为一个 web 服务器，负责接收客户端（如浏览器）的 HTTP 请求，并根据请求提供相应的静态文件（如 HTML、CSS、JavaScript 文件）。以下是 Nginx 在这种环境中工作的具体细节：

HTTP 请求处理：当用户通过浏览器访问特定 URL（如 http://localhost:8080/css/style.css）时，请求被发送到运行 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 行为。

如何使用 Nginx 搭件自己的本地 CDN，方便你的开发环境

配置 docker-compose

准备我们的静态文件

启动 Docker 容器

使用本地 CDN 访问内容

实现过程

总结