<?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>.env｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/.env/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>.env｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/.env/</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, 21 Sep 2020 08:59:47 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/.env/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>【Day6】env - 善用環境變數幫你快速遷移專案</title>
      <link>https://deanlin.net/blog/202009/fb-ig-crawler-day-06/</link>
      <pubDate>Mon, 21 Sep 2020 08:59:47 +0800</pubDate>
      <guid>https://deanlin.net/blog/202009/fb-ig-crawler-day-06/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>技術教學</category>
      <description>如果你曾經有撰寫網頁端的經驗，你也許體會過以下狀況</description>
      <media:content url="https://deanlin.net/blog/202009/fb-ig-crawler-day-06/images/cover_hu_3c22e35dc7a1a64b.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%b0%88%e6%a1%88%e9%9c%80%e8%a6%81%e7%92%b0%e5%a2%83%e8%ae%8a%e6%95%b8" aria-label="這個段落的連結"></a></h2>
<p>如果你曾經有撰寫網頁端的經驗，你也許體會過以下狀況</p>
<ol>
<li>某些 function 只能在測試環境中使用，正式環境禁止執行</li>
<li>資料庫搬移到新環境，ip、username、password都需要修正</li>
<li>這份專案由多人維護，每個人都有個別的設定</li>
<li>專案在不同伺服器儲存的位置不一樣</li>
<li>&hellip;</li>
</ol>
<p>如果這些參數都分散在各個檔案，你在不同環境發佈的時候會改到很想死&hellip;</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>分析本專案中哪些參數適合當環境變數</li>
<li>學會使用環境變數</li>
</ol>
<hr>
<h2 class="h-nomark" id="1-環境變數使用時機">1. 環境變數使用時機?<a class="h-anchor" href="#1-%e7%92%b0%e5%a2%83%e8%ae%8a%e6%95%b8%e4%bd%bf%e7%94%a8%e6%99%82%e6%a9%9f" aria-label="這個段落的連結"></a></h2>
<p>環境變數的功能就是把<mark>散佈在各個檔案且會在不同環境需要調整的參數集合到一個檔案</mark>裡面，這樣就能讓你的程式在不同環境中快速發布</p>
<h3 id="常用情境如下">常用情境如下：<a class="h-anchor" href="#%e5%b8%b8%e7%94%a8%e6%83%85%e5%a2%83%e5%a6%82%e4%b8%8b" aria-label="這個段落的連結"></a></h3>
<ol>
<li>用來<code>區分正式(prod) / 測試(dev)環境</code></li>
<li>設定<mark>重要不得外流的資料</mark>(資料庫帳號、密碼，使用者權杖&hellip;)</li>
<li>需要<mark>統一設定的變數內容</mark>(系統ip、網址、port&hellip;)</li>
</ol>
<hr>
<h2 class="h-nomark" id="2-專案中哪些參數適合當環境變數">2. 專案中哪些參數適合當環境變數?<a class="h-anchor" href="#2-%e5%b0%88%e6%a1%88%e4%b8%ad%e5%93%aa%e4%ba%9b%e5%8f%83%e6%95%b8%e9%81%a9%e5%90%88%e7%95%b6%e7%92%b0%e5%a2%83%e8%ae%8a%e6%95%b8" aria-label="這個段落的連結"></a></h2>
<p>我們專案目標是做 FB、IG 的爬蟲，爬蟲會定時執行且將資料儲存到雲端方便瀏覽，最後透過 LINE 回報今日執行狀況。基於這些需求，我會設定環境變數如下：</p>
<h3 id="不得外流的資料">不得外流的資料：<a class="h-anchor" href="#%e4%b8%8d%e5%be%97%e5%a4%96%e6%b5%81%e7%9a%84%e8%b3%87%e6%96%99" aria-label="這個段落的連結"></a></h3>
<ol>
<li><strong>FB &amp; IG 的帳號密碼</strong><br>原本我想要使用 FB &amp; IG 提供的 api 來抓取我想要的追蹤者人數即每日發文篇數等等資訊，但實際研究後發現由於隱私安全相關問題，所以他們提供的api只能查自己有權限的粉專，所以我<mark>放棄使用官方api 改用 selenium 網頁模擬器</mark>來做爬蟲，在實際操作中發現以下規則，所以必需使用真實存在的帳戶來爬蟲:
<ul>
<li>FB 部分粉專必須要登入後才能觀看</li>
<li>IG則是全部都要登入，部分粉專要按追蹤後才能觀看</li>
</ul>
</li>
<li><strong>google sheet 的 id</strong><br>比起產生一份 excel 文件，我認為雲端的 google sheet 是更好的方法，因為你可以隨時隨地觀看，如果你想要更換新的 google sheet 來儲存資料也只需要修改 id 就好</li>
<li><strong>LINE 的 token</strong><br>你可以把 token 理解成專案要傳訊息給LINE的權杖，他掌握著能向某個聊天室發訊息的權限</li>
</ol>
<h3 id="要統一設定的變數">要統一設定的變數：<a class="h-anchor" href="#%e8%a6%81%e7%b5%b1%e4%b8%80%e8%a8%ad%e5%ae%9a%e7%9a%84%e8%ae%8a%e6%95%b8" aria-label="這個段落的連結"></a></h3>
<ol>
<li><strong>執行爬蟲時間</strong><br>因為每個人希望爬蟲執行的時間點都不一樣，所以把他列為環境變數</li>
</ol>
<hr>
<h2 class="h-nomark" id="3-使用環境變數">3. 使用環境變數<a class="h-anchor" href="#3-%e4%bd%bf%e7%94%a8%e7%92%b0%e5%a2%83%e8%ae%8a%e6%95%b8" aria-label="這個段落的連結"></a></h2>
<p>接著我們要知道<mark>如何在程式中引入昨天安裝的 dotenv 套件</mark>，如果還沒安裝的請在終端機(Terminal)輸入指令</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-bash" data-lang="bash"><span style="display:flex;"><span>yarn add dotenv
</span></span></code></pre></div><p>套件安裝完後，我下面的說明建議你搭配<a href="https://www.npmjs.com/package/dotenv">官方文件</a>來了解如何使用，畢竟不是所有套件都有中文資源，你要練習自己讀懂官方文件</p>
<ul>
<li>
<p>引入 <strong>dotenv</strong> 套件的方式</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-javascript" data-lang="javascript"><span style="display:flex;"><span>require(<span style="color:#a5d6ff">&#39;dotenv&#39;</span>).config();
</span></span></code></pre></div></li>
<li>
<p>在專案根目錄下創建 <strong>.env</strong> 檔案，裡面放置環境變數</p>
<h3 id="env">.env<a class="h-anchor" href="#env" aria-label="這個段落的連結"></a></h3>
<pre tabindex="0"><code>YOUR_VARIABLE=&#39;這是環境變數&#39;
</code></pre></li>
<li>
<p>程式讀取環境變數的方式(xxx是你在 .env 裡面設定的變數)</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-javascript" data-lang="javascript"><span style="display:flex;"><span>process.env.xxx
</span></span></code></pre></div></li>
<li>
<p>了解套件使用方式後我們來練習將環境變數取出並輸出在終端機(Terminal)上面</p>
<h3 id="indexjs">index.js<a class="h-anchor" href="#indexjs" 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-javascript" data-lang="javascript"><span style="display:flex;"><span>require(<span style="color:#a5d6ff">&#39;dotenv&#39;</span>).config(); <span style="color:#8b949e;font-style:italic">//載入.env環境檔
</span></span></span><span style="display:flex;"><span><span style="color:#ff7b72">function</span> getEnvVariable () {
</span></span><span style="display:flex;"><span>    <span style="color:#ff7b72">const</span> env_variable<span style="color:#ff7b72;font-weight:bold">=</span> process.env.YOUR_VARIABLE <span style="color:#8b949e;font-style:italic">// 取出環境變數
</span></span></span><span style="display:flex;"><span>    console.log(env_variable)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>getEnvVariable()
</span></span></code></pre></div></li>
</ul>
<hr>
<h3 id="執行程式">執行程式<a class="h-anchor" href="#%e5%9f%b7%e8%a1%8c%e7%a8%8b%e5%bc%8f" aria-label="這個段落的連結"></a></h3>
<ol>
<li>
<p>在專案資料夾的終端機(Terminal)執行指令</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-bash" data-lang="bash"><span style="display:flex;"><span>yarn start
</span></span></code></pre></div><blockquote>
<p>如果有輸出<mark>這是環境變數</mark>的字串就代表你成功嚕～</p>
<p><img src="https://deanlin.net/blog/202009/fb-ig-crawler-day-06/images/fb-ig-crawler-day-06-01.webp" width="1024" height="127" alt="執行程式（圖 1）" fetchpriority="high" decoding="async"></p>
</blockquote>
</li>
<li>
<p>你可以嘗試修改.env裡面的參數再執行 <strong>yarn start</strong> 來看輸出是不是跟著改變</p>
<pre tabindex="0"><code>YOUR_VARIABLE=&#39;可以修改我喔&#39;
</code></pre><blockquote>
<p><img src="https://deanlin.net/blog/202009/fb-ig-crawler-day-06/images/fb-ig-crawler-day-06-02.webp" width="1024" height="135" alt="執行程式（圖 2）" loading="lazy" decoding="async"></p>
</blockquote>
</li>
</ol>
<hr>
<h3 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></h3>
<p>今天的完整程式碼可以在<a href="https://github.com/dean9703111/ithelp_30days/tree/master/day6">這裡</a>找到喔</p>
<hr>
<blockquote>
<p><img src="https://deanlin.net/blog/202009/fb-ig-crawler-day-06/images/fb-ig-crawler-day-06-03.webp" width="1024" height="233" alt="ℹ️ 專案原始碼（圖 3）" 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>
