当你的 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