在自己的云服务器上部署Shopify App

91 阅读2分钟

前面写过两篇部署Shopify App相关的文章,分别是部署在fly.ioRender上面,这两个都是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