Caddy 部署静态页面

作者：马育民 • • 阅读：4

方式1：一行命令快速跑

应用场景

适合本地测试

操作

进入你的静态网站目录（里面有 index.html）

# 直接启动，默认 :2015
caddy file-server

# 指定端口 + 开启目录浏览（没有index.html时列出文件）
caddy file-server --listen :8080 --browse

# 指定网站根目录
caddy file-server --root /var/www/static --listen :8080

访问：http://127.0.0.1:8080

方式2：Caddyfile 配置

应用场景

生产推荐，支持HTTPS

操作

新建 Caddyfile（无后缀）

示例A：本地 http 测试

:8080 {
    root * /var/www/static
    file_server
}
  • root *：所有请求的网站根目录
  • file_server：开启静态文件服务，自动识别 index.html

示例B：域名公网、自动HTTPS（最常用）

前提：域名解析到服务器IP，80/443端口放行

static.example.com {
    root * /var/www/static
    file_server
    encode gzip zstd  # 开启压缩，优化加载速度
}

保存后，Caddy 会自动申请 Let’s Encrypt 证书，直接 https://static.example.com 访问，自动 http 跳转 https

示例C：Vue/React SPA单页应用（路由history模式，必配try_files）

刷新404问题解决方案

spa.example.com {
    root * /var/www/spa-dist
    file_server
    encode gzip zstd
    try_files {path} {path}/ /index.html
}

示例D：带目录浏览

:8080 {
    root * /var/www/static
    file_server browse
}

启动、重载、停止

# 当前目录读取 Caddyfile 前台运行（调试）
caddy run

# 后台启动/重载（修改Caddyfile后用这个，不中断服务）
caddy reload

# 停止
caddy stop

Linux systemd 服务

注意： apt安装自带

sudo systemctl restart caddy
sudo systemctl enable caddy
sudo systemctl status caddy
# 配置文件默认位置 /etc/caddy/Caddyfile
# 网站目录权限：caddy 用户要有读权限
sudo chown -R caddy:caddy /var/www/static

常用补充配置

example.com {
    root * /var/www/static
    file_server {
        precompressed br gzip # 优先返回预压缩好的文件
    }
    encode gzip zstd

    # 缓存静态资源（图片、css、js）
    @static_files {
        path *.jpg *.png *.gif *.css *.js *.ico *.svg
    }
    header @static_files Cache-Control "public, max-age=2592000"
}

坑

  1. 权限：网站目录必须让 caddy 用户可读，否则403
  2. SPA history模式：不加 try_files，子路由刷新404
  3. 域名HTTPS失败：检查防火墙、域名解析、80端口是否通（ACME验证需要80）
  4. Windows 直接用二进制，caddy run 即可，适合本地预览静态页
吉ICP备15003043号