Vercel 重定向中的环境变量

Question

我想将我的 create-react-app 部署到 Vercel。

我在 now.json 中定义我的重定向如下：

{
   "redirects": [
      { "source": "/api/(.*)", "destination": "BACKEND_URL/", "statusCode": 200 }
   ]
}

目的地 URL 取决于在 Vercel 仪表板中定义的环境变量 BACKEND_URL。

我正在尝试在以下构建命令中替换重定向中的环境变量： sed -i "s|BACKEND_URL|${BACKEND_URL}|g" now.json && yarn build

但不幸的是 now.json 在构建时似乎不可用：

09:54:44.243 sed: can't read now.json: No such file or directory

如何在 Vercel 中启用动态重定向？

Answer 1

这是不可能的，因为读取 now.json 以确定如何构建，因此您不能在构建期间动态生成它。

相反，请考虑使用像 Next.js which provides a next.config.js that can read environment variables as defined in RFC 9081 这样的框架。

npm install next@canary react react-dom

// next.config.js
module.exports = {
  experimental: {
    async redirects() {
      return [{
        source: "/api/:path*",
        destination: `${process.env.BACKEND_URL}/:path*`,
        permanent: false,
      }]
    }
  }
};

https://github.com/zeit/now/discussions/4351

Answer 2

我认为这实际上是可能的。如果您使用 create-react-app，那么您只需要在您的环境变量名称前加上 REACT_APP_。看这里：https://create-react-app.dev/docs/adding-custom-environment-variables/

我目前正在使用 websocket URL env var 执行此操作。我将其命名为 REACT_APP_WS_URL，下面是我如何使用它。

我在项目中有 2 个不同的 vercel 文件：

vercel.staging.json 有这个部分：

  "build": {
    "env": {
      "REACT_APP_WS_URL": "wss:staging.my-backend.com/socket"
    }
  }

vercel.live.json 有这个部分：

  "build": {
    "env": {
      "REACT_APP_WS_URL": "wss:my-backend.com/socket"
    }
  }

我使用以下任一命令向他们部署：

vercel deploy --prod -A vercel.staging.json

vercel deploy --prod -A vercel.live.json

在我的代码中，我可以在任何地方访问 process.env.REACT_APP_WS_URL。

我没有尝试使用 Vercel 仪表板环境变量执行此操作，但可能值得尝试您的原始方法，除非将您的环境变量重命名为 REACT_APP_BACKEND_URL.

注意：我的部署命令只有在我没有为项目分配域时才有效。如果我将域分配给一个项目，它们将自动用于所有 --prod 部署，无论 json 配置文件中我的 alias 字段是什么。

Vercel 重定向中的环境变量

Environment variable in Vercel redirects

create-react-app

vercel