Question

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

我在now.json中定义重定向，如下所示：

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

目标URL取决于环境变量BACKEND_URL，该环境变量在Vercel仪表板中定义。

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

但是很遗憾，now.json在构建时似乎不可用：

09：54：44.243 sed：现在无法读取。json：没有此类文件或目录

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

Answer 1

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

相反，请考虑使用类似Next.js的框架，该框架提供的next.config.js可以读取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，则只需在环境变量名称前加上RAX。看到这里：https://create-react-app.dev/docs/adding-custom-environment-variables/

我目前正在使用websocket URL env var执行此操作。我已将其命名为REACT_APP_，这是我的用法。

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

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。

我还没有尝试使用Vercel仪表板env vars进行此操作，但是除了将您的env var重命名为process.env.REACT_APP_WS_URL之外，尝试使用原始方法可能是值得的。

注意：仅当我没有为项目分配域时，我的部署命令才起作用。如果我将域分配给项目，则无论json配置文件中REACT_APP_BACKEND_URL字段中的内容如何，它们都会自动用于所有--prod部署。

Vercel重定向中的环境变量

2 个答案: