<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>GitLab CI｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/gitlab-ci/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>GitLab CI｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/gitlab-ci/</link><width>144</width><height>144</height></image>
    <description>林鼎淵（Dean Lin）的部落格：生成式 AI 企業內訓講師、外商資安公司軟體專家、7 本書作者。400 多篇文章用白話分享生成式 AI 實戰、Claude Code 與 Vibe Coding 教學、團隊合作與職場成長。</description>
    <generator>Hugo</generator>
    <language>zh-tw</language>
    <copyright>© 2020–2026 林鼎淵 Dean Lin</copyright>
    <lastBuildDate>Mon, 02 Dec 2024 18:17:56 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/gitlab-ci/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>GitLab CI 實戰（踩坑）筆記</title>
      <link>https://deanlin.net/blog/202412/gitlab-ci-notes/</link>
      <pubDate>Mon, 02 Dec 2024 18:17:56 +0800</pubDate>
      <guid>https://deanlin.net/blog/202412/gitlab-ci-notes/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>技術教學</category>
      <description>GitLab CI 是 GitLab 的內建工具，每次 Push 都會觸發一次腳本執行，內容通常涵蓋測試、編譯、部署等一系列自定義內容。 這篇文章會分享設計上要注意的細節，以及實戰過程踩過的坑。</description>
      <media:content url="https://deanlin.net/blog/202412/gitlab-ci-notes/images/gitlab-ci-notes-og_hu_93c7e0cda81c9d07.jpg" medium="image" type="image/jpeg" width="1200" height="675" />
      <content:encoded><![CDATA[<p>GitLab CI 是 GitLab 的內建工具，每次 Push 都會觸發一次腳本執行，內容通常涵蓋測試、編譯、部署等一系列自定義內容。</p>
<p>這篇文章會分享設計上要注意的細節，以及實戰過程踩過的坑，不會特別說明基礎資訊，想更深入理解的朋友可以參考<a href="https://docs.gitlab.com/ee/ci/">官網文件</a>；如果讀者有更好的方案，或對名詞有更精準的定義，歡迎留言分享。</p>
<p><img src="https://deanlin.net/blog/202412/gitlab-ci-notes/images/gitlab-ci-notes-01.webp" width="1400" height="775" alt="GitLab CI 實戰（踩坑）筆記（圖 1）" fetchpriority="high" decoding="async"></p>
<pre tabindex="0"><code>文章大綱

▋ GitLab CI 資料夾結構設計
▋ 在 .gitlab/.default.gitlab-ci.yml 定義要執行 pipeline 的 Branchs
▋ 根據專案需求定義對應的 Stages
▋ 想在不同 stage 傳遞資料時，artifacts 跟 cache 的使用時機
▋ 讓 stage 下的 job 並行執行 or 順序執行
▋ notify 階段建議要有的資訊
▋ Dockerfile 多階段構建
▋ 其他的坑（套件安裝、相容性、單元測試）
</code></pre><h2 id="-gitlab-ci-資料夾結構設計">GitLab CI 資料夾結構設計<a class="h-anchor" href="#-gitlab-ci-%e8%b3%87%e6%96%99%e5%a4%be%e7%b5%90%e6%a7%8b%e8%a8%ad%e8%a8%88" aria-label="這個段落的連結"></a></h2>
<pre tabindex="0"><code>Project
├── .gitlab-ci.yml
└── .gitlab
    ├── stages
    │   ├── 1.xxx.yml
    │   └── 2.xxx.yml
    ├── .default.gitlab-ci.yml
    └── docker-bake.hcl
</code></pre><p>下面說明一下資料夾結構下各檔案要負責的任務：</p>
<ul>
<li><strong>.gitlab-ci.yml</strong>: 定義有要執行的 stages，以及參考的 yml 檔案（ex: <code>.gitlab/.default.gitlab-ci.yml</code>）。</li>
<li><strong>.gitlab</strong>: 存放 GitLab 設定檔的資料夾。</li>
<li><strong>.gitlab/stages</strong>: 存放各 stage 的資料夾，讓邏輯更容易維護。</li>
<li><strong>.gitlab/stages/xxx.yml</strong>: 定義 stage 下各 jobs 要執行的任務。</li>
<li><strong>.gitlab/.default.gitlab-ci.yml</strong>: 用來定義默認的設定，避免重複性的工作（ex: 設定通用的 <code>variables</code>、定義要執行 pipeline 的 branchs）。</li>
<li><strong>.gitlab/docker-bake.hcl</strong>: 定義 Build Docker Image 的資訊（ex: 支援多平台、傳遞參數）。</li>
</ul>
<hr>
<h2 id="-在-gitlabdefaultgitlab-ciyml-定義要執行-pipeline-的-branchs">在 .gitlab/.default.gitlab-ci.yml 定義要執行 pipeline 的 Branchs<a class="h-anchor" href="#-%e5%9c%a8-gitlabdefaultgitlab-ciyml-%e5%ae%9a%e7%be%a9%e8%a6%81%e5%9f%b7%e8%a1%8c-pipeline-%e7%9a%84-branchs" aria-label="這個段落的連結"></a></h2>
<p>僅管我們期待每次 Push 一版都會觸發 pipeline，但有時也會有一些例外狀況（ex: 需要高頻率 Push 測試一些特殊功能）。</p>
<p>以下面的設計來說，就是僅允許「merge_request_event」以及「release/<em>、hotfix/</em>、feature/*」，還有 Default Branch（ex: master、develop）會觸發 pipeline。</p>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#7ee787">workflow</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">rules</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#7ee787">if</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">&#39;$CI_PIPELINE_SOURCE == &#34;merge_request_event&#34;&#39;</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#7ee787">if</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">&#39;$CI_COMMIT_BRANCH =~ /^release\/.*$/&#39;</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#7ee787">if</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">&#39;$CI_COMMIT_BRANCH =~ /^hotfix\/.*$/&#39;</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#7ee787">if</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">&#39;$CI_COMMIT_BRANCH =~ /^feature\/.*$/&#39;</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#7ee787">if</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">&#39;$CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH&#39;</span><span style="color:#6e7681">
</span></span></span></code></pre></div><hr>
<h2 id="-根據專案需求定義對應的-stages">根據專案需求定義對應的 Stages<a class="h-anchor" href="#-%e6%a0%b9%e6%93%9a%e5%b0%88%e6%a1%88%e9%9c%80%e6%b1%82%e5%ae%9a%e7%be%a9%e5%b0%8d%e6%87%89%e7%9a%84-stages" aria-label="這個段落的連結"></a></h2>
<p>筆者習慣設計下面 5 個 Stages:</p>
<ul>
<li><strong>init</strong>: 在這個階段做套件安裝的任務（ex: npm install）。</li>
<li><strong>analysis</strong>: 如果 init 順利才會進入這個階段，會在這裡進行單元測試(test)、Coding Style 檢查(lint)，並將對應的 report 保存到 artifacts 當中。</li>
<li><strong>build_image</strong>: 如果前面都通過才會 Build Docker Image，並將 $TARGET_IMAGE:$TAG 保存到 artifacts/tags.txt 當中（要在 notify 階段使用）。</li>
<li><strong>notify</strong>: 我將它設定為 always 執行，用來傳送 pipeline 成功/失敗的訊息到對應的 Chanel（ex: Zoom、Teams、Line）。</li>
<li><strong>deploy</strong>: 根據實際需求設計部署流程。</li>
</ul>
<hr>
<h2 id="-想在不同-stage-傳遞資料時artifacts-跟-cache-的使用時機">想在不同 stage 傳遞資料時，artifacts 跟 cache 的使用時機<a class="h-anchor" href="#-%e6%83%b3%e5%9c%a8%e4%b8%8d%e5%90%8c-stage-%e5%82%b3%e9%81%9e%e8%b3%87%e6%96%99%e6%99%82artifacts-%e8%b7%9f-cache-%e7%9a%84%e4%bd%bf%e7%94%a8%e6%99%82%e6%a9%9f" aria-label="這個段落的連結"></a></h2>
<p>上個 stage 做完的事情，在下個 stage 是不會知道細節的。</p>
<p>想要傳遞資訊就需要透過 artifacts 或 cache，而這兩者的用途不太一樣：</p>
<ul>
<li><strong>artifacts</strong>: 記錄這次 pipeline 獨有的資訊，像是 test report、image_id 這類的，建議要設定對應的 expire_in 時間，否則資料會永久保存消耗硬碟空間。</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#7ee787">analysis</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">artifacts</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span><span style="color:#7ee787">paths</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">      </span>- <span style="color:#a5d6ff">reports</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span><span style="color:#7ee787">expire_in</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">1</span><span style="color:#6e7681"> </span><span style="color:#a5d6ff">day</span><span style="color:#6e7681">
</span></span></span></code></pre></div><ul>
<li><strong>cache</strong>: 這個專案經常使用的資料，比如 node_modules 這類保存套件的資料夾。</li>
</ul>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#7ee787">analysis</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">cache</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span><span style="color:#7ee787">key</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">&#34;${CI_PROJECT_PATH_SLUG}&#34;</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span><span style="color:#7ee787">paths</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">      </span>- <span style="color:#a5d6ff">node_modules</span><span style="color:#6e7681">
</span></span></span></code></pre></div><hr>
<h2 id="-讓-stage-下的-job-並行執行-or-順序執行">讓 stage 下的 job 並行執行 or 順序執行<a class="h-anchor" href="#-%e8%ae%93-stage-%e4%b8%8b%e7%9a%84-job-%e4%b8%a6%e8%a1%8c%e5%9f%b7%e8%a1%8c-or-%e9%a0%86%e5%ba%8f%e5%9f%b7%e8%a1%8c" aria-label="這個段落的連結"></a></h2>
<p>如果沒有特別設計，stage 下的 job 默認都是並行執行的（比如 unit test &amp; lint 可以同時進行）；如果想要順序執行，可以透過 needs 來設定，範例如下：</p>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#7ee787">job1</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">stage</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">build</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">script</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#a5d6ff">echo &#34;Executing job1&#34;</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#7ee787">job2</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">stage</span>:<span style="color:#6e7681"> </span><span style="color:#a5d6ff">build</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">script</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#a5d6ff">echo &#34;Executing job2&#34;</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">  </span><span style="color:#7ee787">needs</span>:<span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">    </span>- <span style="color:#a5d6ff">job1 </span><span style="color:#6e7681"> </span><span style="color:#8b949e;font-style:italic"># 等待 job1 完成後執行</span><span style="color:#6e7681">
</span></span></span></code></pre></div><hr>
<h2 id="-notify-階段建議要有的資訊">notify 階段建議要有的資訊<a class="h-anchor" href="#-notify-%e9%9a%8e%e6%ae%b5%e5%bb%ba%e8%ad%b0%e8%a6%81%e6%9c%89%e7%9a%84%e8%b3%87%e8%a8%8a" aria-label="這個段落的連結"></a></h2>
<p>GitLab CI 通常要跑幾分鐘的時間（通常跟 unit test 多寡有關），所以要設計 notify 的機制來傳遞資訊，建議包含的內容如下：</p>
<ul>
<li><strong>project</strong>: $PROJECT_NAME，方便了解執行的專案。</li>
<li><strong>branch</strong>: $CI_COMMIT_REF_NAME，了解哪個 branch 更新了。</li>
<li><strong>result</strong>: 會包含成功與失敗的詳細資訊。</li>
<li><strong>pipeline_link</strong>: $PIPELINE_LINK，出問題時點擊連結可以看到最直接的資訊。</li>
<li><strong>image_id</strong>: 從 artifacts 裡面讀取。</li>
</ul>
<hr>
<h2 id="-dockerfile-多階段構建">Dockerfile 多階段構建<a class="h-anchor" href="#-dockerfile-%e5%a4%9a%e9%9a%8e%e6%ae%b5%e6%a7%8b%e5%bb%ba" aria-label="這個段落的連結"></a></h2>
<p>下面用一個範例來說明如何用多階段構建（multi-stage build）來減少 Docker Image 大小並提高效率（<code>COPY &ndash;from=builder</code> 的作用是從第一階段複製文件到第二階段）。</p>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#8b949e;font-style:italic"># 第一階段：使用 Node.js 安裝套件，並進行打包</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">FROM node:23.3-alpine as builder</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">WORKDIR /app</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">COPY package.json package-lock.json ./</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">RUN npm install</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">COPY . .</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">RUN npm run build</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#8b949e;font-style:italic"># 第二階段：使用 Nginx 部署靜態文件</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">FROM nginx:alpine3.20</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">COPY --from=builder /app/dist /usr/share/nginx/html</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">WORKDIR /usr/share/nginx/html</span><span style="color:#6e7681">
</span></span></span><span style="display:flex;"><span><span style="color:#a5d6ff">COPY ./build/nginx/default.conf /etc/nginx/conf.d/default.conf</span><span style="color:#6e7681">
</span></span></span></code></pre></div><p>透過這個方案，最終的 Image 只有靜態文件跟 Nginx，不包含 Node.js 開發工具；不但減少 Image 大小，還減少了潛在攻擊面向。</p>
<hr>
<h2 id="-其他的坑套件安裝相容性單元測試">其他的坑（套件安裝、相容性、單元測試）<a class="h-anchor" href="#-%e5%85%b6%e4%bb%96%e7%9a%84%e5%9d%91%e5%a5%97%e4%bb%b6%e5%ae%89%e8%a3%9d%e7%9b%b8%e5%ae%b9%e6%80%a7%e5%96%ae%e5%85%83%e6%b8%ac%e8%a9%a6" aria-label="這個段落的連結"></a></h2>
<ul>
<li><strong>套件無法順利安裝</strong>: 如果套件是經由私有庫來安裝的，就需要設定對應的網路環境；如果在 Dockerfile 裡面安裝，請記得將 <code>.npmrc</code> 這類設定 COPY 到對應的位置。</li>
<li><strong>qemu-user-static 相容性錯誤</strong>: 有些專案需要指定對應的 platform 才能順利 build 出來（Dockerfile from 的 image 可能僅支持 arm 或 amd）。</li>
<li><strong>單元測試錯誤突然暴增</strong>: 如果在 local 環境測試起來正常，但在 GitLab CI 時出現錯誤，那通常是「非同步」的問題，可以先用 <code>await</code> 拉長等待時間，並搭配 log 來釐清狀況。</li>
</ul>
<p>有段時間沒發純技術的文章了，希望能幫助到有相關需求的朋友們，也歡迎大家分享自己在 GitLab CI 的使用經驗。</p>
]]></content:encoded>
    </item>
  </channel>
</rss>
