<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Web on 三巧小站</title><link>https://3qiao.vip/tags/web/</link><description>Recent content in Web on 三巧小站</description><generator>Hugo</generator><language>zh-CN</language><lastBuildDate>Tue, 12 Sep 2023 00:00:00 +0000</lastBuildDate><atom:link href="https://3qiao.vip/tags/web/index.xml" rel="self" type="application/rss+xml"/><item><title>用 Nginx 为静态站点加上缓存与安全响应头</title><link>https://3qiao.vip/posts/2023-nginx-static-cache/</link><pubDate>Tue, 12 Sep 2023 00:00:00 +0000</pubDate><guid>https://3qiao.vip/posts/2023-nginx-static-cache/</guid><description>从响应头和缓存策略入手，让一个静态站点更快、更稳。</description><content:encoded><![CDATA[<p>静态站点已经很快，但默认配置通常只完成了“能访问”。2023 年我给一个个人页面做优化时，没有引入额外的缓存服务，而是先把 Nginx 的基础能力用好。</p>
<h2 id="给不同类型的文件不同缓存时间">给不同类型的文件不同缓存时间</h2>
<p>带哈希文件名的 CSS、JavaScript 和图片可以长时间缓存；HTML 则应该短一些，方便发布后及时生效。下面是一段适合静态站点的配置：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-nginx" data-lang="nginx"><span class="line"><span class="cl"><span class="k">location</span> <span class="p">~</span><span class="sr">*</span> <span class="s">\\.(css|js|png|jpg|jpeg|gif|svg|webp|woff2)</span>$ <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kn">expires</span> <span class="s">30d</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kn">add_header</span> <span class="s">Cache-Control</span> <span class="s">&#34;public,</span> <span class="s">max-age=2592000,</span> <span class="s">immutable&#34;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">location</span> <span class="s">/</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kn">try_files</span> <span class="nv">$uri</span> <span class="nv">$uri/</span> <span class="s">/404.html</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kn">add_header</span> <span class="s">X-Content-Type-Options</span> <span class="s">&#34;nosniff&#34;</span> <span class="s">always</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kn">add_header</span> <span class="s">Referrer-Policy</span> <span class="s">&#34;strict-origin-when-cross-origin&#34;</span> <span class="s">always</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p><code>immutable</code> 只适合文件内容一旦变化就会改名的资源。如果站点仍然使用固定的 <code>main.css</code>，缓存时间就不应设置得过长，否则更新样式后用户可能要手动刷新。</p>
<h2 id="压缩要适度">压缩要适度</h2>
<p>HTML、CSS、JavaScript 和 SVG 都适合启用 gzip。图片压缩则应该在构建阶段完成，不能指望 Nginx 在每次请求时临时处理大图片。对个人博客来说，少量清晰的图片比堆叠复杂的优化插件更容易维护。</p>
<h2 id="用响应头建立最低限度的安全边界">用响应头建立最低限度的安全边界</h2>
<p><code>X-Content-Type-Options</code> 可以避免浏览器猜测文件类型，<code>Referrer-Policy</code> 则减少从站点跳转时泄露完整路径。它们不能替代应用安全检查，却能以很低的成本补上基础防线。</p>
<p>配置变更后先检查语法，再平滑加载：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">nginx -t
</span></span><span class="line"><span class="cl">nginx -s reload
</span></span></code></pre></div><p>优化静态站点时，我通常先看真实请求的响应头和缓存命中情况，再决定是否需要更复杂的 CDN 或服务端缓存。简单的站点，简单的链路往往更稳定。</p>
]]></content:encoded></item></channel></rss>