# 【Day6】env - 善用環境變數幫你快速遷移專案

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202009/fb-ig-crawler-day-06/
- 發布：2020-09-21
- 主題：技術教學
- 系列：FB & IG 爬蟲專案從零開始
- 標籤：iT 邦幫忙鐵人賽、Node.js、.env、Dotenv、爬蟲環境變數分析
- 摘要：如果你曾經有撰寫網頁端的經驗，你也許體會過以下狀況

> 用知識解決問題代表你持續進步，用勞力解決問題只能說明你原地踏步

## 為什麼專案需要環境變數?

如果你曾經有撰寫網頁端的經驗，你也許體會過以下狀況

1. 某些 function 只能在測試環境中使用，正式環境禁止執行
2. 資料庫搬移到新環境，ip、username、password都需要修正
3. 這份專案由多人維護，每個人都有個別的設定
4. 專案在不同伺服器儲存的位置不一樣
5. …

如果這些參數都分散在各個檔案，你在不同環境發佈的時候會改到很想死…

## 今日目標

1. 了解環境變數使用時機
2. 分析本專案中哪些參數適合當環境變數
3. 學會使用環境變數

## 1. 環境變數使用時機?

環境變數的功能就是把散佈在各個檔案且會在不同環境需要調整的參數集合到一個檔案裡面，這樣就能讓你的程式在不同環境中快速發布

### 常用情境如下：

1. 用來`區分正式(prod) / 測試(dev)環境`
2. 設定重要不得外流的資料(資料庫帳號、密碼，使用者權杖…)
3. 需要統一設定的變數內容(系統ip、網址、port…)

## 2. 專案中哪些參數適合當環境變數?

我們專案目標是做 FB、IG 的爬蟲，爬蟲會定時執行且將資料儲存到雲端方便瀏覽，最後透過 LINE 回報今日執行狀況。基於這些需求，我會設定環境變數如下：

### 不得外流的資料：

1. **FB & IG 的帳號密碼**
原本我想要使用 FB & IG 提供的 api 來抓取我想要的追蹤者人數即每日發文篇數等等資訊，但實際研究後發現由於隱私安全相關問題，所以他們提供的api只能查自己有權限的粉專，所以我放棄使用官方api 改用 selenium 網頁模擬器來做爬蟲，在實際操作中發現以下規則，所以必需使用真實存在的帳戶來爬蟲:

2. FB 部分粉專必須要登入後才能觀看
3. IG則是全部都要登入，部分粉專要按追蹤後才能觀看

4. **google sheet 的 id**
比起產生一份 excel 文件，我認為雲端的 google sheet 是更好的方法，因為你可以隨時隨地觀看，如果你想要更換新的 google sheet 來儲存資料也只需要修改 id 就好
5. **LINE 的 token**
你可以把 token 理解成專案要傳訊息給LINE的權杖，他掌握著能向某個聊天室發訊息的權限

### 要統一設定的變數：

1. **執行爬蟲時間**
因為每個人希望爬蟲執行的時間點都不一樣，所以把他列為環境變數

## 3. 使用環境變數

接著我們要知道如何在程式中引入昨天安裝的 dotenv 套件，如果還沒安裝的請在終端機(Terminal)輸入指令

```
yarn add dotenv

```

套件安裝完後，我下面的說明建議你搭配[官方文件](https://www.npmjs.com/package/dotenv)來了解如何使用，畢竟不是所有套件都有中文資源，你要練習自己讀懂官方文件

- 引入 **dotenv** 套件的方式

```
require('dotenv').config();

```

- 在專案根目錄下創建 **.env** 檔案，裡面放置環境變數

### .env

```
YOUR_VARIABLE='這是環境變數'

```

- 程式讀取環境變數的方式(xxx是你在 .env 裡面設定的變數)

```
process.env.xxx

```

- 了解套件使用方式後我們來練習將環境變數取出並輸出在終端機(Terminal)上面

### index.js

```
require('dotenv').config(); //載入.env環境檔
function getEnvVariable () {
    const env_variable= process.env.YOUR_VARIABLE // 取出環境變數
    console.log(env_variable)
}
getEnvVariable()

```

### 執行程式

1.
在專案資料夾的終端機(Terminal)執行指令

```
yarn start

```

> 如果有輸出這是環境變數的字串就代表你成功嚕～

2.
你可以嘗試修改.env裡面的參數再執行 **yarn start** 來看輸出是不是跟著改變

```
YOUR_VARIABLE='可以修改我喔'

```

>

### ℹ️ 專案原始碼

今天的完整程式碼可以在[這裡](https://github.com/dean9703111/ithelp_30days/tree/master/day6)找到喔

> **在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：**
> 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
> 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
> 調整專案架構
> 優化爬蟲程式，以更廣的視角來擷取網頁資訊
> 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
> 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊
> **有興趣的朋友可以到天瓏書局選購，感謝大家的支持。**
> **購書連結**：[https://www.tenlong.com.tw/products/9789864348008](https://www.tenlong.com.tw/products/9789864348008)

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202009/fb-ig-crawler-day-06/