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

假设有下面这样的场景,我们正在开发一个组件库,我们需要打包一个 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 在这种环境中工作的具体细节:

  1. HTTP 请求处理:当用户通过浏览器访问特定 URL(如 http://localhost:8080/css/style.css)时,请求被发送到运行 Nginx 的 Docker 容器。这里的 URL 包含了协议 (http)、主机名 (localhost) 和端口 (8080),以及请求的资源路径 (/css/style.css)。

  2. 服务器配置和文件定位:Nginx 根据其配置来处理接收到的 HTTP 请求。在 Docker 容器中,Nginx 被配置为从 /usr/share/nginx/html 目录提供文件。这意味着任何请求路径都将映射到这个目录。例如,如果请求是 /css/index.css,Nginx 会尝试从 /usr/share/nginx/html/css/index.css 返回文件。

  3. 文件服务:如果请求的文件存在,Nginx 将文件内容读取到内存中,并将其作为 HTTP 响应的一部分发送回客户端。这个过程非常快速,因为 Nginx 非常擅长处理静态内容,它能够优化文件的读取和传输。

通过这些工作原理,Nginx 在你的本地 CDN 设置中提供了一个高效、可靠且易于配置的服务,使得本地资源的管理和测试变得更加方便和高效。

总结

我们如果还可以在 Nginx 配置中置中设置合适的缓存控制头部,以优化文件的加载和缓存策略。

通过以上步骤,你可以将 CSS 文件或其他任何静态资源有效地部署到本地 CDN,从而在本地开发环境中模拟真实的 CDN 行为。

相关推荐
莫的感情12 小时前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥12 小时前
JavaScript事件循环
开发语言·前端·javascript
摇滚侠12 小时前
Spring Boot 3零基础教程,WEB 开发 自定义静态资源目录 笔记31
spring boot·笔记·后端·spring
Anthony_492612 小时前
逻辑清晰地梳理Golang Context
后端·go
小宁爱Python12 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_12 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐12 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
进击的圆儿12 小时前
高并发内存池项目开发记录01
后端
左灯右行的爱情12 小时前
4-Spring SPI机制解读
java·后端·spring
Code小翊12 小时前
C语言bsearch的使用
java·c语言·前端