使用 EdgeOne CDN 加速 Immich 地图加载速度

前段时间领取 EdgeOne 的免费版使用，其安全加速流量和安全加速请求均显示 ‘不限量’，堪称国内的小赛博罗汉。

本篇记录 Immich 地图瓦片和 Style JSON 文件的配置过程，主要有两项：

  1. 使用 EdgeOne CDN 加速 Immich Tiles 地图瓦片数据；
  2. 使用 EdgeOne Functions 替换 Style JSON 文件内的资源引用地址；

配置 CDN

图 01

创建两个子域名，对应关系如下：

immich-tiles.yasking.org  => tiles.immich.cloud
immich-static.yasking.org => static.immich.cloud

P.S. immich-tiles 和 immich-static 为自定义的子域名，另外手动启用 HTTPS（自动申领或上传自有证书）

访问 Immich 地图配置页面

Console -> Administrator -> Settings -> Map & GPS Settings

图 02

将 URL 修改为 CDN 绑定的域名，保留 Path（如上图所示）。

配置 EdgeOne Functions

如果你打开上方路径的 .json 可以看到其内部仍是官方资源硬编码的资源地址

图 03

可以借助 EdgeOne 边缘函数对 Host 进行替换，新建函数，内容如下：

async function handleRequest(request) {
  const url = new URL(request.url);

  // 仅允许代理 Immich 的 style JSON
  if (
    url.pathname !== "/v1/style/light.json" &&
    url.pathname !== "/v1/style/dark.json" &&
    url.pathname !== "/v1.json"
  ) {
    return new Response("Not Found", {
      status: 404,
    });
  }

  const upstreamUrl =
    `https://tiles.immich.cloud${url.pathname}${url.search}`;

  const response = await fetch(upstreamUrl);

  if (!response.ok) {
    return response;
  }

  let text = await response.text();

  text = text
    .replaceAll(
      "https://tiles.immich.cloud",
      "https://immich-tiles.yasking.org"
    )
    .replaceAll(
      "https://static.immich.cloud",
      "https://immich-static.yasking.org"
    );

  const headers = new Headers(response.headers);

  // Body 已经被修改，这些头可能失效
  headers.delete("content-length");
  headers.delete("content-encoding");
  headers.delete("etag");

  headers.set(
    "content-type",
    "application/json; charset=UTF-8"
  );

  headers.set(
    "cache-control",
    "public, max-age=3600"
  );

  return new Response(text, {
    status: response.status,
    headers,
  });
}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

而后在触发配置中添加触发条件：

图 04 
HOST 等于 immich-tiles.yasking.org
并且 URL path 等于 /v1/style/light.json 或 /v1/style/dark.json

配置后继续调整 EdgeOne 的缓存时间（针对 mvt 后缀文件）

图 06

访问测试

待部署完成后访问 Immich Map 页面，可以看到请求已走自定义域名。

图 05

瓦片地图从 EdgeOne CDN 加载，速度从 1s+ 降低到 100 毫秒级别。

图 08

访问一会儿地图后回到 EdgeOne 控制台，可以看到请求数飙升，符合预期。

图 07