[2020-03-23]環境變數、API以及其他

[pdji1602003]

學習紀錄

1. 理解.env跟process.env的關係：
   要理解上述兩者間的關係，我們必須先釐清兩者分別是什麼。.env是一種簡單配置文本文件(configuration text file)，我們在此文件定義想要傳遞到應用程式環境當中的變數。因為此文件性質的關係，通常我們也可以在其中儲存一些私密資訊，比如說API key。放置在.env檔案內的變數是需要使用解析器(parser)解析進我們進應用程式的環境中。由於此種解析器必非Node內建的功能，所以通常我們需要額外下載可以達成此項功能的module，比如說dotenv。儲存在.env裡的變數會採取以下格式編寫：ENV_VARIABLE=VALUE(英文字母大寫並且以下底線連接)，然後我們可以process.env.ENV_VARIABLE來取得儲存在此變數的值。process.env此屬性會返回一用戶環境訊息的物件，也因此可用其來獲取儲存在.env裡的變數。
2. 使用React框架時，如何在.env添加環境變數？
   若欲使用自定義的環境變數，我們必須以REACT_APP_為變數開頭替變數命名，例如名為REAREACT_APP_API_KEY的環境變數在我們的JS中將會被解析為process.env.REACT_APP_API_KEY。
3. 理解在談論API的語境中，endpoint的意思
4. 理解local binaries的意思

---

昨夜要睡覺時，我突然想起process.env是Node環境提供的東西，那為何我用console.log將其值在瀏覽器console印出時，可以獲得它的值？我會必須思考這樣的問題，就代表說我對於react跟node.js的關係還不是很理解。重新反思一下為何我會需要理解環境變數？因為我需要透過API endpoint跟後端做溝通，取得某些資料，而為了使用該API，我必須取得針對該API的API key。就如同早些提到的，API key是私密的資訊，就好比提款帳密一樣，我們不會想將這樣的資訊透漏給其他人知道。可是問題來了，API的使用步驟裡頭有提到，為了使用這API，我們必須在每次呼叫這API時帶上我們API key。到此，我們的問題變成，我們要將API key儲存在哪才可以不輕易外洩給他人，此時就是.env檔案出場的時候了。已知儲存在.env檔案裡的資訊可以透過Node所提供的全域變數process.env取得，那我們只要將.env檔案寫入.gitignore裡，起碼在開發階段就可以解決API key儲存的問題。可這時候，其實會有另外一個問題產生，我已經提到process.env是Node提供給我們的東西，那當瀏覽器讀取到它，照理說它無法識別那是什麼東西。然而事實是，瀏覽器依舊可以順利取得它的值，我假設是因為透過create-react-app所建置的環境已經包含Webpack跟dotenv的緣故。另外，在使用create-react-app指令所為我們建置的環境中，存在一個內建環境變數NODE_ENV，我們可以透過process.env.NODE_ENV取得其值。此變數的值會隨著我們所在的環境而變，比方說當我們運行npm start時，其值會等同於'development'，運行npm test時，它會等同於'test'。