我本地明明是好的啊?前端怎么本地复现线上问题?

持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第 14 天,点击查看活动详情

试想一下,某天 QA 给你报了一个线上问题,那你会怎么做?

我本地明明是好的啊?肯定是误报!

当然这种情况大部分是你内心google翻译的 YY,事实上是真的有问题。

看完 QA 的字符间距怎么加宽复现路径,你尝试在本地复现,然后你本地却怎么也无法复现。

究其原因,还是 live 和本地的环境差异导致,这里的原因就可能有很多,我理解主要是以下两点:

  • 数据不同。本地更多的是用的 test 环境的数据,live 用的真实环境的数据。不同数据,页面的渲染以及交互可能是不同的。
  • 打包配置不同。前端在使后端需要学什么用一些打包工具,比如 webpack 的时候,一般会区分 dev 和 prod 环境。不同的环境配通配符怎么用置不一样,比如 dev 环境需要开启热更新,prod 环境需要做一些代码压缩。

使用 nginx 本地部署我们打包出来的代码

对于上述的第二点,假如要复现的话,也很简单,只需要将我们本地 build 出来的代码跑起来,不就可以了?这里我们使用 nginx 本地部署我们字符型变量打包出来的代码。

具体的安装 ngingoogle商店x 的流程,我们这里不做讨论,请各位看官自行 Google。如果是 Mac,并且你安装了 brew。如下:

brew install nginx

第一步,打包你的代码。字符串逆序输出

我本地明明是好的啊?前端怎么本地复现线上问题?

第二步,修改你的 nginx 配置文件。 Mac 是 /usr/local/etc/nginx/nginx.conf。修改 server root 中的配置,指向你项目打包后的静态文件存放的地址。

server {
    listen       8080;
    server_name  localhost;
    location / {
-        root   html/static;
        # 项目打包后的静态文件存放的地址
+        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 访问你的页面通配符掩码了,其跟正式环境的前端打包资源是一致的。

# 启动
nginx

其它关于 nginx 更多命令:

  • 退出服务:nginx -s quit
  • 强制关闭服务:nginx -s stop
  • 重载服务:nginx -s reload  (重启,服务不会中止)
  • 验证配置文件:nginx -t
  • 使用配置文件:nginx -c
  • 使用帮助:nginx -h

有没有简google浏览器单一点的——whistle

这里不对 whistle 的过多介绍,感兴趣的可以看我之前的一篇文章——https域名前端google应该知道的web调试工具——whistle。

使用 whistle 的思路,就是使用本地打包出来的资源代理到线上

以上面的例子为例。我们希望线上访问 static/prd 目录下的静态资源能够访问到本地打包出来的资源。只需要google配置这么一条规则(这里演示的域名我都通配符代表几个任意字符使用 www.test.com)。whistle 会根据匹字符串是什么意思配 url 的剩余路径自动补齐本地文后端是做什么的件路径,并自动忽略后面的请求参数:

www.test.com/static/prd file:///Users/projects/yapi/static/prd

比如后端是什么工作访问 https://www.test.com/static/prd/lib3@d380218b438aef3811b2.js通配符掩码代理到本地的 file:///Users/pro通配符怎么用jects/yapi/static/prd/lib3@d380218b438aef381通配符是什么意思1b2.js

这个是非常有用的,但是有一些时候,你会发现打包出来的 md5 串不一样,这种情况可以使用通配符匹配的方式。

匹配模式必须以 ^ 开头(如果需要限制结束位置可以用 ),∗为通配符,支持通过),* 为通配符,支持通google中国0…9 获取通配符匹配的字符串,后端需要学什么其中 $0 表示字符常量整个请求 url。

上面的例子的规则就可以表示如下:

^www.test.com/prd/**.*.* file:///Users/projects/yapi/static/prd/$1.$3

在访问 www.test.com/prd/index.xxxx.js 的时候,实际上访问的是 file:///Users/projects/y后端需要学什么api/static/prd/index.js。(注意,这个时候,本地打包出来的代码是不带有 md5 的)。

live 数据和本地环境不同

这种情况,最快的方式,就是让 QA 给我复制一份 live 的数据,我直接把接口返回的数据代理到本地请求复现。这个通过 whistle 其实可以很简单实现,不展开细说。

另外,我字符型变量们平时开发,实际上就是本地起通配符有哪些了一个服务,用 webpack 做构建时,习惯引入 webpack-dev-server 做内存静态服务器,其提供了 proxy 负责做一层https安全问题代理,我们通过匹配后端接口,然后通过 target 指向 live 环境。

proxy: {
  '/api': {
    target: `https://www.test.com,
    changeOrigin: true,
    onProxyRes(proxyRes, _, res) {
      // ****
    },
  },
},

同理,完后端语言全可以用 whistle 进行google商店解决,一条规则搞定。

^http://0.0.0.0:9528/api/*** https://www.test.com/api/$1

最后

你有遇到过,本地没有问题,通配符线上有问题么?你们一般是怎么解决的呢?希望本文能够给你一些思路。

参考后端开发是干什么的

  • 用whistle实现map local
  • vue项目打包本地后通过nginx解决跨域

发表评论

提供最优质的资源集合

立即查看 了解详情