单页面应用Caddy2的配置

发表于 | 更新于 | 分类于

使用caddy2部署单页面应用时的配置

前言

为了部署一个单页面应用，需要符合以下条件

  • 路径为/api时，转发到后台应用
  • 路径为文件时，返回文件，并且设定cache
  • 路径为目录时，都转发到index.html

配置

为了实现以上目标，在caddyfile中先定义常用方法

共同方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
# 输出日志到文件
(LOG) {
	log {
		output file "{args.0}" {
			roll_size 100mb
			roll_keep 50
			roll_keep_for 720h
		}
	}
}
# 申请证书
(TLS) {
	tls mymail@xxx.com
}
# 跨域
(CORS) {
  @cors_preflight method OPTIONS
  @cors header Origin {args.0}

  handle @cors_preflight {
    header Access-Control-Allow-Origin "{args.0}"
    header Access-Control-Allow-Methods "*"
    header Access-Control-Allow-Headers "*"
    header Access-Control-Max-Age "3600"
    respond "" 204
  }

  handle @cors {
    header Access-Control-Allow-Origin "{args.0}"
    header Access-Control-Expose-Headers "*"
  }
}
# 单页面应用的静态文件处理
(SPA) {
	root * {args.0}
	file_server
	@static {
		file
	}
	handle @static {
		encode gzip
		header Cache-Control "public, max-age=31536000, immutable"
	}
	handle {
		rewrite * /index.html
		header Cache-Control "no-cache, no-store, must-revalidate"
	}
}
# 使用fpm的PHP应用，带美化路径重写
(PHP) {
	root * {args.0}
	file_server
	try_files {path} /index.php?s={path}&{query}
	php_fastcgi unix//var/run/php-fpm.sock
}
import vhosts/*.conf

单页面应用配置

1
2
3
4
5
6
7
8
9
10
example.com {
	import LOG "/var/log/example.com.log"
	import TLS
	handle /api/* {
		reverse_proxy backend-api:80
	}
	handle {
		import SPA /var/www/html/front/dist/
	}
}

如果调用api时，后台想去掉繁琐的/api前缀，可以使用strip_prefix

1
2
3
4
handle /api/* {
	uri strip_prefix /api
	reverse_proxy backend-api:80
}

或者干脆使用handle_path，它默认会去掉前缀

1
2
3
handle_path /api/* {
	reverse_proxy backend-api:80
}

单应用配置（管理端，用户端分离）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
example.com {
	import LOG "/var/log/example.com.log"
	import TLS
	handle_path /api/* {
		reverse_proxy backend-api:80
	}
	@admin path /admin /admin/*
	handle @admin {
		uri strip_prefix /admin
	    import SPA /var/www/html/admin-front/dist/
	}
	handle {
	    import SPA /var/www/html/user-front/dist/
	}
}

单应用配置（域名分离）

1
2
3
4
5
6
7
8
9
10
11
12
13
api.example.com {
	import LOG "/var/log/example-api.log"
	import TLS
	import CORS "https://example.com"
    reverse_proxy weshow-ent-admin-api:8080
}
example.com {
	import LOG "/var/log/example-front.log"
	import TLS
	handle {
	    import SPA /var/www/html/weshow-ent/weshow-ent-admin-front/dist/
	}
}

PHP应用配置

需要启动一个fpm伺服程序，然后通过php-fpm.sock进行通信

1
2
3
4
5
6
7
8
9
10
#!/bin/sh

docker rm -f php

docker run -d --restart always \
	--name php \
	--network my-nw \
	-v /root/workspace/php:/var/php \
	-v phpsocket:/var/run \
	php:fpm

Caddy启动时需要mount同样的东西

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#!/bin/sh

docker rm -f caddy2

docker run -d --restart always \
        --name caddy2 \
        --network my-nw \
        -v /root/workspace/php:/var/php \
		-v phpsocket:/var/run \
        -v "$PWD"/log:/var/log \
        -v "$PWD"/config:/etc/caddy \
        -v caddy_data:/data \
        -v caddy_config:/config \
        -p 80:80 -p 443:443 \
        caddy

这样配置就可以了

1
2
3
4
5
example.com {
	import LOG "/var/log/example.log"
	import TLS
	import PHP /var/php/example/public
}

其他

在启动caddy的时候，输出日志里可能会发现有以下警告消息

1
{"level":"info","ts":1690268568.537111,"msg":"failed to sufficiently increase receive buffer size (was: 208 kiB, wanted: 2048 kiB, got: 416 kiB). See https://github.com/quic-go/quic-go/wiki/UDP-Receive-Buffer-Size for details."}

这是由于系统默认的设置太小的缘故，加大后，重启caddy即可

1
sysctl -w net.core.rmem_max=2500000