加载太慢？教你解决 Shopify App 开发时的网络问题，提升开发效率

目前 Shopify App 开发时，本地和测试环境是通过 Cloudflare Tunnel 进行通信的，也就是当执行 shopify app dev 时，Shopify 会自动帮你生成带 "trycloudflare" 字样的链接。

但是测试下来，默认的 Tunnel 很慢，特别是首次刷新 App 界面，要等待两分钟以上才能加载出来，这十分影响开发效率和体验。因此本期内容分享解决 Shopify App 开发时网络问题的四种方法，帮助你提升 Shopify App 开发时的加载速度。

以下四种方法均已亲自测试，分享要点如下：

一、LocalTunnel

LocalTunnel 的优点是无需注册账号，使用起来方便。

安装：

npm install -g localtunnel

启动：

lt --port 8000

此时会自动生成一个 URL，替换以下对应链接之后执行:

npm run dev -- --tunnel-url="https://xxx.loca.lt:8000"

也就是说，先安装，然后启动以获取一个 URL，然后保持连接，在 VS Code 终端中分出一个窗口，替换链接之后启动 dev

缺点是首次使用需要填写 password（可点击页面中链接获取），也可以通过浏览器插件修改 Header，访问链接之后页面中会有相关提示。

二、使用 Ngrok

访问 Ngrok 官网注册账号并下载安装到电脑中，登录账号之后点击左侧 "Domains" 查看并复制你的 URL，替换以下内容中的链接之后执行：

ngrok http --domain=xxx-xxx-xxx.ngrok-free.app 8080

保持连接，终端分屏（替换链接后）执行：

npm run dev -- --tunnel-url="https://xxx-xxx-xxx.ngrok-free.app:8080"

三、自行创建 Cloudflare Tunnel

参考文档

挺有意思的，同样是 Cloudflare Tunnel，自己创建的比自动生成的快很多，不过好像需要绑定付款方式，我之前绑定过，所以直接创建了。

优点是免费并且可以使用自己的域名。创建完成之后只需执行一条指令：

npm run dev -- --tunnel-url="https://xxx.xxx.com:8080"

四、Bore Server

项目地址

优点同样是可以使用自己的域名，但是需要操作的步骤更多一些，具体的连接速度也跟使用的服务器有关。

bore local 8080 --to xxx.com

npm run dev -- --tunnel-url="https://xxx.com:8080"

总结

综上，推荐的两种方式是 Local Tunnel 和 Ngrok，前者免费且无需注册，后者有免费套餐，但是有用量限制，超过之后会收费。

如果不介意绑定付款方式，自行创建 Cloudflare Tunnel 也是一个不错的选择。