Cloudflare Workers实战(四)：托管和分发静态文件

2025-07-21T10:47:13Z +0800 …

Cloudflare, 免费资源, 云计算, 有用的工具, 快速入门

文章目录

之前的文章：

前面几篇，咱们把Workers当成了一个“动态处理器”，玩转了请求，响应，缓存，认证，重定向等。但如果我告诉你，Workers还能当个静态文件服务器用，你信吗？没错，这货还能干Web Server的活儿！

配合static-assets，你的Worker就能摇身一变，成为一个功能强大、还便宜到没朋友的静态网站托管平台。对于一些小项目或者特殊场景，这简直是比用Pages或者S3更轻、更骚的选择。

放着Pages不用，为啥要折腾Worker？

我知道你肯定会问：“Cloudflare不是有现成的Pages服务吗？专门托管静态网站的，又好用又方便，我为啥要用Worker自己造轮子？”

在大多数情况下，特别是你用Hugo、Next.js这些框架生成的标准静态网站，用Cloudflare Pages绝对是最佳选择。它那一套Git集成、自动构建部署的流水线，香得很。

但是，在某些特殊场景下，用Worker“手动挡”操作，能给你带来意想不到的快感：

自由！：路由怎么走，访问怎么控制，Header怎么改，全都是你说了算！不像Pages，很多东西都是定好的。
合体！：你可以在一个Worker里，让/api/*的路由去处理动态API，让其他路径去返回静态文件。这种“动静结合”的模式，Pages可给不了你。
好玩！：如果你想深入理解HTTP服务和Cloudflare底层是怎么玩的，自己动手用Worker搭一个，绝对是最好的学习方式。

所以，简单来说：常规项目用Pages，想玩点花的、需要高度自定义的，就上Worker！

官方正统，用内置静态资源托管

曾几何时，我们想在Worker里托管静态文件，第一个想到的就是Workers KV。但时代变了朋友们！现在Cloudflare官方提供了一个更简单、更集成、也更强大的方式：直接部署静态资源。

这个新方案，你可以把它理解成Cloudflare帮你把静态文件和Worker代码打包成一个整体。请求来了，如果能匹配到静态文件，Cloudflare就直接从最优节点返回，连你的Worker代码都不会执行，速度快到飞起！只有匹配不到静态文件（比如API请求），才会轮到Worker出场。

优点：配置超级简单，性能极高（Cloudflare自动处理缓存和分发），与Worker无缝集成，还支持SPA（单页应用）模式。
缺点：嗯…好像没啥明显缺点，这已经是目前托管静态网站的最佳实践了。

操作步骤：

指定静态资源目录：你只需要在wrangler.toml文件里，告诉Wrangler你的静态文件都放在哪个文件夹里。通常，前端项目打包后会生成一个dist或public目录，我们指定它就行。

# wrangler.toml
name = "my-static-site"
main = "src/index.js" # 你的Worker代码入口
compatibility_date = "2024-01-01"

# 核心配置就是下面这几行！
[assets]
directory = "./dist" # 指定你的静态资源目录

编写Worker代码（可选但推荐）：最简单的场景下，你甚至可以不需要Worker代码。但通常我们会写一个简单的Worker来处理API请求或者作为找不到文件时的兜底。

// src/index.js
export default {
  async fetch(request, env, ctx) {
    // 这里的 env.ASSETS 就是Cloudflare帮你注入的魔法对象
    // 它会处理所有静态资源的请求
    // 如果请求的是 /api/*，你可以自己处理
    const url = new URL(request.url);
    if (url.pathname.startsWith('/api/')) {
      return new Response(JSON.stringify({ message: 'Hello from API' }), {
        headers: { 'Content-Type': 'application/json' },
      });
    }

    // 其他所有请求，都交给ASSETS去处理
    return env.ASSETS.fetch(request);
  },
};

部署：和平时一样，一行命令搞定。
```
wrangler deploy
```

部署后，Cloudflare会自动上传./dist目录下的所有文件，并配置好全球分发和缓存。你的网站会变得前所未有的快！

进阶玩法：单页应用（SPA）支持

如果你用的是React, Vue, Svelte这类单页应用框架，经常需要把所有找不到的路径都指向index.html。在新的方案里，只需要加一个配置项：

# wrangler.toml
[assets]
directory = "./dist"
not_found_handling = "single-page-application"

搞定！是不是比以前自己写Worker逻辑判断URL要优雅太多了？

小结一下

今天，我们又解锁了Cloudflare Workers的一个隐藏身份——静态文件服务器。通过搭配static-assets，我们可以打造出一个兼具高性能和低成本的静态资源托管方案。

到此为止，我们已经把JavaScript能玩的Workers花样探索得差不多了。但Serverless的世界远不止于此。在咱们这个系列的最后一篇文章里，我将带你跳出JS的舒适圈，看看怎么用Python和Rust这种更“硬核”的语言来写Workers，真正实现“万物皆可Serverless”！下期最终章，不见不散！