<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Levin&#039;s Blog-林壽山的c# .net奇幻旅程</title>
	<atom:link href="https://superlevin.ifengyuan.tw/feed/" rel="self" type="application/rss+xml" />
	<link>https://superlevin.ifengyuan.tw</link>
	<description>大型網站架構．.net 架構師．rabbitMQ．redis．行動開發．APP開發教學．PHP Laravel開發．.net core C# 開發．架構師之路．Delphi開發．資料庫程式．進銷存．餐飲POS系統</description>
	<lastBuildDate>Mon, 03 Aug 2026 10:25:17 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>
	<item>
		<title>讓 AI 不只會聊天：透過 CLI 擴充 AI 的實際工作能力</title>
		<link>https://superlevin.ifengyuan.tw/%e8%ae%93-ai-%e4%b8%8d%e5%8f%aa%e6%9c%83%e8%81%8a%e5%a4%a9%ef%bc%9a%e9%80%8f%e9%81%8e-cli-%e6%93%b4%e5%85%85-ai-%e7%9a%84%e5%af%a6%e9%9a%9b%e5%b7%a5%e4%bd%9c%e8%83%bd%e5%8a%9b/</link>
					<comments>https://superlevin.ifengyuan.tw/%e8%ae%93-ai-%e4%b8%8d%e5%8f%aa%e6%9c%83%e8%81%8a%e5%a4%a9%ef%bc%9a%e9%80%8f%e9%81%8e-cli-%e6%93%b4%e5%85%85-ai-%e7%9a%84%e5%af%a6%e9%9a%9b%e5%b7%a5%e4%bd%9c%e8%83%bd%e5%8a%9b/#respond</comments>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Mon, 03 Aug 2026 10:25:17 +0000</pubDate>
				<category><![CDATA[AI人工智慧]]></category>
		<category><![CDATA[ai]]></category>
		<category><![CDATA[CLI]]></category>
		<category><![CDATA[markdown]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4222</guid>

					<description><![CDATA[生成式 AI 很擅長回答問題、產生程式碼、規劃系統架構與整理技術文件。 但若 AI 只能停留在聊天視窗中，它多 &#8230; <a href="https://superlevin.ifengyuan.tw/%e8%ae%93-ai-%e4%b8%8d%e5%8f%aa%e6%9c%83%e8%81%8a%e5%a4%a9%ef%bc%9a%e9%80%8f%e9%81%8e-cli-%e6%93%b4%e5%85%85-ai-%e7%9a%84%e5%af%a6%e9%9a%9b%e5%b7%a5%e4%bd%9c%e8%83%bd%e5%8a%9b/" class="more-link">閱讀全文<span class="screen-reader-text">〈讓 AI 不只會聊天：透過 CLI 擴充 AI 的實際工作能力〉</span></a>]]></description>
										<content:encoded><![CDATA[<p>生成式 AI 很擅長回答問題、產生程式碼、規劃系統架構與整理技術文件。</p>
<p>但若 AI 只能停留在聊天視窗中，它多半只能告訴你：</p>
<ul>
<li>指令應該怎麼下</li>
<li>程式應該怎麼寫</li>
<li>系統應該怎麼部署</li>
<li>錯誤可能發生在哪裡</li>
</ul>
<p>真正要讓 AI 參與開發、測試、部署與維運，就需要搭配 CLI 工具。</p>
<p>CLI 是 <strong>Command-Line Interface，命令列介面</strong>。透過終端機、PowerShell、Git、Docker、Python、Node.js，以及各種雲端 CLI，AI 才能把「建議」轉換為「可執行的工作流程」。</p>
<p>簡單來說：</p>
<blockquote><p>聊天介面讓 AI 提供答案，CLI 則讓 AI 有機會把答案轉換成實際操作。</p></blockquote>
<p>當開發環境準備完成後，AI 可以協助：</p>
<ul>
<li>建立專案</li>
<li>建立資料夾與程式檔案</li>
<li>安裝開發套件</li>
<li>執行程式</li>
<li>執行測試</li>
<li>分析錯誤</li>
<li>修改程式</li>
<li>操作 Git</li>
<li>建立 Docker 容器</li>
<li>部署雲端服務</li>
<li>操作 Firebase</li>
<li>查詢資料庫</li>
<li>建立 CI/CD</li>
<li>撰寫 PowerShell 自動化腳本</li>
<li>分析系統 Log</li>
<li>重複執行、修正與驗證</li>
</ul>
<p>這也是 AI Coding Agent、AI CLI、Vibe Coding 與 Agentic Development 的核心基礎。</p>
<hr />
<h1 id="-cli-">一、什麼是 CLI？</h1>
<p>CLI 是透過文字指令操作電腦、開發工具與雲端平台的介面。</p>
<p>例如，使用 Git 下載專案：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">clone</span> <span class="hljs-title">https</span>://github.com/example/project.git
</code></pre>
<p>使用 Docker 啟動服務：</p>
<pre><code class="lang-powershell">docker compose up <span class="hljs-_">-d</span>
</code></pre>
<p>登入 Azure：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">az login</span>
</code></pre>
<p>部署 Google Cloud Run：</p>
<pre><code class="lang-powershell">gcloud <span class="hljs-keyword">run</span><span class="bash"> deploy</span>
</code></pre>
<p>當 AI 開發工具具備 CLI 操作能力後，通常可以依照以下流程工作：</p>
<ol>
<li>理解使用者需求。</li>
<li>檢查本機開發環境。</li>
<li>建立專案與資料夾。</li>
<li>安裝必要套件。</li>
<li>產生程式碼與設定檔。</li>
<li>執行建置。</li>
<li>執行測試。</li>
<li>分析錯誤訊息。</li>
<li>修改程式。</li>
<li>再次執行與驗證。</li>
<li>建立 Git Commit。</li>
<li>部署到測試或雲端環境。</li>
</ol>
<p>因此，CLI 不只是工程師輸入指令的工具，也是 AI 與作業系統、開發工具及雲端平台之間的重要橋梁。</p>
<hr />
<h1 id="-windows-">二、Windows 本機建議安裝的基礎工具</h1>
<p>若要在 Windows 電腦上使用 AI 搭配 CLI，建議先安裝以下工具。</p>
<hr />
<h2 id="1-windows-terminal">1. Windows Terminal</h2>
<p>Windows Terminal 是 Windows 上的現代化終端機工具。</p>
<p>官方安裝說明：</p>
<p><a href="https://learn.microsoft.com/zh-tw/windows/terminal/install">https://learn.microsoft.com/zh-tw/windows/terminal/install</a></p>
<p>Windows Terminal 可以同時操作：</p>
<ul>
<li>PowerShell</li>
<li>Command Prompt</li>
<li>WSL</li>
<li>SSH</li>
<li>Azure Cloud Shell</li>
<li>各種 CLI 工具</li>
</ul>
<p>Windows Terminal 可視為整個 CLI 開發環境的主要入口。</p>
<p>安裝完成後，可以從開始功能表開啟 Windows Terminal，並在不同分頁中分別執行：</p>
<ul>
<li>PowerShell</li>
<li>Git</li>
<li>Docker</li>
<li>Node.js</li>
<li>Python</li>
<li>Azure CLI</li>
<li>Google Cloud CLI</li>
</ul>
<hr />
<h2 id="2-powershell-7">2. PowerShell 7</h2>
<p>PowerShell 是 Windows 上非常重要的命令列與自動化腳本工具。</p>
<p>官方安裝說明：</p>
<p><a href="https://learn.microsoft.com/zh-tw/powershell/scripting/install/install-powershell-on-windows?view=powershell-7.6">https://learn.microsoft.com/zh-tw/powershell/scripting/install/install-powershell-on-windows?view=powershell-7.6</a></p>
<p>PowerShell 可以用來：</p>
<ul>
<li>管理檔案與資料夾</li>
<li>安裝軟體</li>
<li>呼叫 REST API</li>
<li>控制 Windows Service</li>
<li>控制 IIS</li>
<li>建立部署腳本</li>
<li>建立備份腳本</li>
<li>建立排程工作</li>
<li>檢查網站健康狀態</li>
<li>分析 Log</li>
<li>操作 Git</li>
<li>操作 Docker</li>
<li>操作雲端 CLI</li>
<li>建立 CI/CD 腳本</li>
</ul>
<p>確認 PowerShell 版本：</p>
<pre><code class="lang-powershell">pwsh <span class="hljs-comment">--version</span>
</code></pre>
<p>啟動 PowerShell 7：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">pwsh</span>
</code></pre>
<p>PowerShell 特別適合以下環境：</p>
<ul>
<li>Windows Server</li>
<li>IIS</li>
<li>.NET</li>
<li>SQL Server</li>
<li>Active Directory</li>
<li>企業內部系統</li>
<li>自動部署</li>
<li>自動更新</li>
<li>系統維運</li>
</ul>
<p>例如，AI 可以協助建立一支 PowerShell 腳本，自動完成：</p>
<ol>
<li>下載 GitHub 最新 Release。</li>
<li>解壓縮檔案。</li>
<li>停止 IIS。</li>
<li>備份現有網站。</li>
<li>保留 <code>appsettings.json</code>。</li>
<li>更新程式。</li>
<li>啟動 IIS。</li>
<li>驗證網站狀態。</li>
<li>失敗時自動還原。</li>
</ol>
<hr />
<h2 id="3-git">3. Git</h2>
<p>Git 是目前最重要的分散式版本控制工具之一。</p>
<p>官方網站：</p>
<p><a href="https://git-scm.com/">https://git-scm.com/</a></p>
<p>Windows 使用者通常可以從 Git 官方網站下載 <strong>Git for Windows</strong>。</p>
<p>Git 可以用來管理：</p>
<ul>
<li>程式碼版本</li>
<li>修改紀錄</li>
<li>分支</li>
<li>Commit</li>
<li>Tag</li>
<li>Merge</li>
<li>衝突處理</li>
<li>程式碼還原</li>
<li>遠端 Repository</li>
<li>團隊協作</li>
<li>CI/CD 觸發</li>
<li>Release 版本</li>
</ul>
<p>確認 Git 是否安裝完成：</p>
<pre><code class="lang-powershell">git <span class="hljs-comment">--version</span>
</code></pre>
<p>查看目前 Git 設定：</p>
<pre><code class="lang-powershell">git config <span class="hljs-comment">--list</span>
</code></pre>
<p>設定使用者名稱：</p>
<pre><code class="lang-powershell">git config --global user<span class="hljs-selector-class">.name</span> <span class="hljs-string">"Your Name"</span>
</code></pre>
<p>設定電子郵件：</p>
<pre><code class="lang-powershell"><span class="hljs-selector-tag">git</span> <span class="hljs-selector-tag">config</span> <span class="hljs-selector-tag">--global</span> <span class="hljs-selector-tag">user</span><span class="hljs-selector-class">.email</span> "<span class="hljs-selector-tag">you</span>@<span class="hljs-keyword">example</span>.<span class="hljs-keyword">com</span>"
</code></pre>
<p>查看設定結果：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">config</span> --<span class="hljs-keyword">global</span> user<span class="hljs-variable">.name</span>
git <span class="hljs-keyword">config</span> --<span class="hljs-keyword">global</span> user<span class="hljs-variable">.email</span>
</code></pre>
<hr />
<h2 id="git-">Git 的基本工作流程</h2>
<p>Git 最常見的操作流程如下：</p>
<pre><code class="lang-text">工作目錄
→ 暫存區
→ 本機 Repository
→ 遠端 Repository
</code></pre>
<p>查看目前修改狀態：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git status</span>
</code></pre>
<p>將修改加入暫存區：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">add</span><span class="bash"> .</span>
</code></pre>
<p>建立 Commit：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git</span> commit -m <span class="hljs-string">"feat: add login feature"</span>
</code></pre>
<p>推送到遠端：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">push</span>
</code></pre>
<hr />
<h2 id="-git-repository">建立新的 Git Repository</h2>
<p>在目前資料夾初始化 Git：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git init</span>
</code></pre>
<p>加入所有檔案：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">add</span><span class="bash"> .</span>
</code></pre>
<p>建立第一個 Commit：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git</span> commit -m <span class="hljs-string">"Initial commit"</span>
</code></pre>
<p>設定遠端 Repository：</p>
<pre><code class="lang-powershell">git remote <span class="hljs-built_in">add</span> origin http<span class="hljs-variable">s:</span>//github.<span class="hljs-keyword">com</span>/owner/repository.git
</code></pre>
<p>推送至遠端：</p>
<pre><code class="lang-powershell"><span class="hljs-symbol">git</span> <span class="hljs-keyword">branch </span>-M main
<span class="hljs-symbol">git</span> <span class="hljs-keyword">push </span>-u origin main
</code></pre>
<hr />
<h2 id="-">下載既有專案</h2>
<p>Clone Git Repository：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">clone</span> <span class="hljs-title">https</span>://github.com/owner/repository.git
</code></pre>
<p>進入專案：</p>
<pre><code class="lang-powershell"><span class="hljs-built_in">cd</span> repository
</code></pre>
<p>查看目前分支：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git branch</span>
</code></pre>
<p>取得最新版本：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git pull</span>
</code></pre>
<hr />
<h2 id="-">建立功能分支</h2>
<p>建立並切換到新分支：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">switch</span> -c feature/<span class="hljs-keyword">add</span>-login
</code></pre>
<p>較舊的寫法：</p>
<pre><code class="lang-powershell">git checkout -b feature/<span class="hljs-keyword">add</span><span class="bash">-login</span>
</code></pre>
<p>完成修改後：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">add</span><span class="bash"> .
</span>git commit -m <span class="hljs-string">"feat: add login feature"</span>
git push -u origin feature/<span class="hljs-keyword">add</span><span class="bash">-login</span>
</code></pre>
<hr />
<h2 id="-git-">常見 Git 指令</h2>
<p>查看 Commit 紀錄：</p>
<pre><code class="lang-powershell">git <span class="hljs-built_in">log</span>
</code></pre>
<p>以精簡格式查看：</p>
<pre><code class="lang-powershell">git <span class="hljs-built_in">log</span> <span class="hljs-comment">--oneline</span>
</code></pre>
<p>查看程式修改內容：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git diff</span>
</code></pre>
<p>查看已暫存的修改：</p>
<pre><code class="lang-powershell">git diff <span class="hljs-comment">--staged</span>
</code></pre>
<p>查看遠端 Repository：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git remote -v</span>
</code></pre>
<p>切換分支：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">switch</span> main
</code></pre>
<p>合併分支：</p>
<pre><code class="lang-powershell">git merge feature/<span class="hljs-keyword">add</span><span class="bash">-login</span>
</code></pre>
<p>建立標籤：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">tag</span> <span class="hljs-title">v1</span>.<span class="hljs-number">0.0</span>
</code></pre>
<p>推送標籤：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">push</span> origin v1<span class="hljs-meta">.0</span><span class="hljs-meta">.0</span>
</code></pre>
<hr />
<h2 id="git-ai-">Git 在 AI 開發中的重要性</h2>
<p>AI 可以快速修改大量程式碼，但修改範圍越大，風險也越高。</p>
<p>因此，在讓 AI 操作專案前，建議先建立 Git Commit：</p>
<pre><code class="lang-powershell">git status
git <span class="hljs-keyword">add</span><span class="bash"> .
</span>git commit -m <span class="hljs-string">"chore: backup before AI changes"</span>
</code></pre>
<p>AI 修改完成後，可以透過以下指令檢查差異：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">git diff</span>
</code></pre>
<p>若修改錯誤，可以使用 Git 還原。</p>
<p>還原單一檔案：</p>
<pre><code class="lang-powershell">git <span class="hljs-keyword">restore</span> <span class="hljs-keyword">path</span>/<span class="hljs-keyword">to</span>/<span class="hljs-keyword">file</span>
</code></pre>
<p>取消暫存：</p>
<pre><code class="lang-powershell">git restore --staged path/<span class="hljs-keyword">to</span>/<span class="hljs-keyword">file</span>
</code></pre>
<p>回到上一個 Commit 前，必須先確認是否會影響尚未保存的修改。</p>
<p>Git 對 AI 開發最大的價值包括：</p>
<ul>
<li>保留 AI 修改前的版本</li>
<li>比較 AI 修改內容</li>
<li>快速找出錯誤</li>
<li>分批提交修改</li>
<li>容易進行程式碼審查</li>
<li>發生問題時可以還原</li>
<li>可與 GitHub、GitLab、CI/CD 整合</li>
</ul>
<hr />
<h2 id="4-docker-desktop">4. Docker Desktop</h2>
<p>Docker 可以將應用程式與其執行環境封裝成容器。</p>
<p>官方下載：</p>
<p><a href="https://www.docker.com/products/docker-desktop/">https://www.docker.com/products/docker-desktop/</a></p>
<p>Docker 適合用來建立：</p>
<ul>
<li>PostgreSQL</li>
<li>MySQL</li>
<li>Redis</li>
<li>RabbitMQ</li>
<li>Nginx</li>
<li>Elasticsearch</li>
<li>Qdrant</li>
<li>Milvus</li>
<li>AI API</li>
<li>Python 執行環境</li>
<li>.NET 執行環境</li>
<li>React 前端</li>
<li>測試環境</li>
<li>微服務架構</li>
</ul>
<p>確認 Docker 是否安裝：</p>
<pre><code class="lang-powershell">docker <span class="hljs-comment">--version</span>
</code></pre>
<p>確認 Docker Compose：</p>
<pre><code class="lang-powershell">docker compose <span class="hljs-built_in">version</span>
</code></pre>
<p>查看執行中的容器：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">docker ps</span>
</code></pre>
<p>查看所有容器：</p>
<pre><code class="lang-powershell">docker ps <span class="hljs-_">-a</span>
</code></pre>
<p>例如，使用 Docker 建立 PostgreSQL：</p>
<pre><code class="lang-powershell">docker run --name postgres-dev `
  -<span class="ruby">e POSTGRES_USER=postgres <span class="hljs-string">`
</span></span>  -<span class="ruby"><span class="hljs-string">e POSTGRES_PASSWORD=YourPassword `</span>
</span>  -<span class="ruby">e POSTGRES_DB=appdb <span class="hljs-string">`
</span></span>  -<span class="ruby"><span class="hljs-string">p 5432:5432 `</span>
</span>  -<span class="ruby">d postgres</span>
</code></pre>
<p>AI 可以協助產生：</p>
<ul>
<li><code>Dockerfile</code></li>
<li><code>docker-compose.yml</code></li>
<li>Volume</li>
<li>Network</li>
<li>Health Check</li>
<li>環境變數</li>
<li>多階段建置</li>
<li>正式環境映像檔</li>
<li>容器啟動腳本</li>
</ul>
<hr />
<h2 id="5-node-js">5. Node.js</h2>
<p>Node.js 是 JavaScript 與 TypeScript 的執行環境。</p>
<p>官方網站：</p>
<p><a href="https://nodejs.org/zh-tw">https://nodejs.org/zh-tw</a></p>
<p>Node.js 常用於：</p>
<ul>
<li>React</li>
<li>Vue</li>
<li>Angular</li>
<li>Next.js</li>
<li>Nuxt</li>
<li>Vite</li>
<li>Three.js</li>
<li>Express</li>
<li>NestJS</li>
<li>MCP Server</li>
<li>AI CLI</li>
<li>自動化工具</li>
<li>前端建置</li>
</ul>
<p>確認 Node.js：</p>
<pre><code class="lang-powershell"><span class="hljs-keyword">node</span> <span class="hljs-title">--version</span>
</code></pre>
<p>確認 npm：</p>
<pre><code class="lang-powershell">npm <span class="hljs-comment">--version</span>
</code></pre>
<p>建立 Vite 專案：</p>
<pre><code class="lang-powershell"><span class="hljs-built_in">npm</span> create vite@latest
</code></pre>
<p>安裝套件：</p>
<pre><code class="lang-powershell">npm <span class="hljs-keyword">install</span>
</code></pre>
<p>啟動開發環境：</p>
<pre><code class="lang-powershell">npm <span class="hljs-keyword">run</span><span class="bash"> dev</span>
</code></pre>
<p>建立正式版本：</p>
<pre><code class="lang-powershell">npm <span class="hljs-keyword">run</span><span class="bash"> build</span>
</code></pre>
<p>AI 可以透過 Node.js CLI 協助：</p>
<ul>
<li>建立 React 專案</li>
<li>安裝 UI 套件</li>
<li>建立 API</li>
<li>建立 Three.js 場景</li>
<li>執行 ESLint</li>
<li>執行測試</li>
<li>建立 Production Build</li>
<li>分析 npm 安裝錯誤</li>
</ul>
<hr />
<h2 id="6-python-anaconda">6. Python 或 Anaconda</h2>
<p>Python 是 AI、機器學習、資料分析、自動化與後端 API 常用的程式語言。</p>
<p>Python 官方下載：</p>
<p><a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></p>
<p>Anaconda 下載：</p>
<p><a href="https://www.anaconda.com/download">https://www.anaconda.com/download</a></p>
<p>Python 常見用途包括：</p>
<ul>
<li>OpenAI API</li>
<li>Azure OpenAI</li>
<li>RAG</li>
<li>Embedding</li>
<li>向量資料庫</li>
<li>機器學習</li>
<li>深度學習</li>
<li>OCR</li>
<li>Whisper</li>
<li>YOLO</li>
<li>資料分析</li>
<li>Excel 處理</li>
<li>網頁爬蟲</li>
<li>FastAPI</li>
<li>Flask</li>
<li>自動化腳本</li>
</ul>
<p>確認 Python：</p>
<pre><code class="lang-powershell"><span class="hljs-keyword">python</span> --<span class="hljs-keyword">version</span>
</code></pre>
<p>確認 pip：</p>
<pre><code class="lang-powershell">pip <span class="hljs-comment">--version</span>
</code></pre>
<p>建立虛擬環境：</p>
<pre><code class="lang-powershell"><span class="hljs-selector-tag">python</span> <span class="hljs-selector-tag">-m</span> <span class="hljs-selector-tag">venv</span> <span class="hljs-selector-class">.venv</span>
</code></pre>
<p>啟用虛擬環境：</p>
<pre><code class="lang-powershell">.<span class="hljs-symbol">\.</span>venv<span class="hljs-symbol">\S</span>cripts<span class="hljs-symbol">\A</span>ctivate.ps1
</code></pre>
<p>安裝套件：</p>
<pre><code class="lang-powershell">pip <span class="hljs-keyword">install</span> fastapi uvicorn openai
</code></pre>
<p>輸出套件清單：</p>
<pre><code class="lang-powershell"><span class="hljs-selector-tag">pip</span> <span class="hljs-selector-tag">freeze</span> &gt; <span class="hljs-selector-tag">requirements</span><span class="hljs-selector-class">.txt</span>
</code></pre>
<p>安裝專案套件：</p>
<pre><code class="lang-powershell">pip <span class="hljs-keyword">install</span> -r requirements.txt
</code></pre>
<p>Anaconda 則特別適合：</p>
<ul>
<li>Jupyter Notebook</li>
<li>資料科學</li>
<li>AI 模型研究</li>
<li>多 Python 環境管理</li>
<li>機器學習套件管理</li>
<li>教學與實驗環境</li>
</ul>
<hr />
<h1 id="-">三、如果要建立雲端服務</h1>
<p>若希望 AI 協助建立或部署雲端服務，應安裝對應平台的官方 CLI。</p>
<hr />
<h2 id="1-google-cloud-cli">1. Google Cloud CLI</h2>
<p>官方網站：</p>
<p><a href="https://cloud.google.com/cli">https://cloud.google.com/cli</a></p>
<p>Google Cloud CLI 的主要指令為：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gcloud</span>
</code></pre>
<p>可操作：</p>
<ul>
<li>Cloud Run</li>
<li>Compute Engine</li>
<li>Cloud Storage</li>
<li>Cloud SQL</li>
<li>Google Kubernetes Engine</li>
<li>Artifact Registry</li>
<li>Secret Manager</li>
<li>Cloud Functions</li>
<li>IAM</li>
<li>Service Account</li>
<li>VPC</li>
<li>Load Balancer</li>
</ul>
<p>登入 Google Cloud：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gcloud auth login</span>
</code></pre>
<p>查看帳號：</p>
<pre><code class="lang-powershell">gcloud auth <span class="hljs-built_in">list</span>
</code></pre>
<p>查看專案：</p>
<pre><code class="lang-powershell">gcloud projects <span class="hljs-built_in">list</span>
</code></pre>
<p>設定預設專案：</p>
<pre><code class="lang-powershell">gcloud config <span class="hljs-keyword">set</span> <span class="hljs-keyword">project</span> YOUR_PROJECT_ID
</code></pre>
<p>查看目前設定：</p>
<pre><code class="lang-powershell">gcloud config <span class="hljs-built_in">list</span>
</code></pre>
<p>設定預設區域：</p>
<pre><code class="lang-powershell">gcloud config <span class="hljs-keyword">set</span> <span class="hljs-built_in">run</span>/region asia-east1
</code></pre>
<p>部署 Cloud Run：</p>
<pre><code class="lang-powershell">gcloud <span class="hljs-keyword">run</span><span class="bash"> deploy</span>
</code></pre>
<p>AI 可以根據需求協助：</p>
<ol>
<li>建立 Google Cloud 專案。</li>
<li>啟用相關 API。</li>
<li>建立 Artifact Registry。</li>
<li>建立 Docker Image。</li>
<li>推送映像檔。</li>
<li>建立 Cloud Run。</li>
<li>設定 Secret Manager。</li>
<li>設定環境變數。</li>
<li>設定自訂網域。</li>
<li>建立自動部署腳本。</li>
</ol>
<hr />
<h2 id="2-firebase-cli">2. Firebase CLI</h2>
<p>官方文件：</p>
<p><a href="https://firebase.google.com/docs/cli?hl=zh-cn">https://firebase.google.com/docs/cli?hl=zh-cn</a></p>
<p>Firebase CLI 通常透過 npm 安裝：</p>
<pre><code class="lang-powershell">npm <span class="hljs-keyword">install</span> -g firebase-tools
</code></pre>
<p>確認版本：</p>
<pre><code class="lang-powershell">firebase <span class="hljs-comment">--version</span>
</code></pre>
<p>登入：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">firebase login</span>
</code></pre>
<p>查看專案：</p>
<pre><code class="lang-powershell">firebase projects:<span class="hljs-built_in">list</span>
</code></pre>
<p>初始化 Firebase：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">firebase init</span>
</code></pre>
<p>切換專案：</p>
<pre><code class="lang-powershell">firebase <span class="hljs-keyword">use</span> PROJECT_ID
</code></pre>
<p>部署：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">firebase deploy</span>
</code></pre>
<p>Firebase CLI 可管理：</p>
<ul>
<li>Firebase Hosting</li>
<li>Firestore</li>
<li>Authentication</li>
<li>Cloud Functions</li>
<li>Storage</li>
<li>Emulator</li>
<li>Remote Config</li>
<li>App Hosting</li>
<li>Security Rules</li>
</ul>
<p>AI 可以協助建立：</p>
<ul>
<li><code>firebase.json</code></li>
<li>Firestore Rules</li>
<li>Storage Rules</li>
<li>Functions 專案</li>
<li>Hosting 設定</li>
<li>Emulator 設定</li>
<li>CI/CD 部署流程</li>
</ul>
<hr />
<h2 id="3-azure-cli">3. Azure CLI</h2>
<p>官方安裝說明：</p>
<p><a href="https://learn.microsoft.com/zh-tw/cli/azure/install-azure-cli?view=azure-cli-latest">https://learn.microsoft.com/zh-tw/cli/azure/install-azure-cli?view=azure-cli-latest</a></p>
<p>Azure CLI 的主要指令為：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">az</span>
</code></pre>
<p>登入 Azure：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">az login</span>
</code></pre>
<p>查看訂閱：</p>
<pre><code class="lang-powershell">az account <span class="hljs-built_in">list</span> <span class="hljs-comment">--output table</span>
</code></pre>
<p>設定訂閱：</p>
<pre><code class="lang-powershell">az account <span class="hljs-keyword">set</span> --subscription <span class="hljs-comment">"訂閱名稱或訂閱 ID"</span>
</code></pre>
<p>建立 Resource Group：</p>
<pre><code class="lang-powershell">az <span class="hljs-keyword">group</span> <span class="hljs-title">create</span> `
  --name DemoResourceGroup `
  --<span class="hljs-keyword">location</span> <span class="hljs-title">eastasia</span>
</code></pre>
<p>Azure CLI 可操作：</p>
<ul>
<li>App Service</li>
<li>Azure Functions</li>
<li>Container Apps</li>
<li>Azure Kubernetes Service</li>
<li>Azure SQL</li>
<li>PostgreSQL Flexible Server</li>
<li>Storage Account</li>
<li>Key Vault</li>
<li>Azure OpenAI</li>
<li>Virtual Machine</li>
<li>Azure Container Registry</li>
<li>Application Insights</li>
<li>Azure Monitor</li>
<li>Service Bus</li>
<li>Redis</li>
</ul>
<p>AI 可以根據需求產生：</p>
<ul>
<li>建立資源腳本</li>
<li>更新部署腳本</li>
<li>環境變數設定</li>
<li>Key Vault 設定</li>
<li>網路安全設定</li>
<li>Application Insights 監控</li>
<li>刪除測試環境腳本</li>
</ul>
<hr />
<h1 id="-">四、資料庫工具</h1>
<p>AI 應用通常需要儲存：</p>
<ul>
<li>使用者資料</li>
<li>系統設定</li>
<li>對話紀錄</li>
<li>文件索引</li>
<li>Embedding</li>
<li>分析結果</li>
<li>操作 Log</li>
<li>任務狀態</li>
<li>權限資料</li>
<li>AI Agent 執行紀錄</li>
</ul>
<p>因此，資料庫也是 AI CLI 開發環境的重要部分。</p>
<hr />
<h2 id="1-postgresql">1. PostgreSQL</h2>
<p>下載網址：</p>
<p><a href="https://www.enterprisedb.com/downloads/postgres-postgresql-downloads">https://www.enterprisedb.com/downloads/postgres-postgresql-downloads</a></p>
<p>PostgreSQL 適合：</p>
<ul>
<li>企業管理系統</li>
<li>SaaS</li>
<li>AI 應用</li>
<li>RAG</li>
<li>JSON 資料</li>
<li>全文檢索</li>
<li>地理資訊</li>
<li>向量搜尋</li>
<li>多租戶系統</li>
</ul>
<p>搭配 <code>pgvector</code> 後，PostgreSQL 也可以儲存與搜尋 Embedding。</p>
<p>確認 PostgreSQL CLI：</p>
<pre><code class="lang-powershell">psql <span class="hljs-comment">--version</span>
</code></pre>
<p>連線本機 PostgreSQL：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">psql -h localhost -U postgres</span>
</code></pre>
<p>指定資料庫：</p>
<pre><code class="lang-powershell">psql -h localhost -U postgres <span class="hljs-_">-d</span> appdb
</code></pre>
<p>建立資料庫：</p>
<pre><code class="lang-sql"><span class="hljs-keyword">CREATE</span> <span class="hljs-keyword">DATABASE</span> ai_demo;
</code></pre>
<p>查看資料庫：</p>
<pre><code class="lang-sql"><span class="hljs-string">\l</span>
</code></pre>
<p>查看資料表：</p>
<pre><code class="lang-sql">\d<span class="hljs-built_in">t</span>
</code></pre>
<p>離開：</p>
<pre><code class="lang-sql"><span class="hljs-string">\q</span>
</code></pre>
<hr />
<h2 id="2-pgadmin">2. pgAdmin</h2>
<p>官方網站：</p>
<p><a href="https://www.pgadmin.org/">https://www.pgadmin.org/</a></p>
<p>pgAdmin 是 PostgreSQL 的圖形化管理工具，可用來：</p>
<ul>
<li>建立資料庫</li>
<li>建立資料表</li>
<li>執行 SQL</li>
<li>管理帳號</li>
<li>管理權限</li>
<li>查看連線</li>
<li>備份</li>
<li>還原</li>
<li>查看效能</li>
</ul>
<p>CLI 適合自動化，pgAdmin 適合視覺化管理，兩者可以搭配使用。</p>
<hr />
<h2 id="3-sqlite">3. SQLite</h2>
<p>官方網站：</p>
<p><a href="https://www.sqlite.org/">https://www.sqlite.org/</a></p>
<p>SQLite 是輕量級嵌入式資料庫，不需要獨立資料庫伺服器。</p>
<p>適合：</p>
<ul>
<li>桌面程式</li>
<li>手機 App</li>
<li>小型系統</li>
<li>單機工具</li>
<li>PoC</li>
<li>快速雛型</li>
<li>開發測試</li>
<li>本機 AI 工具</li>
<li>小型 RAG</li>
</ul>
<p>資料通常儲存在單一檔案中，例如：</p>
<pre><code class="lang-text"><span class="hljs-keyword">app</span>.<span class="hljs-keyword">db</span>
</code></pre>
<p>開啟資料庫：</p>
<pre><code class="lang-powershell">sqlite3 <span class="hljs-keyword">app</span>.<span class="hljs-keyword">db</span>
</code></pre>
<p>查看資料表：</p>
<pre><code class="lang-sql"><span class="hljs-title">.tables</span>
</code></pre>
<p>查看資料表結構：</p>
<pre><code class="lang-sql"><span class="hljs-selector-class">.schema</span> users
</code></pre>
<p>離開 SQLite：</p>
<pre><code class="lang-sql"><span class="hljs-title">.quit</span>
</code></pre>
<hr />
<h2 id="4-db-browser-for-sqlite">4. DB Browser for SQLite</h2>
<p>官方網站：</p>
<p><a href="https://sqlitebrowser.org/">https://sqlitebrowser.org/</a></p>
<p>DB Browser for SQLite 可以透過圖形化介面：</p>
<ul>
<li>開啟 SQLite</li>
<li>查看資料表</li>
<li>編輯資料</li>
<li>執行 SQL</li>
<li>匯入 CSV</li>
<li>匯出 CSV</li>
<li>查看索引</li>
<li>修改資料表結構</li>
</ul>
<p>當 AI 產生 SQLite 專案後，可以使用 DB Browser 驗證資料是否正確。</p>
<hr />
<h1 id="-cli">五、版本控制與遠端平台 CLI</h1>
<p>Git、GitHub CLI 與 GitLab CLI 是不同層級的工具。</p>
<p>可以簡單理解為：</p>
<table>
<thead>
<tr>
<th>工具</th>
<th>主要用途</th>
</tr>
</thead>
<tbody>
<tr>
<td>Git</td>
<td>管理本機與遠端程式碼版本</td>
</tr>
<tr>
<td>GitHub CLI</td>
<td>操作 GitHub 平台功能</td>
</tr>
<tr>
<td>GitLab CLI</td>
<td>操作 GitLab 平台功能</td>
</tr>
</tbody>
</table>
<p>GitHub CLI 與 GitLab CLI 不能取代 Git。</p>
<p>一般情況下，應先安裝 Git，再安裝 GitHub CLI 或 GitLab CLI。</p>
<hr />
<h2 id="1-git">1. Git</h2>
<p>官方網站：</p>
<p><a href="https://git-scm.com/">https://git-scm.com/</a></p>
<p>Git 負責：</p>
<ul>
<li>Clone</li>
<li>Add</li>
<li>Commit</li>
<li>Pull</li>
<li>Push</li>
<li>Branch</li>
<li>Merge</li>
<li>Tag</li>
<li>Diff</li>
<li>Restore</li>
</ul>
<p>例如：</p>
<pre><code class="lang-powershell">git clone https://github.com/owner/repository.git
git switch -c <span class="hljs-built_in">feature</span>/<span class="hljs-built_in">new</span>-page
git add .
git commit -m <span class="hljs-string">"feat: add new page"</span>
git <span class="hljs-built_in">push</span> -u <span class="hljs-built_in">origin</span> <span class="hljs-built_in">feature</span>/<span class="hljs-built_in">new</span>-page
</code></pre>
<hr />
<h2 id="2-github-cli">2. GitHub CLI</h2>
<p>官方網站：</p>
<p><a href="https://cli.github.com/">https://cli.github.com/</a></p>
<p>GitHub CLI 的主要指令是：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gh</span>
</code></pre>
<p>登入 GitHub：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gh auth login</span>
</code></pre>
<p>查看登入狀態：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gh auth status</span>
</code></pre>
<p>建立 Repository：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gh repo create</span>
</code></pre>
<p>下載 Repository：</p>
<pre><code class="lang-powershell">gh repo <span class="hljs-keyword">clone</span> <span class="hljs-title">owner</span>/repository
</code></pre>
<p>建立 Issue：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gh issue create</span>
</code></pre>
<p>查看 Issue：</p>
<pre><code class="lang-powershell">gh issue <span class="hljs-built_in">list</span>
</code></pre>
<p>建立 Pull Request：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">gh pr create</span>
</code></pre>
<p>查看 Pull Request：</p>
<pre><code class="lang-powershell">gh <span class="hljs-keyword">pr</span> <span class="hljs-keyword">list</span>
</code></pre>
<p>查看 GitHub Actions：</p>
<pre><code class="lang-powershell">gh <span class="hljs-built_in">run</span> <span class="hljs-built_in">list</span>
</code></pre>
<p>查看執行結果：</p>
<pre><code class="lang-powershell">gh <span class="hljs-keyword">run</span><span class="bash"> view</span>
</code></pre>
<p>查看失敗 Log：</p>
<pre><code class="lang-powershell">gh <span class="hljs-keyword">run</span> <span class="hljs-built_in">view</span> --<span class="hljs-built_in">log</span>-failed
</code></pre>
<p>GitHub CLI 可讓 AI 協助：</p>
<ul>
<li>建立 Repository</li>
<li>建立 Issue</li>
<li>建立 Pull Request</li>
<li>查看 Review</li>
<li>分析 GitHub Actions</li>
<li>下載 Release</li>
<li>建立 Release</li>
<li>管理 Workflow</li>
<li>管理 GitHub 專案</li>
</ul>
<hr />
<h2 id="3-gitlab-cli">3. GitLab CLI</h2>
<p>GitLab CLI 發布頁：</p>
<p><a href="https://gitlab.com/gitlab-org/cli/-/releases">https://gitlab.com/gitlab-org/cli/-/releases</a></p>
<p>GitLab CLI 的主要指令為：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">glab</span>
</code></pre>
<p>登入 GitLab：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">glab auth login</span>
</code></pre>
<p>GitLab CLI 可以連線：</p>
<ul>
<li>GitLab.com</li>
<li>自建 GitLab Server</li>
</ul>
<p>查看 Issue：</p>
<pre><code class="lang-powershell">glab issue <span class="hljs-built_in">list</span>
</code></pre>
<p>建立 Issue：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">glab issue create</span>
</code></pre>
<p>查看 Merge Request：</p>
<pre><code class="lang-powershell">glab mr <span class="hljs-built_in">list</span>
</code></pre>
<p>建立 Merge Request：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">glab mr create</span>
</code></pre>
<p>查看 Pipeline：</p>
<pre><code class="lang-powershell">glab pipeline <span class="hljs-built_in">list</span>
</code></pre>
<p>查看 CI 狀態：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">glab ci status</span>
</code></pre>
<p>GitLab CLI 可讓 AI 協助：</p>
<ul>
<li>建立 Issue</li>
<li>建立 Merge Request</li>
<li>查看 Pipeline</li>
<li>建立 Release</li>
<li>分析 CI/CD</li>
<li>操作自建 GitLab</li>
<li>管理專案工作流程</li>
</ul>
<p>需要注意：</p>
<blockquote><p>GitLab CLI 負責管理 GitLab 平台，真正執行 CI/CD 工作的元件仍是 GitLab Runner。</p></blockquote>
<hr />
<h1 id="-ai-cli-">六、AI 搭配 CLI 可以做哪些事情？</h1>
<hr />
<h2 id="1-">1. 建立網站專案</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請使用 Vite 建立 React TypeScript 專案。

需求：
-<span class="ruby"> 使用 React
</span>-<span class="ruby"> 使用 TypeScript
</span>-<span class="ruby"> 使用 Tailwind CSS
</span>-<span class="ruby"> 建立首頁
</span>-<span class="ruby"> 建立登入頁
</span>-<span class="ruby"> 建立後台 Dashboard
</span>-<span class="ruby"> 使用 React Router
</span>-<span class="ruby"> 安裝套件
</span>-<span class="ruby"> 執行 npm run build
</span>-<span class="ruby"> 修正所有建置錯誤</span>
</code></pre>
<p>AI 可以協助執行：</p>
<pre><code class="lang-powershell"><span class="hljs-built_in">npm</span> create vite@latest
<span class="hljs-built_in">npm</span> install
<span class="hljs-built_in">npm</span> install react-router-dom
<span class="hljs-built_in">npm</span> run build
</code></pre>
<p>並建立：</p>
<ul>
<li>React 元件</li>
<li>路由</li>
<li>表單</li>
<li>Dashboard</li>
<li>API Service</li>
<li>CSS</li>
<li>環境變數</li>
</ul>
<hr />
<h2 id="2-python-api">2. 建立 Python API</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請建立一個 Python FastAPI 專案。

需求：
-<span class="ruby"> 提供健康檢查 API
</span>-<span class="ruby"> 提供使用者登入 API
</span>-<span class="ruby"> 提供 AI 問答 API
</span>-<span class="ruby"> 使用 SQLite
</span>-<span class="ruby"> 使用 SQLAlchemy
</span>-<span class="ruby"> 建立 requirements.txt
</span>-<span class="ruby"> 建立單元測試
</span>-<span class="ruby"> 啟動後驗證 API</span>
</code></pre>
<p>AI 可以建立：</p>
<pre><code class="lang-text">app/
├─ main<span class="hljs-selector-class">.py</span>
├─ database<span class="hljs-selector-class">.py</span>
├─ models<span class="hljs-selector-class">.py</span>
├─ schemas<span class="hljs-selector-class">.py</span>
├─ services/
├─ routers/
├─ tests/
├─ requirements<span class="hljs-selector-class">.txt</span>
└─ README.md
</code></pre>
<p>並執行：</p>
<pre><code class="lang-powershell">python -m venv <span class="hljs-selector-class">.venv</span>
.\.venv\Scripts\Activate<span class="hljs-selector-class">.ps1</span>
pip install fastapi uvicorn sqlalchemy pytest
uvicorn app<span class="hljs-selector-class">.main</span>:app --reload
pytest
</code></pre>
<hr />
<h2 id="3-docker-">3. 建立 Docker 環境</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請將目前 FastAPI 專案容器化。

需求：
-<span class="ruby"> 建立 Dockerfile
</span>-<span class="ruby"> 建立 docker-compose.yml
</span>-<span class="ruby"> 建立 PostgreSQL
</span>-<span class="ruby"> 建立 Redis
</span>-<span class="ruby"> 建立健康檢查
</span>-<span class="ruby"> 使用環境變數
</span>-<span class="ruby"> 啟動後測試 API</span>
</code></pre>
<p>AI 可以執行：</p>
<pre><code class="lang-powershell">docker compose up -d <span class="hljs-comment">--build</span>
</code></pre>
<p>查看容器：</p>
<pre><code class="lang-powershell"><span class="hljs-attribute">docker compose ps</span>
</code></pre>
<p>查看 Log：</p>
<pre><code class="lang-powershell">docker compose logs <span class="hljs-_">-f</span>
</code></pre>
<hr />
<h2 id="4-google-cloud">4. 部署 Google Cloud</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">我要在 Google Cloud 建立一個網頁服務。

請使用 gcloud CLI 協助規劃與部署。

需求：
-<span class="ruby"> Python FastAPI
</span>-<span class="ruby"> 使用 Docker
</span>-<span class="ruby"> 部署至 Cloud Run
</span>-<span class="ruby"> 區域使用 asia-east1
</span>-<span class="ruby"> 使用 Artifact Registry
</span>-<span class="ruby"> 使用 Secret Manager 儲存 API Key
</span>-<span class="ruby"> 設定環境變數
</span>-<span class="ruby"> 提供部署與刪除腳本
</span>-<span class="ruby"> 建立付費資源前先列出資源清單</span>
</code></pre>
<p>AI 可以依序協助：</p>
<ol>
<li>檢查 gcloud。</li>
<li>登入帳號。</li>
<li>設定 Project。</li>
<li>啟用 API。</li>
<li>建立 Artifact Registry。</li>
<li>建立 Docker Image。</li>
<li>推送 Image。</li>
<li>建立 Secret。</li>
<li>部署 Cloud Run。</li>
<li>驗證服務網址。</li>
</ol>
<hr />
<h2 id="5-azure-">5. 部署 Azure 服務</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請使用 Azure CLI 部署一個 .NET Web API。

需求：
-<span class="ruby"> 建立 Resource Group
</span>-<span class="ruby"> 建立 Linux App Service
</span>-<span class="ruby"> 建立 PostgreSQL Flexible Server
</span>-<span class="ruby"> 使用 Key Vault
</span>-<span class="ruby"> 使用 Application Insights
</span>-<span class="ruby"> 設定正式環境變數
</span>-<span class="ruby"> 提供建立、更新與刪除腳本</span>
</code></pre>
<p>AI 可以產生與執行：</p>
<ul>
<li><code>az group create</code></li>
<li><code>az appservice plan create</code></li>
<li><code>az webapp create</code></li>
<li><code>az postgres flexible-server create</code></li>
<li><code>az keyvault create</code></li>
<li><code>az monitor app-insights component create</code></li>
</ul>
<hr />
<h2 id="6-firebase">6. 操作 Firebase</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請使用 Firebase CLI 建立一個 React 網站。

需求：
-<span class="ruby"> 使用 Firebase Hosting
</span>-<span class="ruby"> 使用 Firestore
</span>-<span class="ruby"> 使用 Authentication
</span>-<span class="ruby"> 建立 Security Rules
</span>-<span class="ruby"> 建立本機 Emulator
</span>-<span class="ruby"> 建立 GitHub Actions 自動部署</span>
</code></pre>
<p>AI 可以協助執行：</p>
<pre><code class="lang-powershell">firebase login
firebase init
firebase emulators:<span class="hljs-literal">start</span>
firebase deploy
</code></pre>
<hr />
<h2 id="7-git-github">7. 操作 Git 與 GitHub</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請檢查目前專案修改內容。

接著：
<span class="hljs-bullet">1. </span>建立 feature/login 分支。
<span class="hljs-bullet">2. </span>將修改分成合理的 Commit。
<span class="hljs-bullet">3. </span>推送到 GitHub。
<span class="hljs-bullet">4. </span>使用 GitHub CLI 建立 Pull Request。
<span class="hljs-bullet">5. </span>在 Pull Request 說明中列出修改內容與測試結果。
</code></pre>
<p>AI 可能執行：</p>
<pre><code class="lang-powershell">git <span class="hljs-built_in">status</span>
git <span class="hljs-built_in">diff</span>
git switch -c <span class="hljs-built_in">feature</span>/login
git add .
git commit -m <span class="hljs-string">"feat: add login feature"</span>
git <span class="hljs-built_in">push</span> -u <span class="hljs-built_in">origin</span> <span class="hljs-built_in">feature</span>/login
gh pr create
</code></pre>
<hr />
<h2 id="8-git-gitlab">8. 操作 Git 與 GitLab</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請分析目前修改內容。

接著：
<span class="hljs-bullet">1. </span>建立 feature/report 分支。
<span class="hljs-bullet">2. </span>建立 Commit。
<span class="hljs-bullet">3. </span>推送到公司自建 GitLab。
<span class="hljs-bullet">4. </span>使用 glab 建立 Merge Request。
<span class="hljs-bullet">5. </span>檢查 GitLab Pipeline。
</code></pre>
<p>AI 可能執行：</p>
<pre><code class="lang-powershell">git switch -c <span class="hljs-built_in">feature</span>/report
git add .
git commit -m <span class="hljs-string">"feat: add report module"</span>
git <span class="hljs-built_in">push</span> -u <span class="hljs-built_in">origin</span> <span class="hljs-built_in">feature</span>/report
glab mr create
glab pipeline list
</code></pre>
<hr />
<h2 id="9-windows-iis">9. 自動管理 Windows 與 IIS</h2>
<p>提示詞範例：</p>
<pre><code class="lang-text">請使用 PowerShell 建立網站自動更新腳本。

流程：
<span class="hljs-bullet">1. </span>從 GitHub Release 取得最新版本。
<span class="hljs-bullet">2. </span>下載 ZIP。
<span class="hljs-bullet">3. </span>驗證檔案。
<span class="hljs-bullet">4. </span>解壓縮。
<span class="hljs-bullet">5. </span>停止 IIS App Pool。
<span class="hljs-bullet">6. </span>備份目前網站。
<span class="hljs-bullet">7. </span>保留 appsettings.json。
<span class="hljs-bullet">8. </span>更新其他程式檔案。
<span class="hljs-bullet">9. </span>啟動 IIS App Pool。
<span class="hljs-bullet">10. </span>呼叫健康檢查網址。
<span class="hljs-bullet">11. </span>失敗時還原。
<span class="hljs-bullet">12. </span>將完整過程寫入 Log。
</code></pre>
<p>AI 可以協助：</p>
<ul>
<li>撰寫腳本</li>
<li>執行腳本</li>
<li>分析權限錯誤</li>
<li>驗證 IIS</li>
<li>驗證網址</li>
<li>建立失敗還原機制</li>
</ul>
<hr />
<h1 id="-ai-cli-">七、如何撰寫適合 AI CLI 的提示詞？</h1>
<p>不建議只寫：</p>
<pre><code class="lang-text">幫我建立一個網站。
</code></pre>
<p>這類提示詞過於模糊，AI 很難判斷：</p>
<ul>
<li>使用什麼程式語言</li>
<li>使用什麼框架</li>
<li>是否使用 Docker</li>
<li>是否需要資料庫</li>
<li>是否需要部署</li>
<li>可以操作哪些 CLI</li>
<li>是否可以安裝套件</li>
<li>是否可以修改現有檔案</li>
</ul>
<p>建議至少包含以下內容：</p>
<ol>
<li>目標。</li>
<li>技術架構。</li>
<li>執行環境。</li>
<li>可使用工具。</li>
<li>功能需求。</li>
<li>驗證方式。</li>
<li>權限限制。</li>
<li>安全限制。</li>
<li>部署平台。</li>
<li>最終交付內容。</li>
</ol>
<hr />
<h2 id="-">建議提示詞模板</h2>
<pre><code class="lang-text">你是一位資深軟體架構師、AI 工程師與 DevOps 工程師。

請在目前目錄建立一個可執行的專案。

技術需求：
<span class="hljs-bullet">- </span>前端：React、TypeScript
<span class="hljs-bullet">- </span>後端：Python FastAPI
<span class="hljs-bullet">- </span>資料庫：PostgreSQL
<span class="hljs-bullet">- </span>快取：Redis
<span class="hljs-bullet">- </span>容器：Docker Compose
<span class="hljs-bullet">- </span>雲端：Google Cloud Run
<span class="hljs-bullet">- </span>版本控制：GitHub

可使用工具：
<span class="hljs-bullet">- </span>PowerShell
<span class="hljs-bullet">- </span>Git
<span class="hljs-bullet">- </span>GitHub CLI
<span class="hljs-bullet">- </span>Python CLI
<span class="hljs-bullet">- </span>Node.js CLI
<span class="hljs-bullet">- </span>Docker CLI
<span class="hljs-bullet">- </span>gcloud CLI

執行要求：
<span class="hljs-bullet">1. </span>先檢查所有必要工具是否安裝。
<span class="hljs-bullet">2. </span>查看目前資料夾與既有檔案。
<span class="hljs-bullet">3. </span>不要直接覆蓋重要檔案。
<span class="hljs-bullet">4. </span>建立專案結構。
<span class="hljs-bullet">5. </span>安裝必要套件。
<span class="hljs-bullet">6. </span>建立資料庫設定。
<span class="hljs-bullet">7. </span>建立 Dockerfile 與 docker-compose.yml。
<span class="hljs-bullet">8. </span>建立健康檢查 API。
<span class="hljs-bullet">9. </span>建立單元測試。
<span class="hljs-bullet">10. </span>執行建置與測試。
<span class="hljs-bullet">11. </span>修正所有錯誤。
<span class="hljs-bullet">12. </span>建立 Git 分支與 Commit。
<span class="hljs-bullet">13. </span>提供 Cloud Run 部署腳本。
<span class="hljs-bullet">14. </span>涉及付費資源前，先列出資源與可能費用。
<span class="hljs-bullet">15. </span>不要將密碼、Token 或 API Key 寫入 Git。
</code></pre>
<hr />
<h1 id="-3d-3d-">八、網頁 3D 與程式 3D 工具選擇</h1>
<hr />
<h2 id="-3d-three-js">網頁 3D：Three.js</h2>
<p>Three.js 是基於 WebGL 的 JavaScript 3D 函式庫。</p>
<p>適合：</p>
<ul>
<li>網頁 3D 展示</li>
<li>產品模型展示</li>
<li>3D 模型檢視器</li>
<li>互動式場景</li>
<li>數位孿生介面</li>
<li>WebXR</li>
<li>教學模擬</li>
<li>網頁小遊戲</li>
<li>工業設備視覺化</li>
</ul>
<p>安裝 Three.js：</p>
<pre><code class="lang-powershell">npm <span class="hljs-keyword">install</span> three
</code></pre>
<p>建立 Vite 專案：</p>
<pre><code class="lang-powershell"><span class="hljs-built_in">npm</span> create vite@latest threejs-demo
cd threejs-demo
<span class="hljs-built_in">npm</span> install
<span class="hljs-built_in">npm</span> install three
<span class="hljs-built_in">npm</span> run dev
</code></pre>
<p>Three.js 可以搭配：</p>
<ul>
<li>React Three Fiber</li>
<li>Drei</li>
<li>Vite</li>
<li>Blender</li>
<li>GLTF</li>
<li>GLB</li>
<li>WebXR</li>
<li>Cannon.js</li>
<li>Rapier</li>
</ul>
<p>提示詞範例：</p>
<pre><code class="lang-text">請使用 Vite、TypeScript 與 Three.js 建立 3D 網頁。

需求：
-<span class="ruby"> 建立地板
</span>-<span class="ruby"> 建立環境光
</span>-<span class="ruby"> 建立方向光
</span>-<span class="ruby"> 載入 GLB 模型
</span>-<span class="ruby"> 支援滑鼠旋轉
</span>-<span class="ruby"> 支援模型縮放
</span>-<span class="ruby"> 支援物件點擊
</span>-<span class="ruby"> 顯示物件資訊
</span>-<span class="ruby"> 加入載入進度
</span>-<span class="ruby"> 加入效能統計
</span>-<span class="ruby"> 執行 npm run build 驗證</span>
</code></pre>
<hr />
<h2 id="-unity">程式、遊戲與工業模擬：Unity</h2>
<p>Unity 是跨平台 2D／3D 開發引擎，主要使用 C#。</p>
<p>適合：</p>
<ul>
<li>Windows 3D 程式</li>
<li>手機 App</li>
<li>3D 遊戲</li>
<li>AR</li>
<li>VR</li>
<li>工業模擬</li>
<li>教育訓練</li>
<li>數位孿生</li>
<li>物理模擬</li>
<li>互動式展示</li>
</ul>
<p>Unity 適合需要以下能力的專案：</p>
<ul>
<li>角色控制</li>
<li>動畫系統</li>
<li>物理引擎</li>
<li>碰撞偵測</li>
<li>多平台輸出</li>
<li>VR／AR 裝置</li>
<li>複雜場景管理</li>
<li>手機感測器</li>
<li>工業設備模擬</li>
</ul>
<p>工具選擇參考：</p>
<table>
<thead>
<tr>
<th>使用情境</th>
<th>建議工具</th>
</tr>
</thead>
<tbody>
<tr>
<td>網頁顯示 3D 模型</td>
<td>Three.js</td>
</tr>
<tr>
<td>網頁互動 3D 場景</td>
<td>Three.js</td>
</tr>
<tr>
<td>網頁產品展示</td>
<td>Three.js</td>
</tr>
<tr>
<td>網頁輕量遊戲</td>
<td>Three.js</td>
</tr>
<tr>
<td>Windows 3D 程式</td>
<td>Unity</td>
</tr>
<tr>
<td>手機 3D App</td>
<td>Unity</td>
</tr>
<tr>
<td>AR／VR 應用</td>
<td>Unity</td>
</tr>
<tr>
<td>完整 3D 遊戲</td>
<td>Unity</td>
</tr>
<tr>
<td>工業模擬</td>
<td>Unity</td>
</tr>
<tr>
<td>教育訓練模擬</td>
<td>Unity</td>
</tr>
</tbody>
</table>
<hr />
<h1 id="-">九、安全與權限管理</h1>
<p>AI 能操作 CLI，代表它也可能執行具有破壞性的指令。</p>
<p>因此，必須建立明確的安全界線。</p>
<hr />
<h2 id="1-">1. 不要將密碼寫入提示詞或程式碼</h2>
<p>避免直接提供：</p>
<ul>
<li>密碼</li>
<li>API Key</li>
<li>Access Token</li>
<li>GitHub Token</li>
<li>GitLab Token</li>
<li>資料庫密碼</li>
<li>SSH Private Key</li>
<li>Service Account Key</li>
<li>Azure Client Secret</li>
</ul>
<p>建議使用：</p>
<ul>
<li>環境變數</li>
<li><code>.env</code></li>
<li>User Secrets</li>
<li>Azure Key Vault</li>
<li>Google Secret Manager</li>
<li>GitHub Secrets</li>
<li>GitLab CI/CD Variables</li>
</ul>
<p><code>.gitignore</code> 建議包含：</p>
<pre><code class="lang-gitignore"><span class="hljs-selector-class">.env</span>
<span class="hljs-selector-class">.env</span>.*
*<span class="hljs-selector-class">.key</span>
*<span class="hljs-selector-class">.pem</span>
<span class="hljs-selector-tag">appsettings</span><span class="hljs-selector-class">.Production</span><span class="hljs-selector-class">.json</span>
<span class="hljs-selector-tag">secrets</span><span class="hljs-selector-class">.json</span>
<span class="hljs-selector-tag">service-account</span><span class="hljs-selector-class">.json</span>
</code></pre>
<hr />
<h2 id="2-">2. 執行刪除指令前必須確認</h2>
<p>以下指令可能造成嚴重影響：</p>
<pre><code class="lang-powershell">Remove-Item -Recurse -Force
rm -rf
docker <span class="hljs-keyword">system</span> prune -<span class="hljs-keyword">a</span>
az group <span class="hljs-built_in">delete</span>
gcloud projects <span class="hljs-built_in">delete</span>
git reset <span class="hljs-comment">--hard</span>
git clean -fd
</code></pre>
<p>執行前應先：</p>
<ul>
<li>顯示操作目標</li>
<li>顯示實際路徑</li>
<li>顯示預計刪除內容</li>
<li>建立備份</li>
<li>建立 Git Commit</li>
<li>優先在測試環境操作</li>
<li>避免直接操作正式環境</li>
</ul>
<hr />
<h2 id="3-git-">3. 使用 Git 保護程式碼</h2>
<p>AI 大量修改程式前，先執行：</p>
<pre><code class="lang-powershell">git status
git <span class="hljs-keyword">add</span><span class="bash"> .
</span>git commit -m <span class="hljs-string">"chore: snapshot before AI changes"</span>
</code></pre>
<p>修改完成後檢查：</p>
<pre><code class="lang-powershell">git <span class="hljs-built_in">diff</span>
git <span class="hljs-built_in">status</span>
</code></pre>
<p>這樣可以：</p>
<ul>
<li>查看 AI 改了什麼</li>
<li>找出不合理修改</li>
<li>分批審查</li>
<li>還原錯誤</li>
<li>保留歷史紀錄</li>
</ul>
<hr />
<h2 id="4-">4. 區分不同環境</h2>
<p>建議至少區分：</p>
<pre><code class="lang-text">Development
<span class="hljs-keyword">Testing
</span>Staging
Production
</code></pre>
<p>AI 初期應優先操作：</p>
<ul>
<li>Development</li>
<li>Testing</li>
<li>個人雲端專案</li>
<li>測試用 Resource Group</li>
<li>測試用 Git 分支</li>
<li>測試資料庫</li>
</ul>
<p>避免一開始就讓 AI 取得 Production 最高權限。</p>
<hr />
<h2 id="5-">5. 使用最小權限原則</h2>
<p>AI 使用的帳號、Token 或 Service Account，只應取得必要權限。</p>
<p>例如：</p>
<ul>
<li>部署 Cloud Run 不一定需要 Project Owner</li>
<li>建立 Pull Request 不需要 Repository Admin</li>
<li>查詢資料庫不一定需要 DROP 權限</li>
<li>讀取 Log 不需要系統管理員權限</li>
<li>Firebase 部署不一定需要完整 Google Cloud 管理權限</li>
</ul>
<hr />
<h1 id="-">十、安裝完成後的環境檢查</h1>
<p>可以使用 PowerShell 快速檢查常用工具是否存在：</p>
<pre><code class="lang-powershell"><span class="hljs-variable">$commands</span> = @(
    <span class="hljs-string">"pwsh"</span>,
    <span class="hljs-string">"git"</span>,
    <span class="hljs-string">"docker"</span>,
    <span class="hljs-string">"node"</span>,
    <span class="hljs-string">"npm"</span>,
    <span class="hljs-string">"python"</span>,
    <span class="hljs-string">"pip"</span>,
    <span class="hljs-string">"gcloud"</span>,
    <span class="hljs-string">"firebase"</span>,
    <span class="hljs-string">"az"</span>,
    <span class="hljs-string">"gh"</span>,
    <span class="hljs-string">"glab"</span>,
    <span class="hljs-string">"psql"</span>,
    <span class="hljs-string">"sqlite3"</span>
)

<span class="hljs-keyword">foreach</span> (<span class="hljs-variable">$command</span> <span class="hljs-keyword">in</span> <span class="hljs-variable">$commands</span>) {
    <span class="hljs-variable">$result</span> = <span class="hljs-built_in">Get-Command</span> <span class="hljs-variable">$command</span> -ErrorAction SilentlyContinue

    <span class="hljs-keyword">if</span> (<span class="hljs-variable">$result</span>) {
        <span class="hljs-built_in">Write-Host</span> <span class="hljs-string">"[OK] <span class="hljs-variable">$command</span>"</span> -ForegroundColor Green
    }
    <span class="hljs-keyword">else</span> {
        <span class="hljs-built_in">Write-Host</span> <span class="hljs-string">"[Missing] <span class="hljs-variable">$command</span>"</span> -ForegroundColor Yellow
    }
}
</code></pre>
<p>也可以進一步檢查版本：</p>
<pre><code class="lang-powershell"><span class="hljs-variable">$versionCommands</span> = @{
    <span class="hljs-string">"PowerShell"</span> = <span class="hljs-string">"pwsh --version"</span>
    <span class="hljs-string">"Git"</span>        = <span class="hljs-string">"git --version"</span>
    <span class="hljs-string">"Docker"</span>     = <span class="hljs-string">"docker --version"</span>
    <span class="hljs-string">"Node.js"</span>    = <span class="hljs-string">"node --version"</span>
    <span class="hljs-string">"npm"</span>        = <span class="hljs-string">"npm --version"</span>
    <span class="hljs-string">"Python"</span>     = <span class="hljs-string">"python --version"</span>
    <span class="hljs-string">"pip"</span>        = <span class="hljs-string">"pip --version"</span>
    <span class="hljs-string">"gcloud"</span>     = <span class="hljs-string">"gcloud version"</span>
    <span class="hljs-string">"Firebase"</span>   = <span class="hljs-string">"firebase --version"</span>
    <span class="hljs-string">"Azure CLI"</span>  = <span class="hljs-string">"az version"</span>
    <span class="hljs-string">"GitHub CLI"</span> = <span class="hljs-string">"gh --version"</span>
    <span class="hljs-string">"GitLab CLI"</span> = <span class="hljs-string">"glab --version"</span>
    <span class="hljs-string">"PostgreSQL"</span> = <span class="hljs-string">"psql --version"</span>
    <span class="hljs-string">"SQLite"</span>     = <span class="hljs-string">"sqlite3 --version"</span>
}

<span class="hljs-keyword">foreach</span> (<span class="hljs-variable">$item</span> <span class="hljs-keyword">in</span> <span class="hljs-variable">$versionCommands</span>.GetEnumerator()) {
    <span class="hljs-built_in">Write-Host</span> <span class="hljs-string">"`n=== $(<span class="hljs-variable">$item</span>.Key) ==="</span> -ForegroundColor Cyan

    <span class="hljs-keyword">try</span> {
        <span class="hljs-built_in">Invoke-Expression</span> <span class="hljs-variable">$item</span>.Value
    }
    <span class="hljs-keyword">catch</span> {
        <span class="hljs-built_in">Write-Host</span> <span class="hljs-string">"未安裝或無法執行"</span> -ForegroundColor Yellow
    }
}
</code></pre>
<hr />
<h1 id="-ai-cli-">十一、建議的 AI CLI 基礎工具組合</h1>
<p>初學者可先安裝：</p>
<pre><code class="lang-text">Windows Terminal
<span class="hljs-bullet">+ </span>PowerShell 7
<span class="hljs-bullet">+ </span>Git
<span class="hljs-bullet">+ </span>Node.js
<span class="hljs-bullet">+ </span>Python
<span class="hljs-bullet">+ </span>Docker Desktop
</code></pre>
<p>需要使用 GitHub 時，再安裝：</p>
<pre><code class="lang-text">GitHub <span class="hljs-keyword">CLI</span>
</code></pre>
<p>需要使用 GitLab 時，再安裝：</p>
<pre><code class="lang-text">GitLab <span class="hljs-keyword">CLI</span>
</code></pre>
<p>需要部署 Google Cloud 時，再安裝：</p>
<pre><code class="lang-text">Google Cloud <span class="hljs-keyword">CLI</span>
+ Firebase <span class="hljs-keyword">CLI</span>
</code></pre>
<p>需要部署 Azure 時，再安裝：</p>
<pre><code class="lang-text">Azure <span class="hljs-keyword">CLI</span>
</code></pre>
<p>需要開發資料庫應用時，可安裝：</p>
<pre><code class="lang-text">PostgreSQL
<span class="hljs-bullet">+ </span>pgAdmin
<span class="hljs-bullet">+ </span>SQLite
<span class="hljs-bullet">+ </span>DB Browser for SQLite
</code></pre>
<hr />
<h1 id="-">十二、結論</h1>
<p>AI 能不能真正參與軟體開發，不只取決於模型本身是否聰明，也取決於它能使用哪些工具。</p>
<p>只有聊天能力時，AI 通常可以：</p>
<ul>
<li>提供建議</li>
<li>產生程式碼</li>
<li>解釋錯誤</li>
<li>規劃架構</li>
<li>撰寫指令</li>
</ul>
<p>搭配 CLI 後，AI 則可以進一步協助：</p>
<ul>
<li>建立專案</li>
<li>建立檔案</li>
<li>安裝套件</li>
<li>執行程式</li>
<li>執行測試</li>
<li>修正錯誤</li>
<li>操作 Git</li>
<li>建立分支與 Commit</li>
<li>建立 Pull Request</li>
<li>建立 Merge Request</li>
<li>建立 Docker 容器</li>
<li>操作資料庫</li>
<li>部署雲端</li>
<li>建立 CI/CD</li>
<li>執行系統維運</li>
<li>產生自動化腳本</li>
<li>驗證最終結果</li>
</ul>
<p>其中，Git 是 AI 開發流程中非常重要的安全基礎。</p>
<p>Git 可以讓開發者清楚知道：</p>
<ul>
<li>AI 修改了哪些檔案</li>
<li>AI 修改了哪些程式碼</li>
<li>哪一個版本發生問題</li>
<li>是否需要還原</li>
<li>是否可以進行程式碼審查</li>
</ul>
<p>因此，建議至少準備以下環境：</p>
<pre><code class="lang-text">Windows Terminal
<span class="hljs-bullet">+ </span>PowerShell 7
<span class="hljs-bullet">+ </span>Git
<span class="hljs-bullet">+ </span>Node.js
<span class="hljs-bullet">+ </span>Python
<span class="hljs-bullet">+ </span>Docker
<span class="hljs-bullet">+ </span>GitHub CLI 或 GitLab CLI
<span class="hljs-bullet">+ </span>Azure CLI 或 Google Cloud CLI
</code></pre>
<p>完成安裝後，可以在提示詞中清楚告訴 AI：</p>
<pre><code class="lang-text">你可以使用 PowerShell、Git、Python、Node.js、Docker 與雲端 CLI。

請先檢查目前環境與 Git 狀態，再開始修改。

執行過程中：
<span class="hljs-bullet">1. </span>不要直接覆蓋重要檔案。
<span class="hljs-bullet">2. </span>不要刪除未確認的檔案。
<span class="hljs-bullet">3. </span>修改前先建立 Git 分支。
<span class="hljs-bullet">4. </span>修改後執行建置與測試。
<span class="hljs-bullet">5. </span>顯示完整錯誤訊息。
<span class="hljs-bullet">6. </span>修正後再次驗證。
<span class="hljs-bullet">7. </span>不要將密碼與 Token 寫入 Git。
<span class="hljs-bullet">8. </span>涉及雲端付費資源前，先列出預計建立的資源。
</code></pre>
<p>當 AI、CLI、Git、Docker、程式語言與雲端平台整合後，AI 就不再只是回答技術問題的聊天工具，而是能夠參與規劃、開發、測試、版本控制、部署與維運的工程協作工具。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://superlevin.ifengyuan.tw/%e8%ae%93-ai-%e4%b8%8d%e5%8f%aa%e6%9c%83%e8%81%8a%e5%a4%a9%ef%bc%9a%e9%80%8f%e9%81%8e-cli-%e6%93%b4%e5%85%85-ai-%e7%9a%84%e5%af%a6%e9%9a%9b%e5%b7%a5%e4%bd%9c%e8%83%bd%e5%8a%9b/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>SQLite 推新版本~修復資料庫損壞漏洞以及漂亮呈現的QRF（Query Result Formatter）</title>
		<link>https://superlevin.ifengyuan.tw/sqlite-%e6%8e%a8%e6%96%b0%e7%89%88%e6%9c%ac%e4%bf%ae%e5%be%a9%e8%b3%87%e6%96%99%e5%ba%ab%e6%90%8d%e5%a3%9e%e6%bc%8f%e6%b4%9e%e4%bb%a5%e5%8f%8a%e6%bc%82%e4%ba%ae%e5%91%88%e7%8f%be%e7%9a%84qrf%ef%bc%88/</link>
					<comments>https://superlevin.ifengyuan.tw/sqlite-%e6%8e%a8%e6%96%b0%e7%89%88%e6%9c%ac%e4%bf%ae%e5%be%a9%e8%b3%87%e6%96%99%e5%ba%ab%e6%90%8d%e5%a3%9e%e6%bc%8f%e6%b4%9e%e4%bb%a5%e5%8f%8a%e6%bc%82%e4%ba%ae%e5%91%88%e7%8f%be%e7%9a%84qrf%ef%bc%88/#respond</comments>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Mon, 27 Jul 2026 06:05:50 +0000</pubDate>
				<category><![CDATA[程式設計]]></category>
		<category><![CDATA[qrf]]></category>
		<category><![CDATA[query result ＦＯＲＭＡＴＴＥＲ]]></category>
		<category><![CDATA[sql]]></category>
		<category><![CDATA[sqlite]]></category>
		<category><![CDATA[優化]]></category>
		<category><![CDATA[效能]]></category>
		<category><![CDATA[資料庫]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4216</guid>

					<description><![CDATA[SQLite 是全世界應用最廣泛的嵌入式資料庫引擎，從手機 App、瀏覽器到物聯網裝置都能看到它的身影。202 &#8230; <a href="https://superlevin.ifengyuan.tw/sqlite-%e6%8e%a8%e6%96%b0%e7%89%88%e6%9c%ac%e4%bf%ae%e5%be%a9%e8%b3%87%e6%96%99%e5%ba%ab%e6%90%8d%e5%a3%9e%e6%bc%8f%e6%b4%9e%e4%bb%a5%e5%8f%8a%e6%bc%82%e4%ba%ae%e5%91%88%e7%8f%be%e7%9a%84qrf%ef%bc%88/" class="more-link">閱讀全文<span class="screen-reader-text">〈SQLite 推新版本~修復資料庫損壞漏洞以及漂亮呈現的QRF（Query Result Formatter）〉</span></a>]]></description>
										<content:encoded><![CDATA[<p><img decoding="async" class="alignnone size-full wp-image-4217" src="http://cdnlevin.yowauction.com//2026/07/3cff00ce-4a1a-4fdd-92af-39466fdecb37.png" alt="" /> <img decoding="async" class="alignnone size-medium wp-image-4218" src="http://cdnlevin.yowauction.com//2026/07/a85fd0c2-1558-409c-bb0e-27a7b9c4829f.png" alt="" width="1" height="1" /></p>
<p class="font-claude-response-body break-words whitespace-normal">SQLite 是全世界應用最廣泛的嵌入式資料庫引擎，從手機 App、瀏覽器到物聯網裝置都能看到它的身影。2026 年 7 月 24 日發布的 3.53.4 版本，除了修補前幾個小版本（3.53.1～3.53.3）遺留的問題外，也整合了自 3.53.0 以來累積的多項重要功能。以下用淺顯的方式，把這次更新拆解成幾個重點面向來介紹。</p>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">一、最值得關心的修復：資料庫損壞漏洞</h2>
<p class="font-claude-response-body break-words whitespace-normal">這次更新最關鍵的一項，是修復了與 <strong>WAL（Write-Ahead Log，預寫式日誌）重置</strong>有關的資料庫損壞問題。WAL 是 SQLite 用來提升寫入效能與並行處理能力的機制，一旦這個環節出錯，最壞情況可能導致資料庫檔案損毀。對一般使用者來說，這代表：只要有使用資料庫寫入操作的應用程式，都建議儘快升級到這個版本，以避免潛在的資料遺失風險。</p>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">二、新增QRF（Query Result Formatter）</h2>
<p class="font-claude-response-body break-words whitespace-normal">QRF（Query Result Formatter）是這次版本很有特色的新功能，簡單來說，它能把 SQL 查詢結果自動排版成整齊的表格，方便在文字介面（例如命令列視窗）中閱讀，例如數字會自動靠右對齊、輸出以框線字元組成表格。這對於習慣用命令列工具查資料庫的工程師或維運人員來說，等於是「不用額外工具，資料庫自己就把報表排版好了」。目前互動式命令列（CLI）已預設採用這種新格式，而批次執行（例如寫腳本自動跑 SQL）則仍維持舊格式，避免既有自動化流程被打亂。</p>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">三、SQL 語法更靈活</h2>
<p class="font-claude-response-body break-words whitespace-normal">這次也強化了 SQL 語言本身的能力，重點包括：</p>
<ul class="[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3">
<li class="font-claude-response-body whitespace-normal break-words pl-2"><strong>ALTER TABLE 更彈性</strong>：現在可以直接新增或移除欄位的 NOT NULL、CHECK 限制條件，不需要像以前一樣重建整張表。</li>
<li class="font-claude-response-body whitespace-normal break-words pl-2"><strong>REINDEX EXPRESSIONS</strong>：可以單獨重建「表達式索引」（例如根據函數運算結果建立的索引），用來修復索引過期失效的問題。</li>
<li class="font-claude-response-body whitespace-normal break-words pl-2"><strong>VACUUM INTO 加強</strong>：備份資料庫時可以透過 URI 參數指定保留空間大小，方便預留未來成長空間。</li>
<li class="font-claude-response-body whitespace-normal break-words pl-2">新增了 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">json_array_insert()</code>、<code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">jsonb_array_insert()</code> 兩個 JSON 處理函數，讓操作 JSON 陣列更方便。</li>
</ul>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">四、查詢效能與規劃器的優化</h2>
<p class="font-claude-response-body break-words whitespace-normal">SQLite 的「查詢規劃器」負責決定一條 SQL 該怎麼執行最有效率，這次做了幾項調整：對於 EXCEPT、INTERSECT、UNION 這類集合運算，一律改用排序合併演算法，官方說明這樣「幾乎總是」比雜湊表快；另外也改善了多表格連接（JOIN）時的順序選擇邏輯，減少不必要的運算。對開發者而言，這些改動通常不需要修改任何程式碼，資料庫會自動跑得更快。</p>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">五、浮點數精度改變 — 需要留意的相容性議題</h2>
<p class="font-claude-response-body break-words whitespace-normal">比較值得注意的是，浮點數與文字互相轉換的精度，預設從過去的 15 位有效數字，提升到 <strong>17 位</strong>。這代表數字顯示可能比以前更精確，但也可能讓某些依賴舊有顯示格式的程式或測試出現差異。如果需要維持舊行為，可以透過 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">SQLITE_DBCONFIG_FP_DIGITS</code> 設定調整回來。這是一個「預設值改變」型的更新，建議有大量數值運算的系統在升級前先做測試。</p>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">六、命令列工具（CLI）多項細節優化</h2>
<p class="font-claude-response-body break-words whitespace-normal">命令列工具本身也有不少貼心的小改進，例如 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">.timer</code> 指令可以設定只計時下一句 SQL、<code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">.progress</code> 可以設定逾時自動中斷查詢、<code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">.indexes</code> 指令的搜尋邏輯改為比對索引名稱本身（而非資料表名稱），讓搜尋功能真正符合預期。另外要特別提醒：點指令結尾若有沒加引號的分號，現在會被直接忽略，這是一項<strong>可能造成相容性問題</strong>的改變，若有腳本依賴舊行為，需要特別檢查。</p>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">七、其他技術亮點</h2>
<p class="font-claude-response-body break-words whitespace-normal">新增了多個 C 語言介面函數，方便進階開發者操作字串緩衝區與虛擬表；Session 擴充功能新增了逐項新增變更的介面，方便做資料同步；JavaScript/WASM 版本則新增了 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">opfs-wl</code> 檔案系統選項，透過瀏覽器的 Web Locks 機制達到更公平的鎖定共享，不過需要較新版本的瀏覽器支援。</p>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">重點總結</h2>
<p class="font-claude-response-body break-words whitespace-normal">如果只想記住三件事：第一，這個版本修了一個可能造成資料庫損壞的漏洞，建議儘快升級；第二，新增的 QRF 讓命令列查詢結果變得更好讀；第三，浮點數精度與分號規則有變動，升級前建議簡單測試一下既有系統是否受影響。</p>
<p class="font-claude-response-body break-words whitespace-normal">需要特別說明的是，官方頁面提到 3.53.4 這個修補版本，主要是為了修正前幾個版本（3.53.1 至 3.53.3）中「主要由人工智慧引起的問題」，詳細細節官方僅指向提交紀錄，並未在頁面上進一步展開說明。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://superlevin.ifengyuan.tw/sqlite-%e6%8e%a8%e6%96%b0%e7%89%88%e6%9c%ac%e4%bf%ae%e5%be%a9%e8%b3%87%e6%96%99%e5%ba%ab%e6%90%8d%e5%a3%9e%e6%bc%8f%e6%b4%9e%e4%bb%a5%e5%8f%8a%e6%bc%82%e4%ba%ae%e5%91%88%e7%8f%be%e7%9a%84qrf%ef%bc%88/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>LINE 開發者的 2026 年中震撼彈：Rate Limit 被腰斬 99.5%、帳號終於能「刪除重來」，還有那個消失的最小化按鈕</title>
		<link>https://superlevin.ifengyuan.tw/line-%e9%96%8b%e7%99%bc%e8%80%85%e7%9a%84-2026-%e5%b9%b4%e4%b8%ad%e9%9c%87%e6%92%bc%e5%bd%88%ef%bc%9arate-limit-%e8%a2%ab%e8%85%b0%e6%96%ac-99-5%e3%80%81%e5%b8%b3%e8%99%9f%e7%b5%82%e6%96%bc%e8%83%bd/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Mon, 06 Jul 2026 02:28:34 +0000</pubDate>
				<category><![CDATA[程式設計]]></category>
		<category><![CDATA[Line]]></category>
		<category><![CDATA[LINE LIFF]]></category>
		<category><![CDATA[MINI APP]]></category>
		<category><![CDATA[RICHMENU]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4212</guid>

					<description><![CDATA[身為一個每天跟 LINE Messaging API、LIFF 混在一起的 .NET 開發者，我必須說 202 &#8230; <a href="https://superlevin.ifengyuan.tw/line-%e9%96%8b%e7%99%bc%e8%80%85%e7%9a%84-2026-%e5%b9%b4%e4%b8%ad%e9%9c%87%e6%92%bc%e5%bd%88%ef%bc%9arate-limit-%e8%a2%ab%e8%85%b0%e6%96%ac-99-5%e3%80%81%e5%b8%b3%e8%99%9f%e7%b5%82%e6%96%bc%e8%83%bd/" class="more-link">閱讀全文<span class="screen-reader-text">〈LINE 開發者的 2026 年中震撼彈：Rate Limit 被腰斬 99.5%、帳號終於能「刪除重來」，還有那個消失的最小化按鈕〉</span></a>]]></description>
										<content:encoded><![CDATA[<p><img decoding="async" class="alignnone size-full wp-image-4213" src="http://cdnlevin.yowauction.com//2026/07/1797431f-3b2f-442b-987d-49ca50d05174.png" alt="" /></p>
<p class="font-claude-response-body break-words whitespace-normal">身為一個每天跟 LINE Messaging API、LIFF 混在一起的 .NET 開發者，我必須說 2026 年這個五月到七月，LINE 官方明顯是把「改版」這件事當成連續劇在更新，一集接一集，還時不時來個「未完待續」。這篇就把這段期間比較有感的更新，一次幫大家整理清楚，順便碎念幾句。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">一、Rich Menu 終於有「數據」可以看了，不用再靠感覺</h3>
<p class="font-claude-response-body break-words whitespace-normal">7 月 1 日這天，Messaging API 新增了兩支端點：取得 rich menu 洞察總覽、取得每日洞察數據。以前如果你的圖文選單是用 Messaging API 建的，你只能默默祈禱使用者有點下去；現在終於可以像用 LINE Official Account Manager 建的選單一樣，看到「顯示次數」跟「點擊次數」了。有趣的是官方特別強調，這兩套數據是<strong>互不相通</strong>的：API 建的選單看不到後台的數據，後台建的選單也看不到 API 的數據。所以如果你們家專案是兩種方式混用，記得數據要分開看，不然老闆問起「圖文選單成效」，你可能要交出兩份報告。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">二、Rate Limit 被砍到只剩 0.5%，這是要逼死誰</h3>
<p class="font-claude-response-body break-words whitespace-normal">這大概是整個五月最有戲劇張力的一則公告。5 月 7 日官方先預告：Get rich menu list 這支端點的速率限制，將從每秒 2000 次，改成每秒 10 次。沒錯，你沒看錯，是從 2000 掉到 10，砍幅超過 99%。然後 5 月 26 日，這件事真的發生了。</p>
<div class="relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-100" tabindex="0" role="group" aria-label="Code">
<div class="sticky opacity-0 group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 top-2 py-2 h-12 w-0 float-right">
<div class="absolute right-0 h-8 px-2 items-center inline-flex z-10">
<div class="relative">
<div class="transition-all opacity-100 scale-100"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="transition-all opacity-0 scale-50"></div>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto">
<pre class="code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5"><code>Get rich menu list
之前：2,000 requests / 秒
之後：   10 requests / 秒</code></pre>
</div>
</div>
<p class="font-claude-response-body break-words whitespace-normal">如果你的系統有那種「每次使用者互動就順手查一次 rich menu 清單」的懶惰寫法，這波更新等於直接把你的架構考卷發回來重寫。建議是把清單資料快取起來，別再每次都問 LINE 要清單，畢竟現在問一次的成本，可能比你想像中貴很多。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">三、LINE MINI App 內購：免費試用期結束，該收錢了</h3>
<p class="font-claude-response-body break-words whitespace-normal">LINE MINI App 的應用內購買功能，原本佛心來著開放免費使用到 6 月底，官方在 6 月 5 日先預告、7 月 1 日正式上路：從 7 月 1 日之後的交易開始收取服務費用，費率則是以你申請當下公告的費率為準。同時官方也順手修訂了《LINE 應用內購買服務條款》，主要是把費用計算與請款結算方式講得更清楚。如果你們家產品有掛 MINI App 內購，這波記得回頭檢查一下財務試算，別讓會計部門措手不及。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">四、日本認證 MINI App 可以跟 Business Manager 組織「牽紅線」了</h3>
<p class="font-claude-response-body break-words whitespace-normal">6 月 10 日這則比較偏在地化：日本地區的<strong>已驗證</strong> MINI App，現在可以把 MINI App 頻道連結到 Business Manager 組織，進而跟同組織底下的其他服務（目前支援 LINE 官方帳號）做整合。條件不少，包括地區都要設成日本、服務提供者跟已發布資料的營運公司要一致等等，細節偏繁瑣，但方向很明確：LINE 想把底下這些帳號體系越串越緊，官方也說未來會開放更多整合功能，值得先卡個位。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">五、開發者帳號終於可以「刪除」了，但這是不歸路</h3>
<p class="font-claude-response-body break-words whitespace-normal">6 月 24 日的更新算是補了一個长期缺口：LINE Developers Console 終於支援刪除開發者帳號。不過這裡有個重點要劃起來——<strong>刪除之後不能復原</strong>。而且如果你是某個 Provider 或 Channel 底下唯一的 Admin，刪除前系統會要求你先把權限交接給其他帳號，不然那個服務就等於被鎖死，沒人能再進去改設定。所以與其說這是「刪除帳號」功能，不如說它是一個「離職交接檢查表」，公司內部帳號有異動的話，記得先做好交接再按下去。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">六、LIFF 悄悄升級了兩次，但你可能完全沒感覺</h3>
<p class="font-claude-response-body break-words whitespace-normal">5 月 13 日發布 LIFF v2.29.0，6 月 29 日再發布 v2.29.1，兩次都寫著同一句話：只調整 SDK 內部行為，功能沒有變化。這種更新最適合「设了自動更新就不用管」，如果你是走 CDN edge path（<code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">https://static.line-scdn.net/liff/edge/2/sdk.js</code>），會自動吃到新版；如果是 npm 使用者，記得手動更新一下：</p>
<div class="relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-100" tabindex="0" role="group" aria-label="bash code">
<div class="text-text-500 font-small p-3.5 pb-0">bash</div>
<div class="overflow-x-auto">
<pre class="code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5"><code class="language-bash"><span class="token token">npm</span> <span class="token token">install</span> @line/liff@2.29.1
<span class="token token"># 或</span>
<span class="token token">yarn</span> <span class="token token">add</span> @line/liff@2.29.1</code></pre>
</div>
</div>
<p class="font-claude-response-body break-words whitespace-normal">雖然官方說功能沒變，但內部行為調整這種話，老實講我都會半信半疑地多測一輪回歸測試，你們也是吧？</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">七、LIFF 瀏覽器大改版：多分頁圖示退場，換成三顆點點</h3>
<p class="font-claude-response-body break-words whitespace-normal">5 月 19 日這則跟 UI/UX 關係最大：從 LINE 26.7.0 版開始，LIFF 瀏覽器的標頭規格整個翻新。原本那顆代表「多分頁檢視」的按鈕圖示，換成了直式三個點的選單圖示；點下去也不再直接跳去分頁畫面，而是彈出一個下拉選單，裡面塞了全部分頁、重新整理、最小化瀏覽器、分享、加到主畫面、我的最愛、權限設定、關於此服務、回報問題等一長串選項。另外，已驗證 MINI App 原本在標頭上的「最小化」按鈕，現在被收進下拉選單裡，原本的位置換成了「關閉」按鈕。如果你的 MINI App 有針對舊版標頭做過任何客製化引導教學或截圖說明，這波更新後這些素材大概都要重拍一輪了。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">八、五月那場 LIFF/MINI App 事故：一段從 4/27 燒到 5/14 的小插曲</h3>
<p class="font-claude-response-body break-words whitespace-normal">最後提一下背景插曲：4 月 27 日到 5 月 14 日之間，Android 版 LINE 26.6.0 / 26.6.1 有個 bug，導致在特定情境下（LIFF 瀏覽器開著時，用 Intent 或 App Link 又叫出同一個或另一個 LIFF/MINI App）會拿不到使用者 profile、LIFF API 也會怪怪的。官方後來在 5 月 14 日推出修復版 LINE 解決問題，但在那之前也貼心提供了一段暫時解法，用 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">location.href</code> 做頁面轉跳、並在偵測到類似 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">invalid_request</code> 的錯誤時手動登出再登入：</p>
<div class="relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-100" tabindex="0" role="group" aria-label="javascript code">
<div class="sticky opacity-0 group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 top-2 py-2 h-12 w-0 float-right">
<div class="absolute right-0 h-8 px-2 items-center inline-flex z-10">
<div class="relative">
<div class="absolute inset-0 flex items-center justify-center">
<div class="transition-all opacity-0 scale-50"></div>
</div>
</div>
</div>
</div>
<div class="text-text-500 font-small p-3.5 pb-0">javascript</div>
<div class="overflow-x-auto">
<pre class="code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed p-3.5"><code class="language-javascript"><span class="token token">const</span> params <span class="token token">=</span> <span class="token token">new</span> <span class="token token">URLSearchParams</span><span class="token token">(</span><span class="token token dom">location</span><span class="token token">.</span><span class="token token property-access">search</span><span class="token token">)</span>
<span class="token token">const</span> liffState <span class="token token">=</span> params<span class="token token">.</span><span class="token token property-access">get</span><span class="token token">(</span><span class="token token">'liff.state'</span><span class="token token">)</span>
<span class="token token">const</span> redirectUri <span class="token token">=</span> liffState
  <span class="token token">?</span> <span class="token token">new</span> <span class="token token">URL</span><span class="token token">(</span><span class="token token">'.'</span> <span class="token token">+</span> liffState<span class="token token">,</span> <span class="token token dom">location</span><span class="token token">.</span><span class="token token property-access">href</span><span class="token token">)</span><span class="token token">.</span><span class="token token property-access">toString</span><span class="token token">(</span><span class="token token">)</span>
  <span class="token token">:</span> <span class="token token dom">location</span><span class="token token">.</span><span class="token token property-access">href</span>

liff<span class="token token">.</span><span class="token token property-access">login</span><span class="token token">(</span><span class="token token">{</span> redirectUri <span class="token token">}</span><span class="token token">)</span></code></pre>
</div>
</div>
<p class="font-claude-response-body break-words whitespace-normal">這種「先給暫時解法、再補正式修復」的節奏，其實蠻值得學起來——不管是自己開發的服務出包，還是等第三方修 bug，先讓使用者有路可走，永遠比讓他們卡死畫面來得體貼。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">小結：這波更新告訴我們什麼</h3>
<p class="font-claude-response-body break-words whitespace-normal">整體看下來，這兩個月 LINE 平台的更新可以歸納成三個關页字：<strong>限流變嚴、收費上路、體驗微調</strong>。速率限制被砍等於在提醒大家該做快取就要做；MINI App 收費代表商業模式正式進入下一階段；LIFF 的一連串小改版則是提醒我們，前端串接這種東西永遠不能「串完就沒事了」，得定期回去看看官方公告，免得哪天使用者截圖來問你「這個按鈕怎麼不見了」，你才第一次知道有這回事。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Claude code 搭配 OpenRouter 使用免費的claude code (?)</title>
		<link>https://superlevin.ifengyuan.tw/claude-code-%e6%90%ad%e9%85%8d-openrouter-%e4%bd%bf%e7%94%a8%e5%85%8d%e8%b2%bb%e7%9a%84claude-code/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Sun, 03 May 2026 08:41:31 +0000</pubDate>
				<category><![CDATA[AI人工智慧]]></category>
		<category><![CDATA[程式設計]]></category>
		<category><![CDATA[claude]]></category>
		<category><![CDATA[free]]></category>
		<category><![CDATA[openrouter]]></category>
		<category><![CDATA[免費]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4208</guid>

					<description><![CDATA[claude code文件 https://code.claude.com/docs/zh-TW/overvi &#8230; <a href="https://superlevin.ifengyuan.tw/claude-code-%e6%90%ad%e9%85%8d-openrouter-%e4%bd%bf%e7%94%a8%e5%85%8d%e8%b2%bb%e7%9a%84claude-code/" class="more-link">閱讀全文<span class="screen-reader-text">〈Claude code 搭配 OpenRouter 使用免費的claude code (?)〉</span></a>]]></description>
										<content:encoded><![CDATA[<h2 class="md-end-block md-heading"><span class="md-plain">claude code文件</span></h2>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://code.claude.com/docs/zh-TW/overview">https://code.claude.com/docs/zh-TW/overview</a></span></p>
<p class="md-end-block md-p">
<h2 class="md-end-block md-heading"><span class="md-plain">安裝 claude code (命令提示字元)</span></h2>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" lang="cmd" spellcheck="false"><span role="presentation"><span class="cm-identifier">curl</span> <span class="cm-operator">-</span><span class="cm-identifier">fsSL</span> <span class="cm-identifier">https</span><span class="cm-operator">://</span><span class="cm-identifier">claude</span><span class="cm-punctuation">.</span><span class="cm-identifier">ai</span><span class="cm-operator">/</span><span class="cm-identifier">install</span><span class="cm-punctuation">.</span><span class="cm-identifier">cmd</span> <span class="cm-operator">-</span><span class="cm-identifier">o</span> <span class="cm-identifier">install</span><span class="cm-punctuation">.</span><span class="cm-identifier">cmd</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-identifier">install</span><span class="cm-punctuation">.</span><span class="cm-identifier">cmd</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-builtin">del</span> <span class="cm-identifier">install</span><span class="cm-punctuation">.</span><span class="cm-identifier">cmd</span></span></pre>
<p class="md-end-block md-p">
<h2 class="md-end-block md-heading"><span class="md-plain">OpenRouter 註冊</span></h2>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://openrouter.ai/">https://openrouter.ai/</a></span><span class="md-plain"> 註冊新帳號</span></p>
<p class="md-end-block md-p"><span class="md-plain">OpenRouter 使用在claude code的說明</span></p>
<p class="md-end-block md-p"><span class="md-link md-pair-s" spellcheck="false"><a href="https://openrouter.ai/docs/guides/coding-agents/claude-code-integration">https://openrouter.ai/docs/guides/coding-agents/claude-code-integration</a></span></p>
<p class="md-end-block md-p"><span class="md-plain">.claude/settings.local.json</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" spellcheck="false"><span role="presentation">{</span>
<span role="presentation">  "env": {</span>
<span role="presentation">    "ANTHROPIC_BASE_URL": "https://openrouter.ai/api",</span>
<span role="presentation">    "ANTHROPIC_AUTH_TOKEN": "&lt;your-openrouter-api-key&gt;",</span>
<span role="presentation">    "ANTHROPIC_API_KEY": ""</span>
<span role="presentation">  }</span>
<span role="presentation">}</span></pre>
<p class="md-end-block md-p"><span class="md-plain">加上 </span><span class="md-pair-s"><strong><span class="md-plain">&#8220;ANTHROPIC_MODEL&#8221;:&#8221;openrouter/free&#8221;</span></strong></span><span class="md-plain"> (使用系統分配，或是到model 搜尋免費 free </span><span class="md-link md-pair-s" spellcheck="false"><a href="https://openrouter.ai/models?q=free">https://openrouter.ai/models?q=free</a></span><span class="md-plain">)</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" spellcheck="false"><span role="presentation">{</span>
<span role="presentation">  "env": {</span>
<span role="presentation">    "ANTHROPIC_BASE_URL": "https://openrouter.ai/api",</span>
<span role="presentation">    "ANTHROPIC_AUTH_TOKEN": "&lt;your-openrouter-api-key&gt;",</span>
<span role="presentation">    "ANTHROPIC_API_KEY": "",</span>
<span role="presentation">     "ANTHROPIC_MODEL":"openrouter/free"</span>
<span role="presentation">​</span>
<span role="presentation">  }</span>
<span role="presentation">}</span></pre>
<p class="md-end-block md-p md-focus"><span class="md-plain">開啟 claude code</span></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>自己升級wordpress環境php8.5</title>
		<link>https://superlevin.ifengyuan.tw/%e8%87%aa%e5%b7%b1%e5%8d%87%e7%b4%9awordpress%e7%92%b0%e5%a2%83php8-5/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Sat, 28 Mar 2026 10:24:28 +0000</pubDate>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[程式設計]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4201</guid>

					<description><![CDATA[https://github.com/superlevin/hacklog-remote-attachment &#8230; <a href="https://superlevin.ifengyuan.tw/%e8%87%aa%e5%b7%b1%e5%8d%87%e7%b4%9awordpress%e7%92%b0%e5%a2%83php8-5/" class="more-link">閱讀全文<span class="screen-reader-text">〈自己升級wordpress環境php8.5〉</span></a>]]></description>
										<content:encoded><![CDATA[<p><a href="https://github.com/superlevin/hacklog-remote-attachment">https://github.com/superlevin/hacklog-remote-attachment</a></p>
<p data-path-to-node="2">經營一個網站超過十年，就像是看著一個孩子長大一樣，充滿了滿滿的感情與回憶。這十多年來，我的WordPress網站一直忠實地陪伴著我，但也面臨著需要「轉大人」的考驗。</p>
<p data-path-to-node="3">最近，我下定決心要將網站的底層引擎升級到全新的PHP 8.5，希望能讓網站跑得更快、更順暢，給大家更好的體驗。沒想到，過程卻像是在闖關打怪一樣充滿挑戰！其中最大的一個關卡，就是一個叫做hacklog remote attachment的老套件。它就像是一個充滿回憶但也捨不得搬家的老頑固，不管我怎麼嘗試，它就是無法適應新的環境，導致我的升級計畫一直卡關失敗。</p>
<p data-path-to-node="4">正當我感到有些頭痛，差點要舉白旗投降的時候，我想起了現在最厲害的好幫手，也就是人工智慧AI！我轉念一想，何不請AI來當我的專屬工程顧問呢？於是，我帶著這個老套件的難題，和AI進行了一場深度的跨界交流。</p>
<p data-path-to-node="5">沒想到，AI真的超級神！在它的耐心引導與程式碼微調之下，我們居然成功解開了這個老套件的心結，讓它順利跟上了時代的腳步。當畫面上顯示升級成功的那一刻，我真的感動到想從椅子上跳起來歡呼！</p>
<p data-path-to-node="6">這不僅僅是一次系統的升級，更是我親身見證科技帶來無限可能的一刻。遇到困難真的不要氣餒，轉個彎，或許就會發現新的解法。有時候，只要一點點正向的信念，加上善用身邊的新工具，原本看似無解的難題也能迎刃而解！讓我們一起保持開放的心，快樂迎接每一天的挑戰吧！</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>2026年的更新</title>
		<link>https://superlevin.ifengyuan.tw/2026%e5%b9%b4%e7%9a%84%e6%9b%b4%e6%96%b0/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Thu, 26 Mar 2026 14:48:38 +0000</pubDate>
				<category><![CDATA[生活雜感]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4191</guid>

					<description><![CDATA[2026年半年取得 ipas AI 初級以及中級證照，也陸續拿到一些Anthropic 、Gemini的線上證 &#8230; <a href="https://superlevin.ifengyuan.tw/2026%e5%b9%b4%e7%9a%84%e6%9b%b4%e6%96%b0/" class="more-link">閱讀全文<span class="screen-reader-text">〈2026年的更新〉</span></a>]]></description>
										<content:encoded><![CDATA[<p>2026年半年取得 ipas AI 初級以及中級證照，也陸續拿到一些Anthropic 、Gemini的線上證書後。也在上班後的時間，開始學校兼課分享的角色~每天很忙碌也很充實</p>
<p><img decoding="async" class="alignnone size-full wp-image-4192" src="http://cdnlevin.yowauction.com//2026/03/1774523077780.jpg" alt="" /> <img decoding="async" class="alignnone size-medium wp-image-4193" src="http://cdnlevin.yowauction.com//2026/03/S__96280587.jpg" alt="" width="1" height="1" /></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Azure 上的 PostgreSQL 如何撐起 ChatGPT 8 億用戶？微軟工程師親揭幕後秘辛</title>
		<link>https://superlevin.ifengyuan.tw/azure-%e4%b8%8a%e7%9a%84-postgresql-%e5%a6%82%e4%bd%95%e6%92%90%e8%b5%b7-chatgpt-8-%e5%84%84%e7%94%a8%e6%88%b6%ef%bc%9f%e5%be%ae%e8%bb%9f%e5%b7%a5%e7%a8%8b%e5%b8%ab%e8%a6%aa%e6%8f%ad%e5%b9%95%e5%be%8c/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Wed, 25 Feb 2026 07:44:12 +0000</pubDate>
				<category><![CDATA[AI人工智慧]]></category>
		<category><![CDATA[Delphi]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4188</guid>

					<description><![CDATA[今天要來聊一個超有料的主題——ChatGPT 背後的資料庫架構，以及微軟工程團隊如何幫 OpenAI 撐過爆炸 &#8230; <a href="https://superlevin.ifengyuan.tw/azure-%e4%b8%8a%e7%9a%84-postgresql-%e5%a6%82%e4%bd%95%e6%92%90%e8%b5%b7-chatgpt-8-%e5%84%84%e7%94%a8%e6%88%b6%ef%bc%9f%e5%be%ae%e8%bb%9f%e5%b7%a5%e7%a8%8b%e5%b8%ab%e8%a6%aa%e6%8f%ad%e5%b9%95%e5%be%8c/" class="more-link">閱讀全文<span class="screen-reader-text">〈Azure 上的 PostgreSQL 如何撐起 ChatGPT 8 億用戶？微軟工程師親揭幕後秘辛〉</span></a>]]></description>
										<content:encoded><![CDATA[<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">今天要來聊一個超有料的主題——ChatGPT 背後的資料庫架構，以及微軟工程團隊如何幫 OpenAI 撐過爆炸性的用戶成長。 這篇文章源自微軟官方部落格，由 Azure PostgreSQL 工程副總裁 Affan Dar 領銜撰寫。乾貨滿滿，讓我來幫你翻譯成人話。</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">先說背景：ChatGPT 有多誇張？</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">OpenAI 過去一年把資料庫規模擴大了 <strong>10 倍</strong>，要支撐的是高達 <strong>8 億月活躍用戶</strong>。這個量級是什麼概念？整個系統底層用的是 <strong>Azure Database for PostgreSQL</strong>，也就是微軟雲端上的 PostgreSQL 託管服務。 PostgreSQL 這個開源資料庫，平常我們可能覺得它就是個「普通關聯式資料庫」，但這次的故事告訴我們：只要配置得當，它真的可以撐到超大規模。</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">問題一：讀取副本老是跟不上主節點</h2>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">什麼是讀取副本（Read Replica）？</h3>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">簡單說，就是把資料庫「複製一份」給其他伺服器來分擔讀取流量，這樣主節點就不用一個人扛所有查詢。ChatGPT 的架構裡，<strong>一台主節點撐著超過 50 個分布在多個地區的副本</strong>，這數字已經很嚇人了。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">發生了什麼問題？</h3>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">在 OpenAI 某次大型服務上線前，工程師發現一個詭異現象：副本的資料會「越落越遠」，跟不上主節點的更新速度（這叫做 <strong>Replication Lag</strong>，複製延遲），而且它<strong>不會自己恢復</strong>，只能靠重啟副本才能解決，然後一天內又再次發生——陷入一個惡性循環。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">問題的根源是什麼？</h3>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">深挖之後，找到了罪魁禍首：<strong>TCP 壅塞控制演算法</strong>。 預設的 CUBIC 演算法在偵測到封包遺失（跨地區傳輸本來就難免）時，會把傳輸速度<strong>猛踩煞車</strong>，拼命退讓，導致複製速度大幅下降。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">怎麼解決？</h3>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">微軟團隊做了三件事：</p>
<ul class="[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3">
<li class="whitespace-normal break-words pl-2">把壅塞控制演算法從 CUBIC 換成 <strong>BBR</strong>（對封包遺失更不敏感）</li>
<li class="whitespace-normal break-words pl-2">調整 TCP 視窗大小設定</li>
<li class="whitespace-normal break-words pl-2">引入**公平佇列（Fair Queuing）**網路排程，讓封包傳送更平滑 這三招組合拳下去，問題就解決了。</li>
</ul>
<hr class="border-border-200 border-t-0.5 my-3 mx-1.5" />
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">問題二：讀副本超過 50 個後怎麼辦？</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">微軟加入了**串聯副本（Cascading Replica）**支援，讓副本可以再複製給下一層副本，不用所有副本都直接連主節點。這樣就能在不影響主節點的情況下，繼續橫向擴展讀取能力。 此外，他們還開發了一個新技巧：<strong>從同地區的另一個副本快照建立新的異地副本</strong>，避免過去需要跨地區大量複製資料（可能要花幾小時甚至幾天）的痛苦。</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">問題三：寫入量太大，單台主節點 IOPS 不夠了</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">讀取問題解決了，但寫入量的成長讓單台 PostgreSQL 主節點的 I/O 效能上限捉襟見肘。這也是為什麼 OpenAI 後來把部分適合拆分的新工作負載移到 <strong>Azure Cosmos DB</strong>（NoSQL）去了。 但問題是，有些資料就是很難拆分（sharding 困難），這時候怎麼辦？ 這就帶出了微軟的新架構：<strong>Azure HorizonDB</strong>，在 2025 年 11 月進入私人預覽。</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">Azure HorizonDB：為超大規模打造的 Postgres</h2>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">這是目前最令人興奮的部分。HorizonDB 從根本上重新設計了 PostgreSQL 的儲存層，核心概念叫做「<strong>以 WAL 為中心的儲存模型</strong>」。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">WAL 是什麼？</h3>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">WAL（Write-Ahead Log，預寫日誌）是資料庫記錄「我要做什麼改變」的日誌，用來確保資料不會因為系統崩潰而遺失。PostgreSQL 傳統上是先寫 WAL、再把資料頁寫到磁碟。</p>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">HorizonDB 的創新在哪？</h3>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]"><strong>PostgreSQL 的計算節點不再直接寫資料頁到磁碟</strong>，所有持久化都透過 WAL 完成，資料頁由獨立的儲存層負責重建。 儲存層分成兩個獨立服務：</p>
<div class="overflow-x-auto w-full px-2 mb-6">
<table class="min-w-full border-collapse text-sm leading-[1.7] whitespace-normal">
<thead class="text-left">
<tr>
<th class="text-text-100 border-b-0.5 border-border-300/60 py-2 pr-4 align-top font-bold">服務</th>
<th class="text-text-100 border-b-0.5 border-border-300/60 py-2 pr-4 align-top font-bold">優化目標</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top"><strong>WAL Server</strong></td>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top">超低延遲的順序寫入</td>
</tr>
<tr>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top"><strong>Page Server</strong></td>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top">超大規模的隨機讀寫</td>
</tr>
<tr>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top">WAL Server 可以在<strong>一次網路跳轉</strong>內就把一筆交易持久化到 3 個可用區域（傳統架構需要 4 次跳轉），大幅降低提交延遲。</td>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top"></td>
</tr>
<tr>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top">Page Server 則把資料分散在大量 NVMe 高速磁碟上，讓單個 PostgreSQL 實例可以達到<strong>數十萬 IOPS</strong> 的讀取能力。</td>
<td class="border-b-0.5 border-border-300/30 py-2 pr-4 align-top"></td>
</tr>
</tbody>
</table>
</div>
<h3 class="text-text-100 mt-2 -mb-1 text-base font-bold">計算節點變成無狀態引擎</h3>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">最妙的是，這個架構讓 PostgreSQL 的計算節點從此「輕裝上陣」——備份、複製、Checkpoint 等繁重工作全部交給儲存層，計算節點只需要專心處理業務邏輯，CPU、磁碟、網路資源都省下來了。 讀取副本也不再需要各自保存一份完整的資料拷貝，瞬間就能建立新副本，且每多一個副本完全不影響主節點效能。</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">總結：從這件事可以學到什麼？</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">這篇文章最有價值的地方，不只是技術細節，而是工程師解決問題的思路： <strong>先找根本原因</strong>，而不是用重啟來掩蓋問題（TCP 壅塞控制的案例）。<strong>一步一步拆解問題</strong>，先解讀取延遲、再解讀取擴展、最後解寫入擴展。<strong>為未來設計</strong>，HorizonDB 的架構不是為了應付今天的問題，而是為了更大的明天。 PostgreSQL 在 8 億用戶的規模下能正常運行，背後是無數工程師的調校與創新。下次有人說「PostgreSQL 不能水平擴展」，你可以把這篇故事講給他聽。</h2>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]"><em>原文來源：Microsoft Community Hub — Supporting ChatGPT on PostgreSQL in Azure（2026/1/29）</em></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>注意！Claude Code Windows 路徑大搬家，3 月 12 日前務必完成設定</title>
		<link>https://superlevin.ifengyuan.tw/%e6%b3%a8%e6%84%8f%ef%bc%81claude-code-windows-%e8%b7%af%e5%be%91%e5%a4%a7%e6%90%ac%e5%ae%b6%ef%bc%8c3-%e6%9c%88-12-%e6%97%a5%e5%89%8d%e5%8b%99%e5%bf%85%e5%ae%8c%e6%88%90%e8%a8%ad%e5%ae%9a/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Tue, 24 Feb 2026 16:08:39 +0000</pubDate>
				<category><![CDATA[生活雜感]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4186</guid>

					<description><![CDATA[Anthropic 最近發出了一封重要通知：Windows 版的 Claude Code 正在進行一項「設定檔 &#8230; <a href="https://superlevin.ifengyuan.tw/%e6%b3%a8%e6%84%8f%ef%bc%81claude-code-windows-%e8%b7%af%e5%be%91%e5%a4%a7%e6%90%ac%e5%ae%b6%ef%bc%8c3-%e6%9c%88-12-%e6%97%a5%e5%89%8d%e5%8b%99%e5%bf%85%e5%ae%8c%e6%88%90%e8%a8%ad%e5%ae%9a/" class="more-link">閱讀全文<span class="screen-reader-text">〈注意！Claude Code Windows 路徑大搬家，3 月 12 日前務必完成設定〉</span></a>]]></description>
										<content:encoded><![CDATA[<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">Anthropic 最近發出了一封重要通知：<strong>Windows 版的 Claude Code 正在進行一項「設定檔路徑遷移」</strong>，而且有明確的截止日期——<strong>2026 年 3 月 12 日</strong>。如果你的公司或 IT 部門有在幫員工統一部署 Claude Code 的設定，那這件事你非得知道不可。</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">這次更新到底在改什麼？</h2>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">簡單來說，就是 Claude Code 在 Windows 上存放「企業管理設定檔」的資料夾位置換了。 這個設定檔叫做 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">managed-settings.json</code>，是企業 IT 團隊用來統一管理、控制 Claude Code 行為的重要檔案。</p>
<ul class="[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3">
<li class="whitespace-normal break-words pl-2"><strong>舊路徑（即將停用）：</strong> <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">C:\\ProgramData\\ClaudeCode\\</code></li>
<li class="whitespace-normal break-words pl-2"><strong>新路徑（請更新到這裡）：</strong> <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">C:\\Program Files\\ClaudeCode\\managed-settings.json</code> 3 月 12 日之後，系統就不會再去讀取舊路徑的檔案了。也就是說，如果你的 IT 部門沒有在期限前更新部署位置，之前設定的企業管理規則就會全部失效！</li>
</ul>
<hr class="border-border-200 border-t-0.5 my-3 mx-1.5" />
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">誰需要採取行動？</h2>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]"><strong>並不是所有人都需要動作。</strong> 這件事主要影響的是：</p>
<ul class="[li_&amp;]:mb-0 [li_&amp;]:mt-1 [li_&amp;]:gap-1 [&amp;:not(:last-child)_ul]:pb-1 [&amp;:not(:last-child)_ol]:pb-1 list-disc flex flex-col gap-1 pl-8 mb-3">
<li class="whitespace-normal break-words pl-2">公司有 IT 部門負責集中管理 Claude Code 設定的企業用戶</li>
<li class="whitespace-normal break-words pl-2">使用 MDM（行動裝置管理）或端點管理工具（例如 Intune、Jamf 等）來部署 <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">managed-settings.json</code> 的組織 如果你只是個人用戶，或是公司根本沒有部署這個設定檔，那這次更新對你沒有任何影響，不用緊張。</li>
</ul>
<hr class="border-border-200 border-t-0.5 my-3 mx-1.5" />
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">IT 同仁需要怎麼做？</h2>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">步驟其實很簡單，就一件事：</p>
<blockquote class="ml-2 border-l-4 border-border-300/10 pl-4 text-text-300">
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]"><strong>在 2026 年 3 月 12 日之前，將你的 MDM 或端點管理工具的部署路徑，更新為新的路徑：</strong> <code class="bg-text-200/5 border border-0.5 border-border-300 text-danger-000 whitespace-pre-wrap rounded-[0.4rem] px-1 py-px text-[0.9rem]">C:\\Program Files\\ClaudeCode\\managed-settings.json</code> 如果你已經完成了這個更新，那就什麼都不用再做了，大功告成！</p>
</blockquote>
<hr class="border-border-200 border-t-0.5 my-3 mx-1.5" />
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">小結</h2>
<h2 class="text-text-100 mt-3 -mb-1 text-[1.125rem] font-bold">這次的改動說複雜不複雜，說簡單也要注意別錯過截止日期。如果你負責公司的 IT 管理，記得趕快去確認部署設定有沒有更新；如果你只是一般使用者，把這篇文章轉給你的 IT 同事就對了！ 總之，<strong>3 月 12 日</strong>這個日期記起來，別讓企業設定白白失效了。</h2>
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]"><em>資料來源：Anthropic 官方通知信件</em></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Antoropic claude 5x 跟 20x 方案差別?到底那個划算?有工程師算出來了!!</title>
		<link>https://superlevin.ifengyuan.tw/antoropic-claude-5x-20x-which-better/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Mon, 23 Feb 2026 10:47:53 +0000</pubDate>
				<category><![CDATA[程式設計]]></category>
		<category><![CDATA[anthropic]]></category>
		<category><![CDATA[claude code]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4182</guid>

					<description><![CDATA[原文: https://she-llac.com/claude-limits故事是這樣開始的…… 話說有個工程 &#8230; <a href="https://superlevin.ifengyuan.tw/antoropic-claude-5x-20x-which-better/" class="more-link">閱讀全文<span class="screen-reader-text">〈Antoropic claude 5x 跟 20x 方案差別?到底那個划算?有工程師算出來了!!〉</span></a>]]></description>
										<content:encoded><![CDATA[<h2 class="md-end-block md-heading"><span class="md-plain">原文: <a href="https://she-llac.com/claude-limits">https://she-llac.com/claude-limits</a></span><span class="md-plain">故事是這樣開始的……</span></h2>
<p class="md-end-block md-p"><span class="md-plain">話說有個工程師，平常就是那種會把什麼都拆開來看的人。他在用 Claude 的時候心裡一直有個疑問：</span></p>
<blockquote>
<p class="md-end-block md-p"><span class="md-plain">「Anthropic 說 Max 20× 方案有 20 倍用量，但……20 倍是哪個 20 倍啊？」</span></p>
</blockquote>
<p class="md-end-block md-p"><span class="md-plain">於是他開始挖。沒想到，他在 API 的回應資料裡發現了一個「忘記四捨五入」的小數：</span></p>
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-pair-s" spellcheck="false"><code>0.16327272727272726</code></span></strong></span></p>
<p class="md-end-block md-p"><span class="md-plain">一般人看到這個數字：「哦，好像是 16% 左右。」</span></p>
<p class="md-end-block md-p"><span class="md-plain">這位工程師看到這個數字：「等等，這個數字精確得有點可疑……」</span></p>
<p class="md-end-block md-p"><span class="md-plain">然後他就把 Claude 的整個內部計費系統給挖出來了。就這樣。</span></p>
<div class="md-hr md-end-block" tabindex="-1">
<hr />
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">先說結論：誰才是真正划算的方案？</span></h2>
<p class="md-end-block md-p"><span class="md-plain">作者把幾個方案的「實際用量」給算清楚了，結果讓人頗為傻眼：</span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">每 5 小時的用量上限</span></h3>
<figure class="md-table-fig table-figure">
<table class="md-table">
<thead>
<tr class="md-end-block">
<th><span class="td-span"><span class="md-plain">方案</span></span></th>
<th><span class="td-span"><span class="md-plain">官方說幾倍</span></span></th>
<th><span class="td-span"><span class="md-plain">實際幾倍</span></span></th>
</tr>
</thead>
<tbody>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-plain">Pro</span></span></td>
<td><span class="td-span"><span class="md-plain">基準</span></span></td>
<td><span class="td-span"><span class="md-plain">基準</span></span></td>
</tr>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">Max 5×</span></strong></span></span></td>
<td><span class="td-span"><span class="md-plain">5 倍</span></span></td>
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">實際 6 倍！</span></strong></span></span></td>
</tr>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-plain">Max 20×</span></span></td>
<td><span class="td-span"><span class="md-plain">20 倍</span></span></td>
<td><span class="td-span"><span class="md-plain">20 倍（這次沒騙人）</span></span></td>
</tr>
</tbody>
</table>
</figure>
<h3 class="md-end-block md-heading"><span class="md-plain">每週的用量上限</span></h3>
<figure class="md-table-fig table-figure">
<table class="md-table">
<thead>
<tr class="md-end-block">
<th><span class="td-span"><span class="md-plain">方案</span></span></th>
<th><span class="td-span"><span class="md-plain">官方說幾倍</span></span></th>
<th><span class="td-span"><span class="md-plain">實際幾倍</span></span></th>
</tr>
</thead>
<tbody>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-plain">Pro</span></span></td>
<td><span class="td-span"><span class="md-plain">基準</span></span></td>
<td><span class="td-span"><span class="md-plain">基準</span></span></td>
</tr>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">Max 5×</span></strong></span></span></td>
<td><span class="td-span"><span class="md-plain">5 倍</span></span></td>
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">實際 8.33 倍！</span></strong></span></span></td>
</tr>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-plain">Max 20×</span></span></td>
<td><span class="td-span"><span class="md-plain">20 倍</span></span></td>
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">實際只有 16.67 倍…</span></strong></span></span></td>
</tr>
</tbody>
</table>
</figure>
<p class="md-end-block md-p"><span class="md-plain">看到了嗎？</span><span class="md-pair-s "><strong><span class="md-plain">Max 5× 根本是在送福利</span></strong></span><span class="md-plain">，每週用量比官方宣稱的多了超過六成！</span></p>
<p class="md-end-block md-p"><span class="md-plain">反觀 Max 20× 就比較尷尬了——每 5 小時確實給你 20 倍，但每週的總量上限，說好的 20 倍，實際只有 16.67 倍。更糟的是，Max 20× 每週能做的事，也只有 Max 5× 的兩倍，但價格卻是兩倍。所以 CP 值根本沒有更好。</span></p>
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">結論：Max 5× 才是甜蜜點，Max 20× 的星號（</span>*<span class="md-plain">）是有原因的。</span></strong></span></p>
<div class="md-hr md-end-block" tabindex="-1">
<hr />
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">跟直接用 API 比呢？</span></h2>
<p class="md-end-block md-p"><span class="md-plain">好，那如果你是開發者，直接用 Anthropic 的 API 付錢，跟買訂閱方案比起來差多少？</span></p>
<figure class="md-table-fig table-figure">
<table class="md-table">
<thead>
<tr class="md-end-block">
<th><span class="td-span"><span class="md-plain">方案</span></span></th>
<th><span class="td-span"><span class="md-plain">你付多少</span></span></th>
<th><span class="td-span"><span class="md-plain">等於 API 費用多少</span></span></th>
<th><span class="td-span"><span class="md-plain">賺了幾倍</span></span></th>
</tr>
</thead>
<tbody>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-plain">Pro</span></span></td>
<td><span class="td-span"><span class="md-plain">$20/月</span></span></td>
<td><span class="td-span"><span class="md-plain">$163/月</span></span></td>
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">賺 8 倍</span></strong></span></span></td>
</tr>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-plain">Max 5×</span></span></td>
<td><span class="td-span"><span class="md-plain">$100/月</span></span></td>
<td><span class="td-span"><span class="md-plain">$1,354/月</span></span></td>
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">賺 13.5 倍</span></strong></span></span></td>
</tr>
<tr class="md-end-block">
<td><span class="td-span"><span class="md-plain">Max 20×</span></span></td>
<td><span class="td-span"><span class="md-plain">$200/月</span></span></td>
<td><span class="td-span"><span class="md-plain">$2,708/月</span></span></td>
<td><span class="td-span"><span class="md-pair-s "><strong><span class="md-plain">賺 13.5 倍</span></strong></span></span></td>
</tr>
</tbody>
</table>
</figure>
<p class="md-end-block md-p"><span class="md-plain">也就是說，你花 100 塊買 Max 5×，等於在 API 上用了 1,354 塊的量。</span></p>
<p class="md-end-block md-p"><span class="md-plain">這還只是「保守估計」。因為有個東西叫做</span><span class="md-pair-s "><strong><span class="md-plain">快取（Cache）</span></strong></span><span class="md-plain">：</span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">你和 Claude 聊天時，之前說過的話會被暫存起來（快取）。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">下次 Claude 回答時，可以直接讀取快取，不用重新處理。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">用 API 的話：讀快取也要付費（收正常費用的 10%）。</span></strong></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">用訂閱方案的話：讀快取完全免費！</span></strong></span></p>
</li>
</ul>
<p class="md-end-block md-p"><span class="md-plain">如果你在用 Claude Code（讓 Claude 自動幫你寫程式、改程式），每次它呼叫工具、做操作，都會重複讀取大量快取。這種情況下，訂閱方案的實際效益可以高達 </span><span class="md-pair-s "><strong><span class="md-plain">API 費用的 36.7 倍</span></strong></span><span class="md-plain">。</span></p>
<p class="md-end-block md-p"><span class="md-plain">三十六點七倍。你沒看錯。</span></p>
<div class="md-hr md-end-block" tabindex="-1">
<hr />
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">他到底是怎麼挖出這些數字的？</span></h2>
<p class="md-end-block md-p"><span class="md-plain">這才是文章最有趣的部分，來聽工程師辦案過程：</span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">第一步：發現可疑現場</span></h3>
<p class="md-end-block md-p"><span class="md-plain">作者做了個 Chrome 擴充套件，方便自己查看 Claude 的使用量。在研究過程中，他發現 Claude 在生成回應時，會在背景偷偷傳一個數字給瀏覽器，代表「你已經用掉的比例」，長這樣：</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="" spellcheck="false"> <span role="presentation">0.16327272727272726</span></pre>
<p class="md-end-block md-p"><span class="md-plain">一個正常工程師會把這個數字四捨五入，顯示成「16%」就好了。但 Anthropic 的工程師忘了這樣做，把原始數字直接送出來了。</span></p>
<p class="md-end-block md-p"><span class="md-plain">而這個原始數字，其實是：</span><span class="md-pair-s "><strong><span class="md-plain">你用掉的量 ÷ 總上限</span></strong></span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">第二步：用數學魔法還原分數</span></h3>
<p class="md-end-block md-p"><span class="md-plain">這個小數點背後，藏的是一個分數。比如 </span><span class="md-pair-s" spellcheck="false"><code>0.5</code></span><span class="md-plain"> 背後是 </span><span class="md-pair-s" spellcheck="false"><code>1/2</code></span><span class="md-plain">，</span><span class="md-pair-s" spellcheck="false"><code>0.333...</code></span><span class="md-plain"> 背後是 </span><span class="md-pair-s" spellcheck="false"><code>1/3</code></span><span class="md-plain">。</span></p>
<p class="md-end-block md-p"><span class="md-plain">但 </span><span class="md-pair-s" spellcheck="false"><code>0.16327272727272726</code></span><span class="md-plain"> 背後是什麼？</span></p>
<p class="md-end-block md-p"><span class="md-plain">作者用了一個叫做 </span><span class="md-pair-s "><strong><span class="md-plain">Stern-Brocot 樹</span></strong></span><span class="md-plain"> 的數學演算法。這個方法就像在玩「猜數字」遊戲，但它特別聰明——它會優先猜「簡單」的分數，因為電腦系統內部用的數字通常都是整數，分母不會是天文數字。</span></p>
<p class="md-end-block md-p"><span class="md-plain">這個演算法跑了幾十步之後，找到了答案：</span></p>
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">449 / 2750</span></strong></span></p>
<p class="md-end-block md-p"><span class="md-plain">驗算：449 ÷ 2750 = </span><span class="md-pair-s" spellcheck="false"><code>0.16327272727272726</code></span><span class="md-plain"> ✓ 完美吻合！</span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">第三步：收集更多證據，確認總上限</span></h3>
<p class="md-end-block md-p"><span class="md-plain">分母 2750 是什麼意思？就是那個時間點的「總上限比例分母」，但因為分數會被化簡，不一定是真正的上限。</span></p>
<p class="md-end-block md-p"><span class="md-plain">所以作者在不同的使用量下，重複採樣了很多次，對所有還原出的分母取</span><span class="md-pair-s "><strong><span class="md-plain">最小公倍數（LCM）</span></strong></span><span class="md-plain">。</span></p>
<p class="md-end-block md-p"><span class="md-plain">當這個最小公倍數不再增加的時候，答案就出現了：</span><span class="md-pair-s "><strong><span class="md-plain">3,300,000</span></strong></span></p>
<p class="md-end-block md-p"><span class="md-plain">這就是 Max 5× 方案每 5 小時的真實 Credits 上限。</span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">第四步：搞清楚「Credits 是什麼」</span></h3>
<p class="md-end-block md-p"><span class="md-plain">知道了上限之後，還要知道「每次對話到底會消耗多少 Credits」。這部分作者就靠老派方法了：大量手動測試、記錄數據、列表格、盯著看、問 Claude、問 GPT、提假設、驗證假設……</span></p>
<p class="md-end-block md-p"><span class="md-plain">最後他得出了這個公式：</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="" spellcheck="false"> <span role="presentation">消耗的 Credits = 無條件進位（輸入 Token × 輸入費率 + 輸出 Token × 輸出費率）</span></pre>
<p class="md-end-block md-p"><span class="md-plain">費率的部分，跟 API 定價的比例完全一致：Opus 最貴、Haiku 最便宜，輸出 Token 是輸入的 5 倍。</span></p>
<div class="md-hr md-end-block" tabindex="-1">
<hr />
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">這件事告訴我們什麼？</span></h2>
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">對使用者的啟示：</span></strong></span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">能買訂閱方案就買，CP 值遠勝 API。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Max 5× 是最划算的選擇，Max 20× 沒有成比例地更好。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">如果你在跑 AI 代理程式（像 Claude Code），省下的快取費用更是驚人。</span></p>
</li>
</ul>
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">對工程師的啟示：</span></strong></span></p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">側通道洩漏（Side Channel Leak）真的無所不在。Anthropic 只是忘了把兩個數字四捨五入，結果被人把整個計費架構給挖出來了。</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">這不是駭客攻擊，不需要入侵任何系統，只需要一點數學和一點好奇心。</span></p>
</li>
</ul>
<div class="md-hr md-end-block" tabindex="-1">
<hr />
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">最後</span></h2>
<p class="md-end-block md-p"><span class="md-plain">作者在文章結尾說了一句話，頗有意思：</span></p>
<blockquote>
<p class="md-end-block md-p"><span class="md-plain">「截至撰文時，那兩個浮點數還沒有被四捨五入。我猜如果這篇文章引起足夠的關注，這種情況可能不會持續太久。到時候我會有點難過，因為這樣我的擴充套件就沒辦法那麼精準了。」</span></p>
</blockquote>
<p class="md-end-block md-p"><span class="md-plain">翻譯成白話就是：</span><span class="md-pair-s "><strong><span class="md-plain">「我剛剛把 Anthropic 的底細公開在網路上，我猜他們很快就會把漏洞補起來，然後我的工具就沒這麼好用了。但這篇文章我還是要發。」</span></strong></span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">工程師的浪漫，大概就是這樣吧。</span></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>解決 Vite 專案中 ngrok 連線失敗的「安全門檻」</title>
		<link>https://superlevin.ifengyuan.tw/%e8%a7%a3%e6%b1%ba-vite-%e5%b0%88%e6%a1%88%e4%b8%ad-ngrok-%e9%80%a3%e7%b7%9a%e5%a4%b1%e6%95%97%e7%9a%84%e3%80%8c%e5%ae%89%e5%85%a8%e9%96%80%e6%aa%bb%e3%80%8d/</link>
		
		<dc:creator><![CDATA[林壽山]]></dc:creator>
		<pubDate>Mon, 23 Feb 2026 05:45:40 +0000</pubDate>
				<category><![CDATA[程式設計]]></category>
		<category><![CDATA[DNS REBIND]]></category>
		<category><![CDATA[ngrok]]></category>
		<category><![CDATA[vite]]></category>
		<guid isPermaLink="false">https://superlevin.ifengyuan.tw/?p=4180</guid>

					<description><![CDATA[最近有團隊成員在進行外部對接調試時，反應使用 ngrok 進行內網穿透時，遇到了連線被阻擋的問題。這其實不是  &#8230; <a href="https://superlevin.ifengyuan.tw/%e8%a7%a3%e6%b1%ba-vite-%e5%b0%88%e6%a1%88%e4%b8%ad-ngrok-%e9%80%a3%e7%b7%9a%e5%a4%b1%e6%95%97%e7%9a%84%e3%80%8c%e5%ae%89%e5%85%a8%e9%96%80%e6%aa%bb%e3%80%8d/" class="more-link">閱讀全文<span class="screen-reader-text">〈解決 Vite 專案中 ngrok 連線失敗的「安全門檻」〉</span></a>]]></description>
										<content:encoded><![CDATA[<p data-path-to-node="4">最近有團隊成員在進行外部對接調試時，反應使用 <b data-path-to-node="4" data-index-in-node="23">ngrok</b> 進行內網穿透時，遇到了連線被阻擋的問題。這其實不是 ngrok 的服務異常，而是 Vite 在升級到新版本後，為了防禦 <b data-path-to-node="4" data-index-in-node="89">DNS Rebinding（DNS 再綁定攻擊）</b> 所加強的安全檢查機制。</p>
<h3 data-path-to-node="5"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6e0.png" alt="🛠" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 解決方案</h3>
<p data-path-to-node="6">如果你的 ngrok 網址顯示攔截，請直接檢查你的 <code data-path-to-node="6" data-index-in-node="26">vite.config.ts</code>。你必須顯式地將 ngrok 提供的 domain 加入「允許名單」中：</p>
<div class="code-block ng-tns-c1777686984-31 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahcKEwjDtqvX8-6SAxUAAAAAHQAAAAAQcw">
<div class="code-block-decoration header-formatted gds-title-s ng-tns-c1777686984-31 ng-star-inserted"><span class="ng-tns-c1777686984-31">TypeScript</span></p>
<div class="buttons ng-tns-c1777686984-31 ng-star-inserted"></div>
</div>
<div class="formatted-code-block-internal-container ng-tns-c1777686984-31">
<div class="animated-opacity ng-tns-c1777686984-31">
<pre class="ng-tns-c1777686984-31"><code class="code-container formatted ng-tns-c1777686984-31" role="text" data-test-id="code-content"><span class="hljs-comment">// vite.config.ts</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> defineConfig({
  <span class="hljs-attr">server</span>: {
    <span class="hljs-attr">allowedHosts</span>: [
      <span class="hljs-string">'a134-211-72-118-118.ngrok-free.app'</span> <span class="hljs-comment">// 替換為你當前的 ngrok 網址</span>
    ]
  }
})
</code></pre>
</div>
</div>
</div>
<h3 data-path-to-node="8"> 為什麼我們要關注這個設定？</h3>
<p data-path-to-node="9">從<b data-path-to-node="9" data-index-in-node="1">公司治理</b>與<b data-path-to-node="9" data-index-in-node="6">資安維護</b>的角度來看，這項調整背後有兩個關鍵思考：</p>
<ol start="1" data-path-to-node="10">
<li>
<p data-path-to-node="10,0,0"><b data-path-to-node="10,0,0" data-index-in-node="0">防止 Host Header 攻擊</b>：Vite 預設不再信任隨機的 Host 請求。這能有效避免惡意網站利用瀏覽器漏洞，在使用者不知情的狀況下，與本地開發環境通訊並竊取原始碼或環境變數。</p>
</li>
<li>
<p data-path-to-node="10,1,0"><b data-path-to-node="10,1,0" data-index-in-node="0">開發環境的最小權限原則</b>：雖然 ngrok 方便，但隨意開放外部存取內網環境是有風險的。透過 <code data-path-to-node="10,1,0" data-index-in-node="46">allowedHosts</code> 的明確宣告，我們能確保開發者清楚知道哪些外部網域正在與本地服務互動。</p>
</li>
</ol>
<h3 data-path-to-node="11"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4e2.png" alt="📢" class="wp-smiley" style="height: 1em; max-height: 1em;" />技術小提醒</h3>
<p data-path-to-node="12">在測試結束後，記得將該設定移除或將其移至 <code data-path-to-node="12" data-index-in-node="21">.env</code> 進行管理，<b data-path-to-node="12" data-index-in-node="31">切勿將特定 ngrok 網址永久硬編碼在 code 中並推上主分支</b>，保持乾淨且安全的 Repo 是每一位資深工程師的素養。</p>
<p data-path-to-node="13">祝大家今天開發順利，Bug 自由！</p>
<p data-path-to-node="14">#Vite #ngrok #FrontendDevelopment #資安意識 #DNSRebinding #軟體研發管理 #WebSecurity #TypeScript</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
