HOW- Caddy - 自动 HTTPS 和现代协议支持

最新推荐文章于 2024-08-11 11:28:24 发布

@PHARAOH

最新推荐文章于 2024-08-11 11:28:24 发布

阅读量490

点赞数 5

文章标签： https 网络协议 http 前端 javascript 网络

本文链接：https://blog.csdn.net/weixin_58540586/article/details/139112964

版权

一、背景

我们可能在开发中遇到如下问题：

场景一

本地前端起了服务，在浏览器可通过 localhost:8080 访问。
请求后端服务业务域名的接口正常，因为做了跨域配置
但访问一些内部公共服务，如 FMS、CDN 服务时，访问其域名的接口，访问失败

失败原因：请求跨域设置不允许 localhost，而是 *.company.com 等通用域名，且要求为 https 协议。

场景二

开发环境登录时，需要使用 SSO 的 Cookie，但是受到跨域限制，需要本地模拟一个 https 协议的域名。

二、解决方案：caddy

Caddy 是一个开源的 HTTP/2 和 HTTP/3 服务器，具有自动 HTTPS 功能。它非常适合需要简便、安全地托管网站的用户。

Caddy 的主要特点包括：

自动 HTTPS：Caddy 自动为你的站点获取并续订 TLS 证书。
简洁的配置：使用简单的配置文件（Caddyfile）配置站点。
现代协议支持：支持 HTTP/2 和 HTTP/3 协议。
插件系统：Caddy 支持各种插件，扩展功能和灵活性。
跨平台：支持 Linux、Mac、Windows 等多种操作系统。

以下是 Caddy 的一些基本用法和配置示例：

2.1 安装 Caddy

你可以通过多种方式安装 Caddy，包括从源代码构建、使用包管理器或下载预构建的二进制文件。

具体安装文档

2.2 基本配置（Caddyfile）

Caddy 使用一个名为 Caddyfile 的配置文件来定义站点配置。以下是一个简单的 Caddyfile 示例：

example.com {
    root * /var/www/html
    file_server
    encode gzip
    log {
        output file /var/log/caddy/access.log
    }
}

在这个示例中：

example.com 是你的域名。
root * /var/www/html 设置网站根目录。
file_server 启用文件服务器功能，提供静态文件。
encode gzip 启用 gzip 压缩。
log 配置访问日志记录。

2.3 启动 Caddy

配置完成后，可以使用以下命令启动 Caddy：

sudo systemctl start caddy
sudo systemctl enable caddy

2.4 使用插件

Caddy 有丰富的插件系统，可以扩展其功能。

例如，使用 http.jwt 插件进行 JWT 身份验证：

example.com {
    route {
        jwt {
            primary yes
            trusted_public_key /path/to/public.key HS256
        }
        reverse_proxy localhost:3000
    }
}

2.5 自动 HTTPS

Caddy 会自动获取和续订 TLS 证书，这使得配置 HTTPS 非常简单。你只需确保域名指向服务器的 IP 地址，并在 Caddyfile 中使用域名，Caddy 会自动处理证书的获取和续订。

三、Caddy 作为反向代理

3.1 基本使用

Caddy 也可以作为反向代理来处理传入的请求并将其转发到其他服务器：

example.com {
    reverse_proxy /api/* localhost:8080
    reverse_proxy /assets/* localhost:9090
}

在这个示例中：

请求 /api/* 会被转发到 localhost:8080。
请求 /assets/* 会被转发到 localhost:9090。

3.2 localhost 请求跨域问题解决

本地前端起了服务，在浏览器可通过 localhost:8080 访问
安装 Caddy，接着在项目根目录新建文件 Caddyfile

local.company.com {
  reverse_proxy localhost:8080
  tls internal
}

在 /etc/hosts 指定一个域名，比如 local 到本地

127.0.0.1 local.company.com

然后在当前路径执行 caddy run生成一个自签名的证书
重新启动前端服务
在浏览器 https://local.company.com 应该就可以正常访问通用服务接口

3.3 FAQ

1. ERR_TUNNEL_CONNECTION_FAILED 错误

有时候我们本机网络代理中网页代理(HTTP) 和安全网页代理(HTTPS) 挂着公司代理的情况时，会遇到这个报错，如：

打开本机代理设置
网页代理(HTTP) 配置：服务器 proxy.company.com，端口 8080
安全网页代理(HTTPS) 配置：服务器 proxy.company.com，端口 8080

因为 DNS 解析从公司代理找不到 /etc/hosts 里定义的地址。

如果确认是代理的原因，代理规则里设置忽略 *.company.com 可以解决。

2. Vite WebSocket 另外指定了端口的问题

在 vite 项目中，启动时会发现网页持续刷新。排查后发现是因为 vite 内部 hmr 功能重新自定义了 ws 端口，导致页面一直刷新。

但是 Caddy 转 Secure WebSocket 的配置暂缺，目前需要一个手动配置让 Vite WebSocket 直接走 HTTP，注意端口号要配置两个地方：

// vite.config.js
export default {
  server: {
    // 本地调试场景下用于用于覆盖 vite hmr 配置
    hmr: {
      protocol: "ws",
      host: "localhost",
      port: 20001, // 可以自己选择一个合适的端口, 比如 5173
      clientPort: 20001,
    }
  }
}