我本地明明是好的啊？前端怎么本地復(fù)現(xiàn)線上問題？
試想一下，某天 QA 給你報了一個線上問題，那你會怎么做？
我本地明明是好的啊？肯定是誤報！
當然這種情況大部分是你內(nèi)心的 YY，事實上是真的有問題。
看完 QA 的復(fù)現(xiàn)路徑，你嘗試在本地復(fù)現(xiàn)，然后你本地卻怎么也無法復(fù)現(xiàn)。
究其原因，還是 live 和本地的環(huán)境差異導(dǎo)致，這里的原因就可能有很多，我理解主要是以下兩點：
- 數(shù)據(jù)不同。本地更多的是用的 test 環(huán)境的數(shù)據(jù)，live 用的真實環(huán)境的數(shù)據(jù)。不同數(shù)據(jù)，頁面的渲染以及交互可能是不同的。
- 打包配置不同。前端在使用一些打包工具，比如 webpack 的時候，一般會區(qū)分 dev 和 prod 環(huán)境。不同的環(huán)境配置不一樣，比如 dev 環(huán)境需要開啟熱更新，prod 環(huán)境需要做一些代碼壓縮。
- ...
使用 nginx 本地部署我們打包出來的代碼
對于上述的第二點，假如要復(fù)現(xiàn)的話，也很簡單，只需要將我們本地 build 出來的代碼跑起來，不就可以了？這里我們使用 nginx 本地部署我們打包出來的代碼。
具體的安裝 nginx 的流程，我們這里不做討論，請各位看官自行 Google。如果是 Mac，并且你安裝了 brew。如下：
brew install nginx
第一步，打包你的代碼。
第二步，修改你的 nginx? 配置文件。Mac 是 /usr/local/etc/nginx/nginx.conf。修改 server root 中的配置，指向你項目打包后的靜態(tài)文件存放的地址。
server {
listen 8080;
server_name localhost;
location / {
- root html/static;
# 項目打包后的靜態(tài)文件存放的地址
+ root /Users/guangpingfeng/Documents/shopee/projects/yapi;
index index.html index.htm;
}
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
第三步，啟動 nginx。至此，你就可以通過 http://0.0.0.0:8080 訪問你的頁面了，其跟正式環(huán)境的前端打包資源是一致的。
# 啟動
nginx
其它關(guān)于 nginx 更多命令：
- 退出服務(wù)：nginx -s quit
- 強制關(guān)閉服務(wù)：nginx -s stop
- 重載服務(wù)：nginx -s reload （重啟，服務(wù)不會中止）
- 驗證配置文件：nginx -t
- 使用配置文件：nginx -c
- 使用幫助：nginx -h
有沒有簡單一點的——whistle
這里不對 whistle 的過多介紹，感興趣的可以看我之前的一篇文章——前端應(yīng)該知道的web調(diào)試工具——whistle[1]。
使用 whistle 的思路，就是使用本地打包出來的資源代理到線上。
以上面的例子為例。我們希望線上訪問 static/prd? 目錄下的靜態(tài)資源能夠訪問到本地打包出來的資源。只需要配置這么一條規(guī)則（這里演示的域名我都使用 www.test.com）。whistle 會根據(jù)匹配 url 的剩余路徑自動補齊本地文件路徑，并自動忽略后面的請求參數(shù)：
www.test.com/static/prd file:///Users/projects/yapi/static/prd
比如訪問 https://www.test.com/static/prd/lib3@d380218b438aef3811b2.js? 會代理到本地的 file:///Users/projects/yapi/static/prd/lib3@d380218b438aef3811b2.js。
這個是非常有用的，但是有一些時候，你會發(fā)現(xiàn)打包出來的 md5 串不一樣，這種情況可以使用通配符匹配的方式。
匹配模式必須以 ^ 開頭(如果需要限制結(jié)束位置可以用 ，為通配符，支持通過0...9 獲取通配符匹配的字符串，其中 $0 表示整個請求 url。
上面的例子的規(guī)則就可以表示如下：
^www.test.com/prd/**.*.* file:///Users/projects/yapi/static/prd/$1.$3
在訪問 www.test.com/prd/index.xxxx.js 的時候，實際上訪問的是 file:///Users/projects/yapi/static/prd/index.js。（注意，這個時候，本地打包出來的代碼是不帶有 md5 的）。
live 數(shù)據(jù)和本地環(huán)境不同
這種情況，最快的方式，就是讓 QA 給我復(fù)制一份 live 的數(shù)據(jù)，我直接把接口返回的數(shù)據(jù)代理到本地請求復(fù)現(xiàn)。這個通過 whistle 其實可以很簡單實現(xiàn)，不展開細說。
另外，我們平時開發(fā)，實際上就是本地起了一個服務(wù)，用 webpack 做構(gòu)建時，習(xí)慣引入 webpack-dev-server 做內(nèi)存靜態(tài)服務(wù)器，其提供了 proxy 負責(zé)做一層代理，我們通過匹配后端接口，然后通過 target 指向 live 環(huán)境。
proxy: {
'/api': {
target: `https://www.test.com,
changeOrigin: true,
onProxyRes(proxyRes, _, res) {
// ****
},
},
},
同理，完全可以用 whistle 進行解決，一條規(guī)則搞定。
^http://0.0.0.0:9528/api/*** https://www.test.com/api/$1
最后
你有遇到過，本地沒有問題，線上有問題么？你們一般是怎么解決的呢？希望本文能夠給你一些思路。
參考
- 用whistle實現(xiàn)map local[2]
- vue項目打包本地后通過nginx解決跨域??[3]
參考資料
[1]前端應(yīng)該知道的web調(diào)試工具——whistle: https://juejin.cn/post/6861882596927504392。
[2]用whistle實現(xiàn)map local: https://juejin.cn/post/6844903600611819534。
[3]vue項目打包本地后通過nginx解決跨域??: https://juejin.cn/post/6956774987722129416。
