企业官网建设流程全解析

t恤在线制作网站,twitter wordpress,云南省建设厅官方网站证书,江苏seo培训[ 知识是人生的灯塔#xff0c;只有不断学习#xff0c;才能照亮前行的道路 ]#x1f4e2; 大家好#xff0c;我是 WeiyiGeek#xff0c;一名深耕安全运维开发#xff08;SecOpsDev#xff09;领域的技术从业者#xff0c;致力于探索DevOps与安全的融合#xff08;Dev…[ 知识是人生的灯塔只有不断学习才能照亮前行的道路 ] 大家好我是 WeiyiGeek一名深耕安全运维开发SecOpsDev领域的技术从业者致力于探索DevOps与安全的融合DevSecOps自动化运维工具开发与实践企业网络安全防护欢迎各位道友一起学习交流、一起进步 若此文对你有帮助一定记得点个关注⭐与小红星❤️或加入到作者知识星球『 全栈工程师修炼指南』转发收藏学习不迷路 。Nginx 中 http2 协议介绍与服务搭建资源推送描述前面《Nginx | HTTP 反向代理gRPC 高性能远程过程调用RPC框架》文章中我们介绍了 Google 推出的 gRPC 服务框架并在 Nginx 反向代理 gPRC 服务时它也是基于 HTTP/2 实现的HTTP2.0 协议相对于 HTP1.1 协议有很大的一个性能提升。另外作者前面的 Nginx 演示配置中都开启了 HTTP/2 支持但是并未对其详细介绍和对性能到底有那些提升以及演示其资源推送功能所以接下来我们一一详细介绍与实践。温馨提示若文章代码块中存在乱码或不能复制请联系作者也可通过文末的阅读原文链接加入知识星球中阅读原文链接https://articles.zsxq.com/id_fib851xw86fq.htmlHTTP2 协议介绍HTTP/2 是 HTTP 协议的第二个主要版本于 2015 年发布旨在解决 HTTP/1.x 的性能瓶颈提升网页加载速度和网络效率解决了队头阻塞HTTP/1.x 中一个请求阻塞后续请求高延迟减少多次 TCP 连接和握手开销以及头部冗余重复的头部字段占用带宽显著提升了 Web 性能HTTP/2 已成为现代互联网的主流协议被广泛使用。weiyigeek.top-作者个人网站启用HTTP/2.0图HTTP/2.0 协议的核心概念连接Connection单个 TCP 连接可以承载多个双向数据流Stream流Stream双向通讯的数据流每个页面可能对应一个Stream每个流可以包含多个消息消息Message每个消息包含1个或多个帧对应 HTTP/1.x 请求和响应帧Frame最小概念单元以二进制压缩格式存储 HTTP/1.x 内容包括 Headers 和 Dataweiyigeek.top-HTTP/2.0 协议的核心与分层图此文我们再详细的介绍一下 Frame 帧的格式如下图所示包含长度、类型、标识消息号(4字节32位)以及数据内容等。weiyigeek.top-HTTP/2.0 协议帧格式图HTTP/2 主要特性与改进[x] 二进制传输核心: 将文本格式HTTP/1.x改为二进制格式解析更快、更高效且减少错误。[x] 头部压缩核心: 使用 HPACK 算法压缩请求头减少冗余数据如 Cookie、User-Agent降低带宽消耗例如相似请求间仅传输变化部分大幅度减少重复头部信息的传输算法主要包含三个部分静态字典将常用的 header 字段整成字典,比如{method:GET}就可以用单个数字 2 来表示。动态字典没有在静态字典里面的一些头部字段则用动态字典。Huffman 编码压缩编码。weiyigeek.top-HTTP/2.0 头部压缩图[x] 多路复用核心: 允许在单个 TCP 连接上并行传输多个请求和响应即传输中无序接收时组装利用缓存解决了 HTTP/1.x 的队头阻塞问题大幅提升并发效率减少了我们的三次握手和四次握手的开关连接的一个过程工作效率也最高。weiyigeek.top-HTTP/2.0 多路复用图[x] 服务器资源推送: 服务器可以主动向客户端并行推送资源如 HTML、CSS、JS减少额外的请求延迟weiyigeek.top-HTTP/2.0 资源推送图[x] 自定义资源优先级允许客户端为请求分配优先级确保重要资源如 HTML优先传输例如在某些场景中CSS 可能对重要需要先给浏览器进行渲染。weiyigeek.top-HTTP/2.0 资源优先级图[x] 更安全的默认要求主流浏览器仅支持加密的 HTTP/2基于 TLS/1.2即必须SSL全站加密而非明文传输才能真正使用 HTTP/2。HTTP/2.0 与 HTTP/1.x 对比如下表格所示特性HTTP/1.0HTTP/1.1HTTP/2说明与影响协议格式文本协议文本协议二进制协议HTTP/2使用二进制帧传输解析效率更高错误率更低连接管理短连接默认持久连接默认单连接多路复用HTTP/2单个TCP连接可处理多个并行流减少连接开销并发请求每个请求需新连接多个TCP连接6-8个/域名单个连接内多路复用HTTP/2彻底解决队头阻塞无需域名分片等优化技巧头部传输不压缩不压缩HPACK头部压缩减少重复头部传输如Cookie、User-Agent节省带宽40-90%数据压缩可选如gzip可选如gzip可选如gzip主体压缩方式不变但HTTP/2有更好的整体压缩服务器推送不支持不支持支持主动推送服务器可预测客户端需求提前推送CSS/JS等资源请求优先级无无流优先级控制客户端可指定资源加载优先级如HTML优先于图片队头阻塞严重存在管道化很少用基本解决应用层HTTP/2仍受TCP队头阻塞影响但应用层已优化安全要求无无事实上的TLS要求主流浏览器只支持加密的HTTP/2h2非加密的h2c较少用握手开销高每次新连接中等持久连接低复用连接HTTP/2减少TCP和TLS握手次数提升加载速度协议协商无Upgrade机制ALPN扩展通过TLS的ALPN在握手时协商HTTP/2无需额外往返错误处理关闭连接关闭连接更精细的连接控制支持重置流RST_STREAM而不关闭整个连接流量控制基于TCP基于TCP基于流的流量控制为每个流单独控制流量更灵活的资源管理典型延迟高中等低多路复用和头部压缩显著减少页面加载时间头部大小限制无明确规定无明确规定更高效处理大头部使用索引表管理头部字段避免重复传输缓存策略基础支持增强ETag等同HTTP/1.1缓存机制继承HTTP/1.1无本质改变weiyigeek.top-http1.0VS2.0图另外HTTP/2 为 HTTP/3 奠定了基础HTTP/3 改用 QUIC 协议基于 UDP进一步解决 TCP 的队头阻塞和连接延迟问题。好了上面我们介简单绍了 HTTP/2.0 相关特性以及与 HTTP 1.x 协议的对比下面我们将在 Nginx 中搭建一个 HTTP/2.0 服务查看到 HTTP 2.0 的优势并演示其资源推送功能不过在此之前同样先简单的介绍在 Nginx 中 HTTP/2.0 相关指令配置。Nginx HTTP/2 模块指令在 Nginx 中要完全支持 HTTP/2.0 相关功能需在编译时启用--with-http_v2_module选项以安装ngx_http_v2_module模块其次必须开启 TLS/SSL 协议需申请并配置SSL证书如通过Lets Encrypt、自签证书ngx_http_v2_module 帮助文档地址 https://nginx.org/en/docs/http/ngx_http_v2_module.html# 构建脚本 Makefile ./configure --prefix/usr/local/nginx --usernginx --groupnginx --sbin-path/usr/sbin/nginx --conf-path/usr/local/nginx/conf/nginx.conf --pid-path/usr/local/nginx/nginx.pid --error-log-path/var/log/nginx/logs/error.log --http-log-path/var/log/nginx/logs/access.log --lock-path/var/run/nginx.lock --modules-path/usr/local/nginx/modules --with-http_stub_status_module --with-http_realip_module --with-http_ssl_module --with-http_slice_module --with-http_v2_module --with-cc-opt-O2 --with-compat # 编译安装 make -j$(nproc) make install指令模块http2指令用于启用 HTTP/2.0 支持默认情况下是关闭的。Syntax: http2 on | off; Default: http2 off; Context: http, server This directive appeared in version 1.25.1. # 基础示例 server { listen 443 ssl; # 开启 TLS/SSL 协议启用 HTTPS 服务。 http2 on; # 启用 HTTP/2.0 支持。 ssl_certificate server.crt; # 指定 SSL 证书文件路径。 ssl_certificate_key server.key; # 指定 SSL 私钥文件路径。 }资源推送指令用于配置服务器主动向客户端推送资源。http2_push 指令用于将请求与对原始请求的响应一起沿着发送推送到指定的 uri使用相对路径也可使用变量并且可在同一配置级别上指定多个 http2_push 指令但自版本1.25.1起已过时建议在头部字段中添加Link预加载提示。Syntax: http2_push uri | off; Default: http2_push off; Context: http, server, location # 示例 http2_push /static/css/main.css;http2_push_preload指令用于启用或禁用预加载推送默认情况下是关闭的启用后需在头部字段中添加Link预加载提示以便浏览器知道哪些资源将被推送同样自版本 1.25.1 起已过时。Syntax: http2_push_preload on | off; Default: http2_push_preload off; Context: http, server, location # 示例若响应头含 Link: /star.css; relpreload则star.css被推送。 http2_push_preload on;请求接并发与流控制指令用于配置 HTTP/2.0 连接并发和流控制相关参数。http2_max_concurrent_pushes指令用于限制连接中并发推送请求的最大数量自版本1.25.1起已过时。Syntax: http2_max_concurrent_pushes number; Default: http2_max_concurrent_pushes 10; Context: http, serverhttp2_max_concurrent_streams指令用于设置连接中并发HTTP/2流的最大数量自版本1.25.1起已过时。Syntax: http2_max_concurrent_pushes number; Default: http2_max_concurrent_pushes 10; Context: http, serverhttp2_max_requests指令用于设置一个HTTP/2连接可以处理的最大请求数包括推送请求超过此数量后下一个客户端请求将导致连接关闭并需要建立新的连接自版本1.25.1起已过时建议使用keepalive_requests指令代替。Syntax: http2_max_requests number; Default: http2_max_requests 1000; Context: http, serverhttp2_chunk_size指令用于设置响应正文切片的最大块大小, 过低的值会导致更高的开销, 过高的值会由于HOL阻塞而损害优先级。Syntax: http2_chunk_size size; Default: http2_chunk_size 8k; Context: http, server, location缓冲区大小设置指令用于配置 HTTP/2.0 连接缓冲区大小相关参数。http2_body_preread_size指令用于设置每个请求主体的缓冲区大小默认情况下是 16k。Syntax: http2_body_preread_size size; Default: http2_body_preread_size 64k; Context: http, serverhttp2_max_field_size指令用于限制经过HPACK压缩的请求标头字段的最大大小默认情况下是 4k。自版本1.19.7起已过时建议使用large_client_header_buffers指令。Syntax: http2_max_field_size size; Default: http2_max_field_size 4k; Context: http, serverhttp2_max_header_size指令用于限制HPACK解压缩后整个请求标头列表的最大大小。对于大多数请求默认限制应该足够了自版本1.19.7起已过时建议使用large_client_header_buffers指令。Syntax: http2_max_header_size size; Default: http2_max_header_size 16k; Context: http, serverhttp2_recv_buffer_size指令用于设置每个工作进程输入缓冲区的大小。Syntax: http2_recv_buffer_size size; Default: http2_recv_buffer_size 256k; Context: http超时控制指令用于配置 HTTP/2.0 连接超时相关参数。http2_idle_timeout指令用于空闲多少时间后关闭连接自版本1.19.7起已过时建议使用keepalive_timeout指令代替。Syntax: http2_idle_timeout time; Default: http2_idle_timeout 3m; Context: http, serverhttp2_recv_timeout指令用于设置接收超时时间自版本1.19.7起已过时应该使用client_header_timeout指令。Syntax: http2_recv_timeout time; Default: http2_recv_timeout 30s; Context: http, server另外该模块还提供了一个内置变量$http2可用于检测当前连接是否为 HTTP/2.0 连接其变量标识符值为“h2” for HTTP/2 over TLS,“h2c” for HTTP/2 over cleartext TCP, or an empty string otherwise.实践演示步骤 01.作者准备一些静态资源文件和自签证书【参考文章Nginx | 核心知识150讲之SSL证书签发与HTTPS加密传输学习实践笔记】以演示其 HTTP/2.0 资源推送功能。$ cd /usr/local/nginx/html $ tree . . ├── video.html ├── img │ └── bg.png ├── video │ └── 202403192224.mp4 ├── css │ └── style.css ├── js │ └── index.js └── index.html !-- 其中 index.html 首页内容如下 -- tee index.html EOF HTML HEAD meta charsetUTF-8 title测试HTTP2.0推送/title /HEAD BODY h1测试HTTP2.0推送/h2 BODY /HTML EOF !-- 其中创建一个视频播放页面如下所示 -- tee video.html EOF video idmyVideo classresponsive-video src/videos/202403192224.mp4 poster/img/bg.jpg preloadmetadata controls playsinline muted loop width1280 height720 crossoriginanonymous>步骤 02.配置 Nginx 启用 HTTP/2.0 支持并开启资源推送功能修改完毕后验证配置并重启 Nginx 服务。tee /usr/local/nginx/conf.d/server.conf EOF # 只在连接为 HTTP/2 且支持推送时执行推送 map $http2$push_allowed { default ; h2 1; } server { # 监听 443 端口启用 TLS/SSL 协议 listen 443 ssl; # 虚拟主机服务器名称 server_name server.weiyigeek.top; default_type text/html; # 启用 HTTP/2 支持 http2 on; # 日志文件 access_log /var/log/nginx/server.log main; error_log /var/log/nginx/server.err.log debug; # SSL 证书文件 ssl_certificate /usr/local/nginx/certs/server.crt; # ssl_certificate_key /usr/local/nginx/certs/server.key; # 加密的 SSL 证书密钥文件(根据需求选择) ssl_certificate_key /usr/local/nginx/certs/server_encrypted.key; ssl_password_file /usr/local/nginx/certs/ssl_password.txt; # 支持的 SSL/TLS 协议版本 ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; # 支持的 SSL/TLS 加密套件 ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE:ECDH:AES:HIGH:EECDHCHACHA20:EECDHCHACHA20-draft:EECDHAES128:RSAAES128:EECDHAES256:RSAAES256:EECDH3DES:RSA3DES:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:!NULL:!aNULL:!eNULL:!EXPORT:!PSK:!ADH:!DH:!DES:!MD5:!RC4; # SSL 会话缓存 ssl_session_cache shared:SSL:10m; # SSL 会话超时时间 ssl_session_timeout 10m; # 优先使用服务器端支持的加密套件 ssl_prefer_server_ciphers on; # 强制使用 HTTPS 访问 add_header Strict-Transport-Security max-age31536000;includeSubDomains;preload always; # 根目录设置 root /usr/local/nginx/html; # 缺省文件索引页设置即访问根目录时默认打开的文件名 index index.html; # 使用 Link 指定推送多个资源 location / { # 推送 css 和 js 文件作为预加载资源 add_header Link /css/style.css; asstyle; relpreload, /js/index.js; asscript; relpreload always; # 缓存控制 expires 1h; add_header Cache-Control public, no-cache; } # 仅当连接为 HTTP/2 且支持推送时才执行推送 location /video.html { if ($push_allowed) { # 推送 MP4 视频文件 add_header Link /css/style.css; asstyle; relpreload, /videos/202403192224.mp4; asvideo; typevideo/mp4; relpreload always; # 可选推送视频封面图 add_header Link /img/bg.png; asimage; relpreload always; # 缓存控制 expires 1h; add_header Cache-Control public, no-cache; } } # 特别注意使用 http2_push、http2_push_preload 指令推送资源已失效Nginx 1.25.1 及以后已不支持这种方式。 location /old { http2_push /css/style.css; http2_push /res/202403192224.mp4; } } EOF # 验证重载 nginx -t nginx -s reload nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful nginx: [warn] the http2_push directive is obsolete, ignored in /usr/local/nginx/conf.d/server.conf:77 nginx: [warn] the http2_push directive is obsolete, ignored in /usr/local/nginx/conf.d/server.conf:78温馨提示Nginx 1.25.1 及以后版本已废弃 http2_push、http2_push_preload 等指令不再支持资源推送功能在配置文件中使用这些指令将会被忽略一定要使用 add_header Link 方式来实现资源推送。步骤 03.为了防止各位看友旧版本的 curl 工具不支持 HTTP/2.0 协议所以这里我们使用nghttp命令行工具来测试 Nginx HTTP/2.0 协议可通过 Github 或者通过包管理器安装官网地址https://nghttp2.org/# 方式1.通过 Github 下载版本进行编译安装 # Ubuntu/Debian sudo apt-get install g make binutils autoconf automake \ autotools-dev libtool pkg-config zlib1g-dev libcunit1-dev \ libssl-dev libxml2-dev libev-dev libevent-dev libjansson-dev \ libc-ares-dev libjemalloc-dev libsystemd-dev cython python3-dev # CentOS/RHEL sudo yum install gcc gcc-c make cmake automake autoconf libtool \ pkgconfig zlib-devel openssl-devel libxml2-devel libev-devel \ jansson-devel c-ares-devel python3-devel python3-pip # 下载源码 wget https://github.com/nghttp2/nghttp2/releases/download/v1.68.0/nghttp2-1.68.0.tar.xz # 解压 xz -k -d nghttp2-1.68.0.tar.xz tar -xvf nghttp2-1.68.0.tar # 构建 ./configure --enable-app # 编译 make -j$(nproc) # 检查产物 ls src/.libs/ # 有时临时文件在这里 deflatehd h2load inflatehd nghttp nghttpd nghttpx # 主要工具包括 # nghttp - HTTP/2 客户端 # nghttpd - HTTP/2 服务器 # h2load - 负载测试工具 # nghttpx - 代理服务器 # 安装 sudo make install # 更新动态链接库缓存 sudo ldconfig /usr/local/lib # 方式2.通过包管理器安装(版本可能过旧) # redhat 系 yum install nghttp2 # debian 系 apt install nghttp2weiyigeek.top-nghttp2测速工具图步骤 04.使用 nghttp 命令行工具测试 Nginx HTTP/2.0 支持情况# 访问主页路径 /usr/local/bin/nghttp -ans https://nghttp2.org ***** Statistics ***** Request timing: responseEnd: the time when last byte of response was received relative to connectEnd requestStart: the time just before first byte of request was sent relative to connectEnd. If * is shown, this was pushed by server. process: responseEnd - requestStart code: HTTP status code size: number of bytes received as response body without inflation. URI: request URI see http://www.w3.org/TR/resource-timing/#processing-model sorted by complete id responseEnd requestStart process code size request path 1 731.81ms 73us 731.74ms 200 6K / 3 1.27s 732.00ms 537.07ms 200 6K /javascripts/modernizr-2.0.js 5 1.34s 732.01ms 612.92ms 200 8K /javascripts/octopress.js 2 1.34s * 246.02ms 1.10s 200 38K /stylesheets/screen.css # 访问 / 路径 /usr/local/bin/nghttp -anv --no-verify https://server.weiyigeek.top/ # 访问 /video.html 路径 /usr/local/bin/nghttp -anv --no-verify https://server.weiyigeek.top/video.htmlweiyigeek.top-使用 nghttp 命令行工具验证图但经过作者测试在访问验证 HTTP/2.0 自动推送时建议通过主流的浏览器Firefox、Google、Edge进行访问 /video.html 路径时可以更加直观的看到资源推送的效果。weiyigeek.top-使用主流浏览器验证HTTP2.0推送图温馨提示: 若 curl 版本够新支持--http2参数也是可以进行检查 ALPN 协商例如$ curl -V curl 8.4.0 # 查看详细的 HTTP/2 信息 curl -i --http2 https://server.weiyigeek.top/video.html -k HTTP/2 200 server: nginx/1.29.0 date: Sat, 10 Jan 2026 15:20:55 GMT content-type: text/html content-length: 931 last-modified: Sat, 10 Jan 2026 04:51:37 GMT etag: 6961dad9-3a3 expires: Sat, 10 Jan 2026 16:20:55 GMT cache-control: max-age3600 link: /css/style.css; asstyle; relpreload, /videos/202403192224.mp4; asvideo; typevideo/mp4; relpreload link: /img/bg.png; asimage; relpreload cache-control: public, no-cache accept-ranges: bytes步骤 05.查看 Nginx 访问日志可以看到资源推送的效果由下图可知即使 index.html 中未引入 css / js 文件也将主动推送另外在 video.html 文件中未引入 css 以及 png 文件也是一并推送的。weiyigeek.top-利用Nginx 访问日志查看HTTP2.0消息推送图至此本文详细介绍了 HTTP/2.0 协议和 Nginx 中 ngx_http_v2_module 模块指令参数以及如何开启 HTTP/2.0 支持并演示了其资源推送功能。END加入作者【全栈工程师修炼指南】知识星球『 全栈工程师修炼指南』星球主要涉及全栈工程师Full Stack Development实践文章持续更新包括但不限于企业SecDevOps和网络安全等保合规、安全渗透测试、编程开发、云原生Cloud Native、物联网工业控制IOT、人工智能Ai从业书籍笔记人生职场认识等方面资料或文章。Q: 加入作者【全栈工程师修炼指南】星球后有啥好处✅ 将获得作者最新工作学习实践文章以及网盘资源。✅ 将获得作者珍藏多年的全栈学习笔记(需连续两年及以上老星球友也可单次购买)✅ 将获得作者专门答疑学习交流群解决在工作学习中的问题。✅ 将获得作者远程支持在作者能力范围内且合规。获取作者工作学习全栈笔记作者整理了10年的工作学习笔记涉及网络、安全、运维、开发需要学习实践笔记的看友可添加作者微信或者回复【工作学习实践笔记】当前价格299除了获得从业笔记的同时还可进行问题答疑以及每月远程技术支持希望大家多多支持收获定大于付出知识推荐往期文章【最新】免费领5年企业查询VIP效果对标天眼查会员【最新】5大互联网慈善机构各种白嫖你用过几个【最新】Nginx | slice 模块实现上游大文件“化整为零”缓存【最新】中国移动所有省份套餐都在这官方公示页面【相关】Nginx | 核心知识150讲百万并发下性能优化之其它HTTP框架下反向代理场景【相关】Nginx | 核心知识150讲百万并发下性能优化之前端静态缓存、后端动态缓存实践笔记【相关】Nginx | 核心知识150讲百万并发下性能优化之SSL证书签发与HTTPS加密传输实践笔记【相关】Nginx | open_file_cache 功能实现解决频繁 open/close 的性能顽疾若文章对你有帮助请将它转发给更多的看友若有疑问的小伙伴可在评论区留言你想法哟