前面写过两篇部署Shopify App相关的文章,分别是部署在fly.io和Render上面,这两个都是Shopify官方推荐的第三方托管平台,虽然好用,但是终归是要花钱的。上周我把我们的Shopify App都从Render迁移到自己的云服务器上了,以下是部署流程:
1. 准备项目文件
首先,将项目代码上传到Ubuntu服务器上,可以使用git clone或者scp等方式,这里我使用git方式,先打开服务器,然后git clone项目代码
# 先cd到想要放置项目代码的目录,然后使用git clone代码
git clone <your-git-repository-url>
cd your_app_dir
2. 创建环境变量
项目需要一个.env文件来存储配置。基于Shopify应用需求和Prisma数据库配置,创建.env文件:
touch .env
编辑.env文件,添加必要的环境变量:
SHOPIFY_API_KEY=your_app_key
SHOPIFY_API_SECRET=your_app_secret
SHOPIFY_APP_URL=https://your_app_domain
SCOPES=read_customers,read_themes,write_products
NODE_ENV=production
3. 构建Docker镜像
使用项目中的Dockerfile构建Docker镜像:
docker build -t you_app_name .
4. 运行Docker容器
docker run -d \
--name you_app_name \
-p 3000:3000 \
--env-file .env \
-v $(pwd)/prisma:/app/prisma \
you_app_name
这个命令会:
-
以后台模式运行容器
-
将容器的3000端口映射到主机的3000端口
-
从.env文件加载环境变量
-
将本地prisma目录挂载到容器内的/app/prisma,确保数据库文件持久化
5. 设置反向代理
设置Nginx反向代理,在Nginx配置文件中添加以下配置,我的Nginx配置文件的位置是:/etc/nginx/sites-available/default
server {
listen 80;
server_name your-domain.com; // 注意这里的domain必须与上面.env文件中填写的SHOPIFY_APP_URL一致
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
启用配置并重启Nginx:
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
6. Docker容器管理命令
# 查看正在运行的容器
docker ps
# 查看容器日志
docker logs -f you_app_name
# 停止容器
docker stop you_app_name
# 启动容器
docker start you_app_name
# 重启容器
docker restart you_app_name
# 删除容器(如需重建)
docker rm you_app_name
7. 设置自动启动
确保Docker服务配置为开机自启动,并且容器设置为自动重启:
# 确保Docker服务开机自启
sudo systemctl enable docker
# 使用--restart=always参数重新运行容器
docker run -d \
--name you_app_name \
-p 3000:3000 \
--env-file .env \
-v $(pwd)/prisma:/app/prisma \
--restart=always \
you_app_name
8. 配置Partner后台App url
这个步骤和前面的fly.io和Render部署类似,进入Shopify Partner后台,然后进入App的Configuration页面,将前面步骤中的SHOPIFY_APP_URL的值(https://your\_app\_domain)填入到以下地方
然后进入App Overview页面,点击Select store,选择一个商店安装App来预览我们部署的App
接下来就可以在商店顺利打开我们部署的App了
9. 编写Docker脚本
从上面的docker启动命令可以看出这个命令还是比较长的,而且每次更新代码后重新部署的时候要先重新编译,然后暂停并移除之前的docker容器,再重新启动新的docker容器,步骤比较繁琐,所以我这里写了一个脚本,每次更新代码之后直接运行脚本就可以直接完成所有的流程,非常方便
./docker-build.sh
关于Shopify App开发可以参考我的专栏,会不断更新:Shopify App开发专栏
关于我:
曾在字节跳动等大厂工作超过8年,有资深的移动端、前端开发经验,目前在做Shopify相关业务的创业,关注我,我们一起探索Shopify的精彩世界。
卫星公众/小🍠:浅墨 momo