Shopify应用安装失败求助：npm run dev遇Cloudflare Tunnel及ngrok报错

问题描述 #

按照Shopify官方Remix框架二维码应用教程操作时，执行npm run dev后出现Cloudflare Tunnel无法工作的报错。更换ngrok并配置其URL后，再次执行命令仍报错，导致应用无法完成安装。

相关报错截图：

解决步骤 #

1. 修复Cloudflare Tunnel问题 #

• 更新Shopify CLI到最新版本：

  npm install @shopify/cli@latest -g
  

• 清理Tunnel缓存后重启：

  shopify app tunnel clean
  npm run dev
  

2. 正确配置ngrok替代方案 #

• 确保ngrok已完成全局安装与认证：

  ngrok config add-authtoken <你的ngrok认证令牌>
  

• 修改项目根目录的.env文件，将SHOPIFY_APP_URL设置为ngrok生成的HTTPS地址（例如https://abc123.ngrok.io）
• 在独立终端启动ngrok隧道（端口需与Remix应用默认端口一致）：

  ngrok http 3000
  

• 重新执行npm run dev，CLI将自动识别外部隧道并跳过Cloudflare Tunnel初始化

3. 排查端口冲突 #

• 检查3000端口是否被占用：
  • Mac/Linux：

    lsof -i :3000
    

  • Windows：

    netstat -ano | findstr :3000
    

• 关闭占用端口的进程后重新运行npm run dev

4. 验证Shopify后台配置 #

• 登录Shopify合作伙伴后台，进入应用设置页面
• 更新“应用URL”为当前使用的隧道地址
• 添加隧道地址+/auth/callback到“允许的重定向URL”列表中

内容的提问来源于stack exchange，提问作者Syed Ghufran Hassan