如何开始一个shopify app插件开发

1，先看文档内容，app的cli，说明得很清晰了，跟着文档内容步骤去操作
https://shopify.dev/docs/apps/build/scaffold-app

2，在开发时候，需要在本地开发，然后再上传，这里也看有本地开发的文档，跟随文档操作
https://shopify.dev/docs/apps/build/cli-for-apps/networking-options
这里的本地开发的网络选项有三个选项，应该选哪个？网络上已经有很多文档三个都有具体的操作步骤，可以多翻一下其他的文档记录

三个选项我都测试过：
Cloudflare 快速隧道：这个相对来说操作会复杂一点，但是成功后，重新打开就不需要更变域名(后面补充这个隧道）

基于本地主机的开发：这个一直没有ssl证书给我，所以这个失败，网络上，这个选择的记录也比较少

自带隧道：这个看起来复杂，但是是相对来说看的文档内容没有那么多，跟着2里面的文档链接步骤走就好，但是每次开启都需要更改隧道域名

这里以选项三——自带隧道的方法进行记录

我将详细解说上面步骤内容：

步骤1,2，3,就不多说了

步骤4，5，6出现的问题比较多点，重点关注一下

步骤4：

//在终端中，使用以下命令启动 ngrok。您也可以选择其他端口号
ngrok http 3000

这个3000端口是怎么来的，只是shopify给你的一个参考，一个默认；这个3000并非一定要固定，主要取决于你的电脑哪个端口没有被占用，使用哪个端口都可以，例如下面我选择3121端口。

下面开始跟着步骤4操作：在ngrok 中输入命令

ngrok http 3121

下图为命令后的结果，“本地”里面，端口为3121，并且ngrok也给你分配了一个共享网络，这个共享网络就是步骤5里面的内容，这个面板不用关闭，保持打开，不用管他就好

步骤6：

shopify app dev --tunnel-url=https://0695-162-216-231-189.ngrok-free.app:3121

步骤后的结果

端口上面变了，你打开图上的本地链接也是能打开的，打开shopify后台就链接不上了，先把端口固定为3121

在文件：shopify.web.toml添加代码

name = "remix"
roles = ["frontend", "backend"]
webhooks_path = "/webhooks/app/uninstalled"
port = 3121  //添加的代码内容（文字不要复制）

[commands]
predev = "npx prisma generate"
dev = "npx prisma migrate deploy && npm exec remix vite:dev"
 

这样就能固定住端口
这样，下次打开时候，端口就不会随机分发，固定为3121
重新输入命令，不用写端口了，因为端口已经被固定了

shopify app dev --tunnel-url=https://0695-162-216-231-189.ngrok-free.app

运行成功，端口也对应上，就完毕了

备注：每次重新启动ngrok 的时候，隧道路径（共享网络路径）都会改变，所以，步骤6里面的路径也需要对应上隧道路径（共享网络路径）

最后，可能有的开发者会遇到一个问题是：Handling response

这个问题，我在Cloudflare和自带隧道都遇到过，解决方案也一个一个的测试过，最后还是失败。最终，在一个帖子中找到一个愚蠢又有效果的解决方案：把时间日期校准

最后问题解决了。有的电脑需要打开两个开关，有的只需要打开一个开关。

如果这个方法不管用，请转移到shopify社区或其他社区寻找答案

补充：Cloudflare 快速隧道

这里启动app的顺序是：
1，固定shopify app的启动端口（上文有说如何固定）

2，启动隧道,因为我本地的端口是3121，所以这里使用3121

cloudflared tunnel --url http://localhost:3121

cloudflared 会自动分发一个网址给你，如果你启动命令失败，试试不使用vpn去启动，本人使用vpn启动都会被cloudflared 拒绝。
3，启动shopify app

shopify app dev --tunnel-url=https://xxxxxxx.trycloudflare.com:3121

至此，你的app则可以运行起来

ps:如果运行的是下面的命令，则需要做下面步骤

shopify app dev

4，把分发的网址填充到shopify.app.toml文件的

[auth]
redirect_urls = [
  "https://binary-cry-collected-ethiopia.trycloudflare.com/auth/callback",
  "https://binary-cry-collected-ethiopia.trycloudflare.com/auth/shopify/callback",
  "https://binary-cry-collected-ethiopia.trycloudflare.com/api/auth/callback"
]

5，把分发的网址填充修改到vite.config.js
这步有的需要做，有的不需要进行补充，主要看你在做完前面后是否能正常运行

export default defineConfig 
({
  server: {
    host: true,  //改动1
    allowedHosts: ['binary-cry-collected-ethiopia.trycloudflare.com'], //改动2，其他不用改
    cors: {
      preflightContinue: true,
    },
    port: Number(process.env.PORT || 3000),
    hmr: hmrConfig,
    fs: {
      // See https://vitejs.dev/config/server-options.html#server-fs-allow for more information
      allow: ["app", "node_modules"],
    },
  },
  //文件完整代码就不贴出来了，按上面改动1和2改动后查看

有些电脑的情况不太一样，所以最后还是需要根据个人电脑情况进行开发和运行命令，文章内容仅提供一个参考和方法