使用wrangler将多Angular应用部署到Cloudflare Workers的路径配置问题

完全可以实现你要的路径结构，不需要拆分多个独立Worker服务，以下是两种常用方案：

方案1：单Worker路由分发（最贴合你的预期） #

你最初的思路是对的，只要通过入口文件做路径映射，就能在单个Worker内完成两个应用的分发，不需要配置多个worker-site。

操作步骤 #

• 第一步：整理NX构建产物目录
  调整NX两个应用的构建输出配置，把根路径应用的产物输出到dist/apps/root-site，子路径应用的产物输出到dist/apps/site2，整体目录结构参考：

  项目根目录
  ├── dist/
  │   ├── apps/
  │   │   ├── root-site/ # 根路径应用构建产物
  │   │   └── site2/ # /site2/ 路径应用构建产物
  ├── src/
  │   └── worker.js # Worker入口文件
  └── wrangler.toml
  

• 第二步：配置wrangler.toml
  直接绑定整个构建产物根目录作为静态资源目录即可：

  name = "multi-app-worker"
  main = "src/worker.js"
  compatibility_date = "2023-10-30"
  
  [site]
  bucket = "./dist"
  

• 第三步：编写Worker入口路由逻辑
  通过路径判断把不同请求映射到对应的静态资源目录，示例代码如下（依赖@cloudflare/kv-asset-handler包）：

  import { getAssetFromKV, serveSinglePageApp } from '@cloudflare/kv-asset-handler'
  
  addEventListener('fetch', event => {
    event.respondWith(handleRequest(event))
  })
  
  async function handleRequest(event) {
    const reqUrl = new URL(event.request.url)
    const handlerOptions = {}
  
    try {
      if (reqUrl.pathname.startsWith('/site2/')) {
        // 子路径站点请求映射到site2目录
        handlerOptions.mapRequestToAsset = (req) => {
          const modifiedReq = new Request(req)
          modifiedReq.url = modifiedReq.url.replace('/site2/', '/apps/site2/')
          // 如果是SPA应用，保留下面这行处理前端路由
          return serveSinglePageApp(modifiedReq)
        }
      } else {
        // 根路径站点请求映射到root-site目录
        handlerOptions.mapRequestToAsset = (req) => {
          const modifiedReq = new Request(req)
          const path = new URL(modifiedReq.url).pathname
          modifiedReq.url = modifiedReq.url.replace(path, `/apps/root-site${path}`)
          // 如果是SPA应用，保留下面这行处理前端路由
          return serveSinglePageApp(modifiedReq)
        }
      }
      return await getAssetFromKV(event, handlerOptions)
    } catch (err) {
      return new Response('404 Not Found', { status: 404 })
    }
  }
  

注意：如果你的子路径应用是SPA（React/Vue/Angular等带前端路由的应用），需要在应用构建配置中把路由base路径设置为/site2/，避免前端跳转时脱离子路径前缀。

方案2：多Worker绑定路由（适合独立部署场景） #

如果两个应用需要分开管理、独立发布，可以创建两个独立Worker，每个Worker对应一个应用，之后在Cloudflare域名控制台配置路由规则即可：

• 配置路由example.com/*绑定根路径应用的Worker
• 配置路由example.com/site2/*绑定子路径应用的Worker，将该路由的优先级设置为高于根路径路由，Cloudflare会优先匹配更具体的规则

该方案无需修改Worker代码，但是需要管理两份独立的Worker配置。

内容的提问来源于stack exchange，提问作者PeculiarJoe