Hosts File
是一種可以取代 DNS 查詢的步驟
直接指定 domain 所指向的 IP 位址
甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
在 macOS 位在 (修改會需要 sudo 權限)
/etc/hosts
Windows 則是位在 (修改會需要 Administrator 權限)
C:\Windows\System32\drivers\etc\hosts
如果想測試的話可以在檔案內加上一行
0.0.0.0 stackoverflow.com
由於我們將 stackoverflow.com 指向了一個 0.0.0.0 的 IP
這樣就可以體驗一下沒有 stackoverflow 的開發囉!
(延伸閱讀:什麼是 DNS?)
現在多數的網站開發都是採用前後端分離的方式開發
有時候我們只是想要改 back-end API 的一些邏輯
或是想要在 local debug 的時候
就可以利用 hosts file 將 API 指向 local
這樣就可以用 production 的 front-end
但使用 local 的 back-end 來整合
當然也有可能反過來
用 local 的 front-end 但使用 production 的 back-end
另一種使用情境則是
在 production 環境會有 load balancer 做分配
如果我們想指定就是測試某一台 server 時
就可以用 hosts file 的修改
對指定的 server 做測試
建立了一個很簡單的網頁應用 -> Cave
顧名思義就是個山洞
對著山洞喊話
會得到回音
輸入任何內容按下 yelling
就會用 query string 的方式呼叫 echo API
fetch(`//echo.zuplo.io/?echo=${echo.value}`)
.then((response) => response.json())
.then((data) => alert(data.query.echo))
echo.zuplo.io 是一個丟什麼過去就回什麼回來的 API 和 postman-echo.com 差不多的服務
當按下 yelling 的時候會彈跳一個 alert 的回音給你
此時我們收到需求要將 ECHO 回來的字母全部變成大寫
由於不需要動到前端
作為 API 開發人員我們可以在 local 將程式碼寫好並且啟動
const http = require('http');
const port = 8080;
const requestListener = function (req, res) {
res.setHeader('Content-Type', 'application/json');
res.writeHead(200);
res.end(JSON.stringify({ msg: 'Hello, World!'}));
}
const server = http.createServer(requestListener);
server.listen(port);
console.log(`server start listening on ${port}`);
或者可以直接執行
curl -s https://gist.githubusercontent.com/neokn/32b2f49505111069c73ed8d41b5d09e4/raw/745e106a20699d087896c4e5460564d5a719f22a/server.js | node
接著在 hosts file 中添加這一行
127.0.0.1 echo.zuplo.io
此時重新 yelling 一下
我們就得到了一個全大寫的回音了
如果使用 chrome 有遇到以下錯誤
這是因為 chrome 的安全機制所擋掉的
需要用這個連結把開關打開
chrome://flags/#block-insecure-private-network-requests
開發久了總是會有各種不同的 domain 要指向不同的 IP
但如果開發完之後忘了改回來
可是 local 的服務也關了
或是指向了某台 server 但那台 server 現在已經 offline
就會很容易以為出大事了
結果別的同事的電腦都好的
就自己的是壞掉的
所以有個好的工具幫我們管理是再好不過的事
目前推薦使用 SwitchHosts
除了採用下載安裝之外
也可以用熟悉的 command 安裝
macOS
brew install switchhosts
Windows
choco install switchhosts
由於使用上非常簡單
這邊就不寫教學囉~