关键点

1、允许 443 端口接收 UDP 数据包

2、nginx config 配置选项位于 server 域

3、 在所有的 server 域中，只需要有一个 server 域中配置 reuseport 选项即可

4、打开浏览器控制台，刷新页面，在 调试面板 network 选项 ，protocl 栏 显示 h3 表示开启成功

5、响应头里包含： Alt-Svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000

6、关键点如下配置：

7、nginx 版本大于等于 1.25

    listen  443       ssl;
    listen  443      quic reuseport;  
    listen  [::]:443  ssl;
    listen  [::]:443 quic reuseport;
    http2 on;
 
    add_header Alt-Svc 'h3=":443"; ma=2592000,h3-29=":443"; ma=2592000';
 

简易配置

version: "3"
services:
    web-server:
        image: nginx:1.25-alpine
        ports:
            - "80:80/tcp"
            - "443:443/tcp"
            - "443:443/udp"
        container_name: nginx-web
        restart: always
        volumes:
            - ./etc/conf.d:/etc/nginx/conf.d/
            - /data/tls:/tls  # https 证书
            - /data/:/data
 

nginx server 域完整配置

vi ./etc/conf.d/www.muyoung.com.conf

 
server {
    listen       80;
    listen  [::]:80;
    server_name www.muyoung.com
    ;
    rewrite ^(.*) https://$server_name$1 permanent;
}
 
 
server {
    listen  443       ssl;
    listen  443      quic reuseport;
    listen  [::]:443  ssl;
    listen  [::]:443 quic reuseport;
    http2 on;
    
    server_name www.muyoung.com ;
 
 
    ssl_certificate     /tls/www.muyoung.com.fullchain.pem;
    ssl_certificate_key /tls/www.muyoung.com.key.pem;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;
 
    ssl_protocols  TLSv1.3;
    ssl_prefer_server_ciphers off;
 
 
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";
 
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    add_header Alt-Svc 'h3=":443"; ma=2592000,h3-29=":443"; ma=2592000';
 
    # 允许跨域
    add_header Access-Control-Allow-Origin  $http_origin always;
    add_header Access-Control-Allow-Methods 'GET,HEAD,POST,PUT,DELETE,CONNECT,OPTIONS,TRACE,PATCH' always;
 
    # 预检请求处理
    if ( $request_method = "OPTIONS" ) {
        return 204;
    }
 
    location / {
        root /data/web/dist/;
        index  index.html index.htm;
    }
 
 }
 
 

配置结果查看

1. 检测http3 是否开启