因此，我使用create-react-app构建了一个简单的MERN应用，并将其部署到Heroku。我在运行在localhost：3000上的客户端文件夹中构建前端，该文件夹将请求发送到我的express服务器作为localhost：5000的代理。我的文件结构如下：
+client
|
+-node_modules
+-public
+-src
|
+-components
+-App.js
+-index.js
//server
+-models
+-node-modules
+-package-lock.json
+-package.json
+-server.js
我已经package-json像这样设置了代理： "proxy": "http://localhost:5000",
所以我的主要问题是：如何配置API端点进行部署？
目前，它们的结构如下：
来自React组件的API调用：
useEffect(() => {
axios.get("http://localhost:5000/api/all-cafes")
.then((cafe) => {
setCafe(cafe.data);
})
.catch((err) => {
console.log(err);
})
}, [])
在server.js上表达功能
app.get('/api/all-cafes', (req,res) => {
Cafe.find()
.then((result) => {
res.send(result)
})
.catch(err => {
console.log(err)
})
})
我的另一个问题是.env文件的作用是什么，我是否需要解决这个问题？
我有一个有用的建议，说我可以在不同的服务器上运行前端和后端，并使用以下代码根据是开发阶段还是生产阶段来调整代码：
const prefix = process.env.NODE_ENV === 'production' ? "http://heroku_app_address" : "http://localhost:5000"
function getUrl(relativeUrl) {
return prefix + "/" + relativeUrl;
}
fetch(getUrl('api/all-reviews'));
但是我不确定如何实现此功能，我是否需要.env文件以及（如果需要）该文件中的内容。
该.env文件可以帮助您specifiy某些凭证或基于部署环境无论是要改变端点（dev，qa，prod可有differewnt API端点），或者你要提供一定的密钥或配置，否则不应该是你的代码库的一部分（clientSecret等）。
该create-react-app.dev/docs有详细解释这些。
如果您尚未使用引导您的应用程序，create-react-app则可以使用dot-envnpm软件包。这里详细说明了步骤：堆栈溢出：向React Project中添加.env文件
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句