使用 cloudflare tunnel 在线上预览本地的开发服务器

Table of Contents

Cloudflare Tunnel 是一项服务，允许开发者将其本地开发服务器通过安全的隧道连接到 Cloudflare 的服务器，并发布到互联网上。这意味着：

其他人可以直接通过互联网访问你本机的开发服务器
本地的 HTTP 服务可以自动获得由 Cloudflare 提供的 https 证书

Cloudflare 在这篇文章中介绍了如何将本地项目发布到互联网，但是对于前端开发服务器的场景来说，缺少一些必要的配置说明，例如，稳定的域名、网页缓存策略等。如果你遇到了开发服务器通过 Cloudflare tunnel 访问后出现了一些诡异的问题，不妨参考下面的步骤来检查一下自己的配置。

创建本地管理的 tunnel

在开始之前，请确保你准备好了这些东西：

在本地安装 cloudflared
在 cloudflare 上绑定了自己的域名

接着，参考这里的说明，创建一个本地管理的 tunnel。完成这里的步骤后，你应该会得到一份 config.yaml 文件，默认存储在 ~/.cloudflared 目录下。

Cloudflare 的文档中使用了 url 字段配置反向代理，但我建议使用下面的 ingress 配置，这样你可以在同一个配置文件中声明多个服务。

tunnel: <Tunnel ID>
credentials-file: /path/to/<Tunnel ID>.json

ingress:
  - hostname: ng-serve.zeeko.dev
    path: /api/.*
    service: http://localhost:3000
  - hostname: ng-serve.zeeko.dev
    service: http://localhost:4200
  # this is a required fallback rule
  - service: http_status:503

禁用 Cloudfare 缓存

你的 Cloudflare 帐户很可能默认开启了请求缓存功能，在一些使用场景下，例如，webpack dev server，这个自带的缓存功能会让 dev server 变得很鬼畜，我们需要手动在 Cloudflare 控制面板禁用缓存。

添加 webpack dev server 白名单

如果你在使用 webpack dev server，记得把绑定的域名添加到 allowedHosts 中，避免 HMR 失败。

网上冲浪指南