<?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/ja/categories/ci-cd/</link><description>Recent content in Ci-Cd on 技術・ゲーム・分かりやすく</description><generator>Hugo -- gohugo.io</generator><language>ja</language><copyright>たかおの解説</copyright><lastBuildDate>Thu, 20 Nov 2025 00:00:00 +0900</lastBuildDate><atom:link href="https://takao.blog/ja/categories/ci-cd/index.xml" rel="self" type="application/rss+xml"/><item><title>GitHub Actionsの実行速度を上げるキャッシュアクションの活用法</title><link>https://takao.blog/ja/web/github-actions-caching-setup/</link><pubDate>Thu, 20 Nov 2025 00:00:00 +0900</pubDate><guid>https://takao.blog/ja/web/github-actions-caching-setup/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/github-actions-caching-setup.png" alt="Featured image of post GitHub Actionsの実行速度を上げるキャッシュアクションの活用法" /&gt;&lt;p&gt;GitHub ActionsなどのCI/CDツールは、プルリクエストの作成時やメインブランチへのプッシュ時に自動的にテストやビルドを実行し、コードの安全性を担保してくれます。しかし、毎回「コンテナの起動」「外部依存パッケージ（&lt;code&gt;node_modules&lt;/code&gt; など）のゼロからのダウンロード」「全ビルドプロセスの再実行」を繰り返していると、ジョブの実行時間は数分以上に膨れ上がります。&lt;/p&gt;
&lt;p&gt;これにより、CIの完了待ち時間が長くなり、開発の流れが止まるほか、GitHub Actionsの利用料金（実行時間ベース）も増加してしまいます。&lt;/p&gt;
&lt;p&gt;本記事では、GitHub公式のキャッシュアクションを活用し、CIパイプラインの実行速度を劇的に高速化させる設定方法を解説します。&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="1-キャッシュの仕組みと方針"&gt;1. キャッシュの仕組みと方針
&lt;/h2&gt;&lt;p&gt;GitHub Actionsにおけるキャッシュとは、**「あるワークフロー実行時にダウンロード・生成したファイルをGitHub側のストレージに保存し、次回実行時にそれをリストアして再利用する」**仕組みです。&lt;/p&gt;
&lt;p&gt;特に時間のかかる以下の処理に対してキャッシュが効果的です。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;npm, yarn, pnpm などの依存パッケージ（&lt;code&gt;~/.npm&lt;/code&gt; フォルダ）&lt;/li&gt;
&lt;li&gt;Next.js や Nuxt.js などのフレームワークのビルドキャッシュ（&lt;code&gt;.next/cache&lt;/code&gt; フォルダ）&lt;/li&gt;
&lt;li&gt;各種コンパイラ（Go、Rust等）のビルド中間ファイル&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="2-nodejs-npm--yarn-での簡単な設定方法"&gt;2. Node.js (npm / yarn) での簡単な設定方法
&lt;/h2&gt;&lt;p&gt;最も手軽に導入できるのが、GitHub公式の &lt;code&gt;actions/setup-node&lt;/code&gt; アクションに内蔵されているキャッシュ機能です。現在はこのワンライナー指定がベストプラクティスとなっています。&lt;/p&gt;
&lt;h3 id="npmプロジェクトでのワークフロー設定例githubworkflowsciyml"&gt;npmプロジェクトでのワークフロー設定例（&lt;code&gt;.github/workflows/ci.yml&lt;/code&gt;）：
&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;# キャッシュ対象として npm を指定&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;# package-lock.jsonのハッシュをもとにキャッシュが判定され、&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt; &lt;span style="color:#75715e"&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;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; を指定するだけで、それぞれのパッケージマネージャーに合わせた最適化キャッシュが自動で適用されます。&lt;/p&gt;</description></item></channel></rss>