将你的Shopify App部署到fly.io上

当你的 Shopify App 在本地开发完成后,下一步就是部署上线,供 Shopify 商家使用。Shopify官方推荐将App部署在fly.io或者Render平台,本文先介绍如何将一个 Remix 构建的 Shopify App,部署到fly.io

一、fly.io介绍

Fly.io 是一个面向开发者的现代应用部署平台,允许你将 容器化的应用(如 Node.js、Go、Python、Rails 等)部署到全球多个边缘节点,以获得更快的响应速度和更好的可用性。

它的目标是:

"让开发者可以像部署本地应用一样,轻松把服务部署到全球。"

fly.io的主要特点:

  • 全球边缘部署:你可以将应用部署在靠近用户的节点(如东京、新加坡、法兰克福)

  • Docker 支持:Fly.io 支持基于 Docker 的自定义镜像部署

  • flyctl 工具链:通过命令行工具 flyctl 管理 app、部署、扩展实例等

  • 内建 TLS & Proxy:免费 HTTPS,自动路由请求到最近的节点

二、前置条件

在开始之前,请确保你具备以下准备:

  • 一个已注册并登录的 fly.io 账号

  • 安装了 Fly CLI 工具:

    brew方式安装

    brew install flyctl

    curl方式安装

    curl -L fly.io/install.sh | sh

三、部署到 Fly.io 的步骤

1. 登录fly.io

复制代码
fly auth login

以上命令输入后会自动跳转到浏览器进行账号登录,我这里是用的gmail邮箱登录

浏览器登录成功后,命令行中会显示登录成功的提示

2. 运行 fly.io

注意如果第一次运行fly launch,请参考我下面的命令

css 复制代码
fly launch --no-deploy --name adaptive-portfolio-app --internal-port 3000

这会在fly平台的Dashboard中创建一个名为adaptive-portfolio-app的项目,然后跳转至浏览器显示如下页面,你只需要确认设置就行

待命令行完成并输出如下信息

进入fly.io平台的Dashboard的页面,可以发现我们已经成功创建了一个应用

这时会在我们项目的根目录下生成一个fly.toml的配置文件,里面配置了我们部署到fly.io的配置信息,包括:

  • PORT:端口号

  • SCOPES:授权权限

  • SHOPIFY_API_KEY:这是我们App的API Key,可以在Shopify Partner后台查询

  • SHOPIFY_APP_URL:这是fly.io为我们部署的App创建的一个url,这个我们待会需要填写到Shopify Partner后台

还有一些fly.io部署机器的一些配置信息。

3. 发布 App

接下来我们需要先把我们的App发布一个版本

复制代码
shopify app deploy

4. 部署到 fly.io

接下来可以发布到fly.io了,请注意这里一定要加上--depot=false,否则大概率会运行超时

ini 复制代码
fly deploy --depot=false

命令运行完成后会输出如下信息

我们直接打开这里的地址: adaptive-portfolio-app.fly.dev/

如果你能打开上面的页面,恭喜你,已经成功部署到fly.io了,接下来怎么在我们的商店里面能看到我部署的App呢?

5. 在测试商店预览

进入Shopify Partner后台,然后进入App的Configuration页面,将前面步骤中的部署到fly.io的url填入到以下地方

然后进入App Overview页面,点击Select store,选择一个商店安装App来预览我们部署的App

接下来就可以在商店顺利打开我们部署的App了

关于Shopify App开发可以参考我的专栏,会不断更新:Shopify App开发专栏

关于我:

曾在字节跳动等大厂工作超过8年,有资深的移动端、前端开发经验,目前在做Shopify相关业务的创业,关注我,我们一起探索Shopify的精彩世界

卫星公众/小🍠:浅墨 momo

相关推荐
用户69371750013844 小时前
我买的电视,我还不能研究它吗?
前端·后端·ai编程
Hilaku5 小时前
删了一个没用的 console.log,生产环境直接崩了!
前端·javascript·程序员
计算机魔术师5 小时前
Latent Space 解读 Anthropic 提交 S-1:拟以代码 AN 上市纳斯达克,H1 2026 营收 16.3B 美元
前端
2601_949847755 小时前
Form-data 跨端三方库仓颉适配全流程
前端·javascript·flutter
zyseo85 小时前
谷歌SEO 内容更新焕新流程:让老页面重新起量
java·前端·javascript
夜雪一千5 小时前
标题特殊符号数据清洗实战:解决HTML实体、零宽字符、Emoji乱码踩坑
前端·html
richdata6 小时前
从采购承诺到库存周转:降低库存资金占用的六个计划杠杆
大数据·前端·javascript
计算机魔术师6 小时前
别人IPO发股票,Anthropic一口气搞出五类
前端
ai_coder_ai6 小时前
使用Web IDE边写自动化脚本
运维·前端·自动化
贾伟康7 小时前
【共创稿事节】一个 UserDataManager 管八类数据:Preferences 持久化的克制用法
java·服务器·前端·harmonyos·arkts·鸿蒙