deploy: 4038692e4b425756edcb51cf7973793e280812ae

1 files changed, 266 insertions, 0 deletions

diff --git a/2026/03/16/Nginx-前后端同域分流/index.html b/2026/03/16/Nginx-前后端同域分流/index.html
new file mode 100644
index 00000000..8b63c3c4
--- /dev/null
+++ b/2026/03/16/Nginx-前后端同域分流/index.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <meta name="author" content="韩暮秋">
+    
+        
+            <meta name="subtitle" content="暮秋小屋">
+            
+                
+                    <meta name="description" content="这里是暮秋小屋，思念和灵感的寄存处">
+                    
+                        
+                            <meta name="keywords" content="韩暮秋,MuqiuHan,'Muqiu Han', 'muqiu han', muqiuhan">
+                            
+
+                                
+
+                                    <title>
+                                        
+                                            Nginx 前后端同域分流 | 
+                                                    暮秋小屋
+                                    </title>
+
+                                    
+                                        
+                                            <link rel="icon" href="/favicon.ico">
+                                            
+
+                                                        
+                                                            
+                                                                <!-- stylesheets list from _config.yml -->
+                                                                
+                                                                    <link rel="stylesheet" href="/css/style.css">
+                                                                    
+                                                                        
+
+                                                                            
+                                                                                <link rel="preload" href="/fonts/latin-base.woff2" as="font" type="font/woff2" crossorigin>
+                                                                                <link rel="preload" href="/fonts/cjk-common.woff2" as="font" type="font/woff2" crossorigin>
+
+                                                                    
+                                                                        
+                                                                            <!-- scripts list from _config.yml -->
+                                                                            
+                                                                                <script
+                                                                                    src="/js/menu.js"></script>
+                                                                                
+                                                                                    
+
+                                                                                        
+                                                                                            
+                                                                                                <script
+                                                                                                    src="https://polyfill.alicdn.com/polyfill.js?features=es6"></script>
+                                                                                                <script
+                                                                                                    id="MathJax-script"
+                                                                                                    async
+                                                                                                    src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjax/3.2.0/es5/tex-mml-chtml.js"></script>
+                                                                                                
+
+                                                                                                    
+                                                                                                        
+  <meta name="generator" content="Hexo 6.3.0"></head>
+  <body>
+    <div class="wrapper">
+
+      <div class="header">
+  <div class="flex-container">
+    <div class="header-inner">
+      <div class="site-brand-container">
+        <a href="/">
+          
+              暮秋小屋
+                
+        </a>
+      </div>
+      <div id="menu-btn" class="menu-btn" onclick="toggleMenu()">
+        菜单
+      </div>
+      <nav class="site-nav">
+        <ul class="menu-list">
+          
+            
+                <li class="menu-item">
+                  <a href="/">
+                    主页
+                  </a>
+                </li>
+                
+                  
+            
+                <li class="menu-item">
+                  <a href="/categories/gallery/">
+                    日记本
+                  </a>
+                </li>
+                
+                  
+            
+                <li class="menu-item">
+                  <a href="/tags/Medicine/">
+                    泛医学
+                  </a>
+                </li>
+                
+                  
+            
+                <li class="menu-item">
+                  <a href="/tags/Technique/">
+                    计算机
+                  </a>
+                </li>
+                
+                  
+            
+                <li class="menu-item">
+                  <a href="/tags/Life/">
+                    生活
+                  </a>
+                </li>
+                
+                  
+            
+                <li class="menu-item">
+                  <a href="/archives">
+                    全部
+                  </a>
+                </li>
+                
+                  
+            
+                <li class="menu-item">
+                  <a href="/about">
+                    关于
+                  </a>
+                </li>
+                
+                  
+                    
+                      <li class="menu-item">
+                        <a href="/search">搜索</a>
+                      </li>
+                      
+        </ul>
+      </nav>
+    </div>
+  </div>
+</div>
+
+
+      <div class="main">
+        <div class="flex-container">
+          <article id="post">
+
+  
+    <div class="post-head">
+    <div class="post-info">
+        <div class="tag-list">
+            
+                
+                    <span class="post-tag">
+                        <a href="/tags/Technique/">
+                            Technique
+                        </a>
+                    </span>    
+                           
+            
+        </div>
+        <div class="post-title">
+            
+            
+                Nginx 前后端同域分流
+            
+            
+        </div>
+        <span class="post-date">
+            Mar 16, 2026
+        </span>
+    </div>
+    <div class="post-img">
+        
+            <div class="h-line-primary"></div>
+              
+    </div>
+</div>
+    <div class="post-content">
+    <p>今天我想在服务器上的 docker nginx 中配置：同一主域下，前端走 <code>/</code>，后端 API 走 <code>/api/*</code>，认证框架 Better Auth 走 <code>/api/auth/*</code>。后端还有自己的 <code>/auth/*</code> 业务接口。</p>
+<p>例如 xxx.yyy.zzz 是前端，xxx.yyy.zzz/api 是后端，后端基于 NestJS 用了 better-auth 会自动挂 /auth 路径。</p>
+<p>Nginx 跑在 Docker 容器里，配置和证书从宿主机挂载进去：</p>
+<ul>
+<li><code>/opt/nginx/conf.d</code> → <code>/etc/nginx/conf.d</code></li>
+<li><code>/opt/nginx/ssl</code> → <code>/etc/nginx/ssl</code></li>
+<li><code>/opt/nginx/nginx.conf</code> → <code>/etc/nginx/nginx.conf</code></li>
+</ul>
+<p>容器通过 <code>extra_hosts: host.docker.internal:host-gateway</code> 访问宿主机服务，所以前后端进程可以继续跑在宿主机上（比如 PM2 管理），Nginx 容器只做反代。</p>
+<p>遇到的第一个坑：<code>/api/auth/*</code> 和 <code>/api/*</code> 不能用同一个 rewrite 规则。</p>
+<p>如果这么写：</p>
+<figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> /api/ &#123;</span><br><span class="line">  <span class="attribute">proxy_pass</span> http://host.docker.internal:&lt;backend&gt;/;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>Nginx 会把 <code>/api</code> 前缀裁掉。于是 <code>/api/auth/sign-in/email</code> 变成了 <code>/auth/sign-in/email</code>，但 better-auth 挂在 <code>/api/auth/*</code>，直接 404。</p>
+<p>正确的做法是分开处理。更麻烦的是业务身份接口 <code>/auth/me</code> 也存在，如果后端业务接口是 <code>/auth/me</code>，而认证框架是 <code>/api/auth/*</code>，那 <code>/api/auth/me</code> 应该转发给业务而不是认证框架。</p>
+<p>正确顺序：</p>
+<figure class="highlight nginx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="section">location</span> = /api/auth/me &#123;</span><br><span class="line">  <span class="comment"># 精确匹配，业务身份接口</span></span><br><span class="line">  <span class="attribute">rewrite</span><span class="regexp"> ^/api(.*)$</span> <span class="variable">$1</span> <span class="literal">break</span>;</span><br><span class="line">  <span class="attribute">proxy_pass</span> http://host.docker.internal:&lt;backend&gt;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">location</span><span class="regexp"> ^~</span> /api/auth/ &#123;</span><br><span class="line">  <span class="comment"># 认证框架路由，保留前缀</span></span><br><span class="line">  <span class="attribute">proxy_pass</span> http://host.docker.internal:&lt;auth-port&gt;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">location</span><span class="regexp"> ^~</span> /api/ &#123;</span><br><span class="line">  <span class="comment"># 其余 API，裁掉 /api</span></span><br><span class="line">  <span class="attribute">rewrite</span><span class="regexp"> ^/api(.*)$</span> <span class="variable">$1</span> <span class="literal">break</span>;</span><br><span class="line">  <span class="attribute">proxy_pass</span> http://host.docker.internal:&lt;backend&gt;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="section">location</span> / &#123;</span><br><span class="line">  <span class="comment"># 前端</span></span><br><span class="line">  <span class="attribute">proxy_pass</span> http://host.docker.internal:&lt;frontend&gt;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
+<p>这里的顺序很重要。Nginx 匹配规则是：精确匹配 <code>=</code> 优先，然后是前缀匹配 <code>^~</code>，然后是正则匹配，最后是普通前缀匹配。<code>^~</code> 表示一旦匹配成功就不再检查正则。</p>
+
+</div> 
+
+<script>
+    window.onload = detectors();
+</script>
+    <div class="post-footer">
+    <div class="h-line-primary"></div>
+    <nav class="post-nav">
+        <div class="prev-item">
+           
+        </div>
+        <div class="next-item">
+            
+                <div class="icon arrow-right"></div>
+                <div class="post-link">
+                  <a href="/2026/03/12/%E7%AE%80%E5%8D%95%E8%AF%B4%E8%AF%B4-FHIR-Transaction-Bundle/">Next</a>  
+                </div>  
+            
+        </div>
+    </nav>
+</div>
+
+    
+      <div class="post-comment">
+
+     
+
+     
+    
+    
+
+</div>
+     
+  
+</article>
+        </div>
+      </div>
+      
+      <div class="footer">
+    <div class="flex-container">
+        <div class="footer-text">
+            
+                        
+                            韩暮秋 |
+                                
+                                    
+                                        希望路过的人可以添点柴火让这里暖和点
+                                        
+        </div>
+    </div>
+</div>
+
+
+    </div>
+    
+    <script src="/js/mermaid-zoom.js"></script>
+
+  </body>
+</html>