<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Ci-Cd on 技術、遊戲、生活通俗易懂的解釋</title><link>https://takao.blog/zh-tw/categories/ci-cd/</link><description>Recent content in Ci-Cd on 技術、遊戲、生活通俗易懂的解釋</description><generator>Hugo -- gohugo.io</generator><language>zh-tw</language><copyright>Commentary of Takao</copyright><lastBuildDate>Thu, 20 Nov 2025 00:00:00 +0900</lastBuildDate><atom:link href="https://takao.blog/zh-tw/categories/ci-cd/index.xml" rel="self" type="application/rss+xml"/><item><title>透過 actions/cache 加速 GitHub Actions 工作流程</title><link>https://takao.blog/zh-tw/web/github-actions-caching-setup/</link><pubDate>Thu, 20 Nov 2025 00:00:00 +0900</pubDate><guid>https://takao.blog/zh-tw/web/github-actions-caching-setup/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/github-actions-caching-setup-zh-tw.png" alt="Featured image of post 透過 actions/cache 加速 GitHub Actions 工作流程" /&gt;&lt;p&gt;自動化 CI/CD 管道（如 GitHub Actions）是現代軟體品質控制的基石。但是，如果您的工作流程在每個拉取請求上獲取外部套件、啟動容器環境並從頭開始重建整個應用程序，則執行時間可能會迅速增加到幾分鐘。&lt;/p&gt;
&lt;p&gt;較長的回饋循環會降低開發人員的工作效率並導致更高的計費成本。&lt;/p&gt;
&lt;p&gt;在本文中，我們將示範如何利用 GitHub 的官方快取機制將您的工作流程從幾分鐘加快到幾秒鐘。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-github-actions-中的快取如何運作"&gt;1. GitHub Actions 中的快取如何運作
&lt;/h2&gt;&lt;p&gt;GitHub Actions 快取將檔案（例如套件依賴項和建置輸出）儲存到 GitHub 管理的安全儲存層。在後續運行中，運行程式將恢復這些目錄，而不是重新下載或編譯它們。&lt;/p&gt;
&lt;p&gt;快取對於以下方面非常有效：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;包管理器快取資料夾（例如 &lt;code&gt;.npm&lt;/code&gt; 或 &lt;code&gt;yarn&lt;/code&gt; 快取）。&lt;/li&gt;
&lt;li&gt;Web 框架建置目標（例如 Next.js 中的 &lt;code&gt;.next/cache&lt;/code&gt;）。&lt;/li&gt;
&lt;li&gt;編譯器中間體（Rust 目標目錄、Go 建置快取）。&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="2-使用-setup--操作進行本機包緩存"&gt;2. 使用 &lt;code&gt;setup-*&lt;/code&gt; 操作進行本機包緩存
&lt;/h2&gt;&lt;p&gt;為 Node.js 等運行時環境啟用快取的最簡單方法是透過 GitHub 官方設定操作中的整合選項。&lt;/p&gt;
&lt;h3 id="使用-npm-githubworkflowsciyml-的-nodejs-專案的範例工作流程"&gt;使用 npm (&lt;code&gt;.github/workflows/ci.yml&lt;/code&gt;) 的 Node.js 專案的範例工作流程：
&lt;/h3&gt;&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#f92672"&gt;name&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;CI&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#f92672"&gt;on&lt;/span&gt;: [&lt;span style="color:#ae81ff"&gt;push, pull_request]&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;&lt;span style="color:#f92672"&gt;jobs&lt;/span&gt;:
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;build&lt;/span&gt;:
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;runs-on&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;ubuntu-latest&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;steps&lt;/span&gt;:
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; - &lt;span style="color:#f92672"&gt;name&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;Checkout repository&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;uses&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;actions/checkout@v4&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; - &lt;span style="color:#f92672"&gt;name&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;Set up Node.js&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;uses&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;actions/setup-node@v4&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;with&lt;/span&gt;:
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;node-version&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;20&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#75715e"&gt;# Enable automatic caching for npm dependencies&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;cache&lt;/span&gt;: &lt;span style="color:#e6db74"&gt;&amp;#39;npm&amp;#39;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#75715e"&gt;# Automatically restores dependency cache mapping package-lock.json hashes&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; - &lt;span style="color:#f92672"&gt;name&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;Install dependencies&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;run&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;npm ci&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; - &lt;span style="color:#f92672"&gt;name&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;Run test&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#f92672"&gt;run&lt;/span&gt;: &lt;span style="color:#ae81ff"&gt;npm test&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;只需設定 &lt;code&gt;cache: 'yarn'&lt;/code&gt; 或 &lt;code&gt;cache: 'pnpm'&lt;/code&gt; 即可分別處理 Yarn 和 pnpm 設置，無需任何其他配置。&lt;/p&gt;</description></item></channel></rss>