之前的文章：

1. Cloudflare workers不完全指南"
2. Cloudflare Workers实战(一)：随心所欲操作客户端请求
3. Cloudflare Workers实战(二)：动态修改后端响应
4. Cloudflare Workers实战(三)：实现认证、重定向与缓存

前面几篇，咱们把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（单页应用）模式。
• 缺点：嗯…好像没啥明显缺点，这已经是目前托管静态网站的最佳实践了。

操作步骤：

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

   # wrangler.toml
   name = "my-static-site"
   main = "src/index.js" # 你的Worker代码入口
   compatibility_date = "2024-01-01"
   
   # 核心配置就是下面这几行！
   [assets]
   directory = "./dist" # 指定你的静态资源目录
   

2. 编写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);
     },
   };
   

3. 部署： 和平时一样，一行命令搞定。

   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”！下期最终章，不见不散！