我想将我的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中启用动态重定向？
这是不可能的，因为已读取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
,我认为这实际上是可能的。
如果您使用的是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部署。