Shopify App 开发：本地开发配置自定义域名

hauk0101
902 阅读5分钟

背景

当我们使用 shopify app dev 启动本地 App 应用时，Shopify CLI 会默认创建一个可以让外网访问你本地服务的网址，是基于 Cloudflare 服务，以此实现内网穿透效果。

国内的网络访问 Cloudflare 服务经常会被屏蔽，或是速度很慢，很影响开发效率，好在 Shopify CLI 支持通过 shopify app dev --tunnel-url <value> 的设置来自定义内网穿透的隧道地址。通过这种方式，可以让本地的服务配置为自定义的 URL 访问，一定程度上可以保证在开发过程中，预览 APP 页面时网络的稳定。

目录

  • 准备工作
  • 配置说明
  • 效果展示

准备工作

如果你本身网络环境比较稳定，而且没有额外的特殊需求，默认使用 Shopify 自身提供的 Cloudflare 服务，也是没有问题的，因此本文的配置并非是开发 Shopify APP 的必选项。

如果你可以获取到 ngrok 官网的服务，强烈建议使用 ngrok 官网的服务。

接下来我演示的部分，主要针对国内的类似 ngrok 的服务，且仅考虑使用其免费服务。国内服务的一些问题：

  • 会涉及1元左右的实名认证费用
  • 因为免费服务使用的人数较多，因此会存在服务不稳定的情况

本文主要介绍本人使用的两种内网穿透服务（非广告），感兴趣的同学可以尝试。

配置说明

  • shopify app dev --tunnel-url <value> 参数说明：
    • value 中的参数，必须是 https 的域名，以及端口号
    • 示例：`shopify app dev --tunnel-url shopify app dev --tunnel-url yoursite.com:443
    • 注意点：必须得是 https 协议，必须加端口号，即使是 https 的默认端口，也需要加上 443
  • Shopify App 本地服务端口设置
    • 在项目中找到 shopify.web.toml 文件，加入 port=8080 或你自己期望的端口号
    • 修改后的示例：
    name = "remix"
roles = ["frontend", "backend"]
webhooks_path = "/webhooks"
port = 8080

[commands]
predev = "npx prisma generate"
dev = "npx prisma migrate deploy && npm exec remix vite:dev"
    • 设置 port 的原因是，shopify app dev 在启动时，会获取随机的端口号，如果不设置的话，当我们配置内网穿透时，无法确定应该转发的端口号。
  • 不做配置时，shopify app dev 默认的地址和端口如下：
    • 为了能够看出设置后的效果，可以在 vite.config.ts 中添加 log 函数打印日志
    • 效果如下： 图2-1.png
    • 为了验证随机性，你可以重新启动本地服务，对比下域名和端口号

效果展示

方案一

  • 网站：www.ngrok.cc/
  • 方案特点：
    • 需要1元的实名认证费用
    • 可以选择免费的美国服务
    • https 服务
      • 可以不用设置证书，使用系统默认的证书
      • 可以不用备案域名
      • 可以默认设置一个自定义域名前缀
    • 免费服务用的人多，因此可能会遇到服务不稳定的情况
  • 本地启动：

    • shopify app dev --tunnel-url https://系统生成的隧道域名.com:4443

    • 首次启动时，请直接访问上面配置的 https 域名+端口号，因为系统默认的 SSL 证书不被浏览器识别，直接预览可能无法正常显示。

    • 启动后的域名输出：

      图3-1.png

    • 页面渲染后的效果：

      图3-2.png

  • 至此，我们完成了本地开发配置自定义域名的第一种方案。

方案二

  • 网站：www.natfrp.com/
  • 方案特点：
    • 需要1元的实名认证费用
    • 免费的服务相对稳定
    • https 服务
      • 需要拥有一个备案的域名，以及有效的 SSL 证书
  • 请确保你已经按照 natfrp 的 https 文档要求做好了相关配置，尤其是以下两部分：
    • 域名的解析配置
    • SSL 证书的配置
  • 本地启动：

    • shopify app dev --tunnel-url https://备案成功的域名.com:443

    • 启动后的域名输出：

      图3-3.png

    • 页面渲染后的效果：

      图3-4.png

  • 至此，我们完成了本地开发配置自定义域名的第二种方案。

杂谈

  • 在本地开发时配置自定义域名并非必选项，此处简单总结了下自定义域名和默认域名对比，方便大家开发时做取舍：
    • URL 的稳定性：
      • 默认域名是随机的，每次启动可能不同
      • 自定义域名可以保持稳定，避免频繁更改 Shopify 应用设置
    • 开发效率：
      • 默认域名更适合临时测试，快速调试，但每次更改域名需要重新配置
      • 自定义域名更适合长期开发和测试，不需要频繁更改配置
    • 适用场景：
      • 默认域名适合短期调试，小型项目或临时开发环境
      • 自定义域名适合复杂的开发项目，特别是需要调试 Webhooks、OAuth 回调等场景，且不想每次启动时更改 URL
  • 本文没有详细的说明本人选择的两种方案的配置步骤，因为对应项目本身已有比较完善的文档，因此没有必要多此一举，当大家遇到问题时，建议多读文档。
  • 再分享一个开发中的经验：本地开发 Shopify App 时，不建议设置浏览器开发者模式的 Disabled Cache ，因为每次改动代码热更新时，都需要将很多静态资源转发到公网，因此热更新的加载速度是正常的网络请求，而不是本地请求。
  • 值得注意的是，采用国内的内网穿透服务，但因为实际的网络问题，在调试 Webhooks 等服务时，可能仍然无法正常访问，这也是为何本人优先建议使用 ngrok 的原因。

参考文档

浏览知识共享许可协议

知识共享许可协议
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

avatar
文章
阅读
粉丝