部署Shopify Remix应用至Vercel时遭遇504超时问题
部署Shopify Remix应用到Vercel时出现504超时问题
问题背景
我在开发模式下构建的Shopify Remix应用通过shopify app dev运行正常,随后将代码推送到新GitHub仓库并关联至Vercel的Remix项目,同时在Vercel中配置了与本地.env一致的环境变量。但部署后重新加载Shopify应用时出现504超时错误。
已完成的配置修改
- 更新vite.config.ts,引入
vercelPreset并配置Remix插件使用该预设:
import { vercelPreset } from '@vercel/remix/vite';
完整配置:
export default defineConfig({ server: { port: Number(process.env.PORT || 3000), hmr: hmrConfig, fs: { allow: ["app", "node_modules"], }, }, plugins: [ remix({ presets: [vercelPreset()], ignoredRouteFiles: ["**/.*"], }), tsconfigPaths(), ], build: { assetsInlineLimit: 0, }, }) satisfies UserConfig;
- 更新shopify.app.toml文件,设置Vercel域名及重定向URL:
application_url = "https://project-name.vercel.app"
(已确认部署后Shopify合作伙伴控制台中该配置已同步)
- 更新schema.prisma,改为使用与Vercel兼容的PostgreSQL:
datasource db { provider = "postgresql" url = env("POSTGRES_PRISMA_URL") directUrl = env("POSTGRES_URL_NON_POOLING") }
- 在本地.env和Vercel环境变量中配置AWS PostgreSQL数据库信息,同时为连接池和非连接池使用了相同URL(因AWS数据库名称为“-”,故URL中使用“postgres”作为数据库名):
postgresql://USERNAME:PASSWORD@db-instance-name.3439notreal874y73.ap-southeast-2.rds.amazonaws.com:5432/postgres?schema=public
- 修改migration.sql,将DATETIME替换为TIMESTAMP:
-- CreateTable CREATE TABLE "Session" ( "id" TEXT NOT NULL PRIMARY KEY, "shop" TEXT NOT NULL, "state" TEXT NOT NULL, "isOnline" BOOLEAN NOT NULL DEFAULT false, "scope" TEXT, "expires" TIMESTAMP, "accessToken" TEXT NOT NULL, "userId" BIGINT, "firstName" TEXT, "lastName" TEXT, "email" TEXT, "accountOwner" BOOLEAN NOT NULL DEFAULT false, "locale" TEXT, "collaborator" BOOLEAN DEFAULT false, "emailVerified" BOOLEAN DEFAULT false );
- 修改shopify.server.ts,引入Vercel适配器:
import "@shopify/shopify-app-remix/adapters/vercel";
- 将大部分
@remix-run/node替换为@vercel/remix,例如:
import type { LoaderFunctionArgs } from "@vercel/remix";
仅保留entry.server.tsx中的以下引用未修改:
import { createReadableStreamFromReadable, type EntryContext, } from "@remix-run/node";
依赖安装情况
执行npm install后结果显示依赖正常,仅存在9个低风险漏洞:
up to date, audited 1149 packages in 6s 306 packages are looking for funding run `npm fund` for details 9 low severity vulnerabilities To address all issues possible (including breaking changes), run: npm audit fix --force Some issues need review, and may require choosing a different dependency.
依赖版本列表如下:
├── @prisma/client@5.22.0 ├── @remix-run/dev@2.15.3 ├── @remix-run/eslint-config@2.15.3 ├── @remix-run/node@2.15.3 ├── @remix-run/react@2.15.3 ├── @remix-run/serve@2.15.3 ├── @shadcn/ui@0.0.4 ├── @shopify/api-codegen-preset@1.1.4 ├── @shopify/app-bridge-react@4.1.6 ├── @shopify/app-bridge@3.7.10 ├── @shopify/polaris@12.27.0 ├── @shopify/shopify-app-remix@3.7.1 ├── @shopify/shopify-app-session-storage-prisma@5.2.3 ├── @types/eslint@8.56.12 ├── @types/node@22.13.4 ├── @types/react-dom@18.3.5 ├── @types/react@18.3.18 ├── @vercel/remix@2.15.3 ├── autoprefixer@10.4.20 ├── axios@1.7.9 ├── dotenv@16.4.7 ├── eslint-config-prettier@9.1.0 ├── eslint@8.57.1 ├── express-session@1.18.1 ├── express@4.21.2 ├── graphql-request@7.1.2 ├── isbot@5.1.22 ├── node-fetch@3.3.2 ├── postcss@8.5.2 ├── prettier@3.5.1 ├── prisma@5.22.0 ├── react-dom@18.3.1 ├── react@18.3.1 ├── typescript@5.7.3 ├── vite-tsconfig-paths@5.1.4 └── vite@5.4.14
错误信息
部署后出现以下504超时错误:
This Serverless Function has timed out. Your connection is working correctly. Vercel is working correctly. 504: GATEWAY_TIMEOUT Code: FUNCTION_INVOCATION_TIMEOUT ID: syd1::dpz7m-1739602920446-a36b8deef67a If you are a visitor, contact the website owner or try again later. If you are the owner, learn how to fix the error and check the logs.
请问我是否遗漏了某些配置步骤导致该问题?
内容的提问来源于stack exchange,提问作者JTR
相关产品推荐
相关产品推荐

