<?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>.gitignore｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/.gitignore/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>.gitignore｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/.gitignore/</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>Tue, 22 Sep 2020 08:42:57 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/.gitignore/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>【Day7】gitignore - 杜絕上傳錯誤資料，從此不再發生慘痛經驗</title>
      <link>https://deanlin.net/blog/202009/fb-ig-crawler-day-07/</link>
      <pubDate>Tue, 22 Sep 2020 08:42:57 +0800</pubDate>
      <guid>https://deanlin.net/blog/202009/fb-ig-crawler-day-07/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>技術教學</category>
      <description>筆者曾待過超瞎的公司，他們對於一個專案遷移的概念還停留在把程式 copy 到 USB，到現場的時候再把他放到正式的server上面</description>
      <media:content url="https://deanlin.net/blog/202009/fb-ig-crawler-day-07/images/cover_hu_b2a7e541e66be6d6.jpg" medium="image" type="image/jpeg" width="1200" height="675" />
      <content:encoded><![CDATA[<blockquote>
<p>在你的成長的路上總有不少值得你警惕的前輩</p>
</blockquote>
<h2 id="為什麼寫這篇文章">為什麼寫這篇文章？<a class="h-anchor" href="#%e7%82%ba%e4%bb%80%e9%ba%bc%e5%af%ab%e9%80%99%e7%af%87%e6%96%87%e7%ab%a0" aria-label="這個段落的連結"></a></h2>
<h3 id="慘痛經驗-part-1">慘痛經驗 part 1<a class="h-anchor" href="#%e6%85%98%e7%97%9b%e7%b6%93%e9%a9%97-part-1" aria-label="這個段落的連結"></a></h3>
<p>筆者曾待過超瞎的公司，他們對於一個<mark>專案遷移的概念還停留在把程式 copy 到 USB</mark>，到現場的時候再把他放到正式的server上面</p>
<p>所以每次發布新版本都超級心驚膽跳擔心會不會檔案沒有 call 完全(如果你曾經在 windows 上複製過 node_modules 超過 2G 的專案就會知道我在說什麼惹)、會不會到現場的 server 跑不動，這個詭異的問題直到我離開那間公司後才知道根本是一道假命題&hellip;</p>
<ul>
<li><mark>都用 git 了，為什麼還要把程式 call 到 USB？？？</mark></li>
<li><code>都有 package.json 紀錄要安裝的套件跟版本了，我幹嘛要複製好幾G的套件進去 USB？？？</code><br>不要笑，我相信現在還是有公司用這麼瞎的方式在發布新版本XD</li>
</ul>
<h3 id="慘痛經驗-part-2">慘痛經驗 part 2<a class="h-anchor" href="#%e6%85%98%e7%97%9b%e7%b6%93%e9%a9%97-part-2" aria-label="這個段落的連結"></a></h3>
<p>筆者曾在公司兼職 MIS，幫公司架一個 gitlab 提供內部使用；但每個人 git 使用的習慣相差很大，有些部門的同事根本就沒在管什麼檔案適合傳到 gitlab 什麼不適合，每次 push 都全部上傳(各種執行檔、暫存檔全部上傳，<mark>根本把 gitlab 當成 NAS 在用&hellip;</mark>)</p>
<p>因為 git 版本控管的特性，他的專案在 gitlab 就越來越肥，儘管跟他溝通很多次這樣的 git 版控很有問題但都被當成耳邊風，直到有一天 gitlab 的硬碟終於被他用完了&hellip;(<mark>他一個專案就用了 15GB 的容量</mark>)，他才開始願意去了解自己專案中有多少檔案是不需要上傳的</p>
<blockquote>
<p>PS.因為 gitlab 一般只會儲存程式碼，所以當時只劃分了 100GB 的硬碟空間</p>
</blockquote>
<h3 id="慘痛經驗-part-3">慘痛經驗 part 3<a class="h-anchor" href="#%e6%85%98%e7%97%9b%e7%b6%93%e9%a9%97-part-3" aria-label="這個段落的連結"></a></h3>
<p>這個事件發生在一個熱愛技術的朋友身上，他使用了一個需要憑證的套件，這個憑證會根據使用者使用的次數去做收費，不知道他當時是喝多了還是太累了；<mark>他居然把憑證加入 git 版控上傳，我永遠記得下個月他收到帳單時臉上的表情有多麼的驚嚇</mark></p>
<h3 id="昨日經驗">昨日經驗<a class="h-anchor" href="#%e6%98%a8%e6%97%a5%e7%b6%93%e9%a9%97" aria-label="這個段落的連結"></a></h3>
<p>昨天我們說到 <code>.env 裡面存放的資料有許多都不適合公開</code>(ex:資料庫帳號密碼、token&hellip;)，這些資料外流出去我想就不是檢討報告能解決的問題惹，為了避免誤傳檔案，今天我來介紹一個好用的東西 <code>.gitignore</code>，他是一份忽略清單，<mark>忽略清單上的都是不需要加入版本控制的檔案</mark></p>
<hr>
<h2 id="今日目標">今日目標<a class="h-anchor" href="#%e4%bb%8a%e6%97%a5%e7%9b%ae%e6%a8%99" aria-label="這個段落的連結"></a></h2>
<ol>
<li>了解哪些檔案/資料夾不需要放入版控</li>
<li>在專案加入 .gitignore</li>
<li>透過 VSCode 知道是否成功將檔案加入忽略清單</li>
<li>為環境變數加上一個可以上傳的範例檔</li>
</ol>
<hr>
<h2 class="h-nomark" id="1-哪些檔案資料夾不需要放入版控">1. 哪些檔案/資料夾不需要放入版控?<a class="h-anchor" href="#1-%e5%93%aa%e4%ba%9b%e6%aa%94%e6%a1%88%e8%b3%87%e6%96%99%e5%a4%be%e4%b8%8d%e9%9c%80%e8%a6%81%e6%94%be%e5%85%a5%e7%89%88%e6%8e%a7" aria-label="這個段落的連結"></a></h2>
<p>有了上方慘痛經驗的範例，我想大家應該對要加入 .gitignore 的檔案/資料夾有基礎概念了，在這我也整理了常見在忽略清單如下：</p>
<ol>
<li><strong>機敏性資料</strong>：資料庫帳號密碼、存取權限的權杖(token)、憑證(credentials)&hellip;</li>
<li><strong>環境變數</strong>：專案env檔(因為裡面通常存有ip、password&hellip;等隱私資訊)</li>
<li><strong>套件資料夾</strong>：node_module、vendor&hellip;</li>
<li><strong>日誌檔案</strong>：log相關紀錄</li>
<li><strong>程式編譯時產生的檔案</strong>：快取檔案、暫存檔案、編譯結果</li>
</ol>
<p>透過這份清單，大家可以想一下昨天的專案有哪些檔案/資料夾是要加入這份忽略清單的呢</p>
<hr>
<h2 class="h-nomark" id="2-在專案加入gitignore">2. 在專案加入.gitignore<a class="h-anchor" href="#2-%e5%9c%a8%e5%b0%88%e6%a1%88%e5%8a%a0%e5%85%a5gitignore" aria-label="這個段落的連結"></a></h2>
<ol>
<li>上一篇有提到我們這次的爬蟲會用到 FB &amp; IG 的帳號密碼還有你 google sheet 的 id，<mark>這些資訊我們統一設定在 .env 環境變數裡面</mark>，我相信大家都不希望把這些機敏資訊放到 git 外流出去</li>
<li>另外我們 <code>透過 yarn 安裝的 dotenv 套件也產生了一個 node_modules 的資料夾</code>，從經以後你所安裝的套件都會儲存到這個資料夾裡面，通常一個中型專案套件他的大小都高達 300MB 以上，所以這個 node_modules 的資料夾是不適合上傳到到 git 的(這些套件到新環境下指令yarn就能安裝)</li>
</ol>
<p>所以我們的忽略清單會長這樣</p>
<h3 id="gitignore">.gitignore<a class="h-anchor" href="#gitignore" aria-label="這個段落的連結"></a></h3>
<pre tabindex="0"><code>node_modules
.env
</code></pre><hr>
<h2 class="h-nomark" id="3-透過-vscode-知道是否成功將檔案加入忽略清單">3. 透過 VSCode 知道是否成功將檔案加入忽略清單<a class="h-anchor" href="#3-%e9%80%8f%e9%81%8e-vscode-%e7%9f%a5%e9%81%93%e6%98%af%e5%90%a6%e6%88%90%e5%8a%9f%e5%b0%87%e6%aa%94%e6%a1%88%e5%8a%a0%e5%85%a5%e5%bf%bd%e7%95%a5%e6%b8%85%e5%96%ae" aria-label="這個段落的連結"></a></h2>
<p>如果你也是用 VSCode 當成編輯器，可以用他觀察使用 .gitignore 的前後變化</p>
<ul>
<li>
<p><strong>使用 .gitignore 前：</strong> .env 及 node_modules 會被列入變更；<code>綠色的字代表有新增(U)的檔案，棕色的字代表有改變(M)的檔案</code></p>
<p><img src="https://deanlin.net/blog/202009/fb-ig-crawler-day-07/images/fb-ig-crawler-day-07-01.webp" width="439" height="640" alt="Imgur" fetchpriority="high" decoding="async"></p>
</li>
<li>
<p>在 <code>SOURCE CONTROL</code> 中可以看到有哪些檔案被列入變更</p>
<p><img src="https://deanlin.net/blog/202009/fb-ig-crawler-day-07/images/fb-ig-crawler-day-07-02.webp" width="354" height="640" alt="Imgur" loading="lazy" decoding="async"></p>
</li>
<li>
<p><strong>使用 .gitignore 後：</strong> .env 及 node_modules 會變成<code>淺灰色</code>，代表不會被列入變更</p>
<p><img src="https://deanlin.net/blog/202009/fb-ig-crawler-day-07/images/fb-ig-crawler-day-07-03.webp" width="437" height="640" alt="Imgur" loading="lazy" decoding="async"></p>
</li>
</ul>
<p><strong>這份忽略清單會隨著你專案的變動而調整</strong>，如果你在撰寫其他種類程式語言可以參考<a href="https://github.com/github/gitignore">github的官網</a>來調整自己的.gitignore</p>
<hr>
<h2 class="h-nomark" id="4-為環境變數加上一個可以上傳的範例檔">4. 為環境變數加上一個可以上傳的範例檔<a class="h-anchor" href="#4-%e7%82%ba%e7%92%b0%e5%a2%83%e8%ae%8a%e6%95%b8%e5%8a%a0%e4%b8%8a%e4%b8%80%e5%80%8b%e5%8f%af%e4%bb%a5%e4%b8%8a%e5%82%b3%e7%9a%84%e7%af%84%e4%be%8b%e6%aa%94" aria-label="這個段落的連結"></a></h2>
<p>今天我們把 .env 放入 .gitignore 中讓他不會加入版控，<code>但為了讓專案快速遷移，我會建立一個 .env.example 的檔案</code>，他是環境變數的範例檔，這樣你在新環境只需要將他複製一份到 .env 檔填上自己的參數就能完成環境設定了，下面是本專案未來會用到的環境變數</p>
<h3 id="envexmaple">.env.exmaple<a class="h-anchor" href="#envexmaple" aria-label="這個段落的連結"></a></h3>
<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-bash" data-lang="bash"><span style="display:flex;"><span><span style="color:#8b949e;font-style:italic">#填寫你目標放入的sheet id</span>
</span></span><span style="display:flex;"><span><span style="color:#79c0ff">SPREADSHEET_ID</span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#39;your sheet id&#39;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#8b949e;font-style:italic">#你FB及IG的帳號密碼(建議用小帳號)</span>
</span></span><span style="display:flex;"><span><span style="color:#79c0ff">IG_USERNAME</span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#39;ig username&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#79c0ff">IG_PASSWORD</span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#39;ig password&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#79c0ff">FB_USERNAME</span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#39;fb username&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#79c0ff">FB_PASSWORD</span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#39;fb password&#39;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#8b949e;font-style:italic">#這是設定排程的時間參數(目前預設每日22:30準時執行)</span>
</span></span><span style="display:flex;"><span><span style="color:#79c0ff">CRONJOB_TIME</span><span style="color:#ff7b72;font-weight:bold">=</span><span style="color:#a5d6ff">&#39;0 30 22 * * *&#39;</span>
</span></span></code></pre></div><hr>
<h2 class="h-nomark" id="-下個階段">⏭️ 下個階段<a class="h-anchor" href="#-%e4%b8%8b%e5%80%8b%e9%9a%8e%e6%ae%b5" aria-label="這個段落的連結"></a></h2>
<p>關於撰寫程式的基礎介紹就到今天，從明天會開始<strong>撰寫爬蟲</strong>，這裡先跟各位分享一下我對於功能撰寫順序的邏輯以及技術文章未來的規劃</p>
<ul>
<li><strong>判斷哪個功能需要最先研究</strong>
<ol>
<li>我們先前列出很多功能項目，我個人對於研究的前後順序是<mark>先把不熟悉的完成，因為他通常會花你最多時間</mark></li>
<li>如果中間有遇到無法解決的問題，最慘的結果就是你必須放棄這個專案，所以我建議不熟悉的東西你最好再接案前要做一下功課確認是可以完成的，這就是你從最難的部分開始實作的好處：<mark>及時止損，避免你完成大部分功能最後因為卡在一個關鍵功能無法完成交付</mark></li>
</ol>
</li>
<li><strong>專案撰寫順序</strong><br>我會按照我當時撰寫的思路完整的呈現給大家，目前的順序是：
<ul>
<li>爬蟲功能 → 儲存到雲端Google Sheets → 電腦自動排程執行 → LINE通知提醒執行結果</li>
</ul>
</li>
</ul>
<hr>
<h2 id="ℹ-專案原始碼">ℹ️ 專案原始碼<a class="h-anchor" href="#%e2%84%b9-%e5%b0%88%e6%a1%88%e5%8e%9f%e5%a7%8b%e7%a2%bc" aria-label="這個段落的連結"></a></h2>
<p>今天的完整程式碼可以在<a href="https://github.com/dean9703111/ithelp_30days/tree/master/day7">這裡</a>找到喔</p>
<hr>
<blockquote>
<p><img src="https://deanlin.net/blog/202009/fb-ig-crawler-day-07/images/fb-ig-crawler-day-07-04.webp" width="1024" height="233" alt="ℹ️ 專案原始碼（圖 4）" loading="lazy" decoding="async"></p>
<p><strong>在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：</strong></p>
<ul>
<li>加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項</li>
<li>將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門</li>
<li>調整專案架構
<ul>
<li>優化爬蟲程式，以更廣的視角來擷取網頁資訊</li>
<li>增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者</li>
<li>排程部分改用 node-schedule &amp; pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊</li>
</ul>
</li>
</ul>
<p><strong>有興趣的朋友可以到天瓏書局選購，感謝大家的支持。</strong></p>
<p><strong>購書連結</strong>：<a href="https://www.tenlong.com.tw/products/9789864348008">https://www.tenlong.com.tw/products/9789864348008</a></p>
</blockquote>
]]></content:encoded>
    </item>
  </channel>
</rss>
