node.js - 如何在生产服务器上部署 React Frontend + Node Backend?
问题描述
这是我第一次研究 React Frontend with Node Backend 这个主题。我现在有一个小问题,我已经投入了大量时间锁定解决方案,但没有成功。
我已经开发了一个联系表单,react.js
并antd
作为前端的设计和输入验证组件。对于后端部分,我使用 node express
,cors
并axios
用于执行 Web 请求。作为包管理器,我使用yarn
.
此联系表位于公共 GitHub 存储库中:https ://github.com/philippbck/react-nodemailer
在下面你可以找到我package.json
所有使用的依赖项:
{
"name": "react-nodemailer",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.19.1",
"axios": "^0.19.0",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"espress": "^0.0.0",
"nodemailer": "^6.2.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
这个联系表格在我的计算机上非常适合本地工作,但现在我想用 CentOS7 和 Apache Webserver 将它部署到我的生产云服务器上。但我的问题是如何?根据我的理解,我为反应前端部分创建了一个生产构建,yarn run build
并将构建文件夹中的所有文件放在我服务器上的 htdocs 文件夹中。对于位于项目根目录中的后端文件app.js
,我在服务器上创建了一个名为/apps
. 我使用服务器上的节点应用程序手动启动了节点服务。
当我使用联系表单打开我的网站并单击提交按钮时,会出现以下错误:
xhr.js:166 OPTIONS http://localhost:5000/send net::ERR_CONNECTION_REFUSED
我的问题是如何在生产服务器上部署我的联系表单以使其正常工作?我不想在这种情况下使用无服务器解决方案。非常感谢!
更新:
将 axios POST url 从“localhost”更改为我的生产 url“philipp-buck.de”后,现在会发生以下错误:
OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT
解决方案
Contactform.js 的后端 URL 硬编码为 . localhot:5000 [ https://github.com/philippbck/react-nodemailer/blob/master/src/contactform.js#L45]
您的生产前端需要指向生产后端。
推荐阅读
- spring-boot - Apache Camel - 空闲 AMQP1.0 连接
- c# - 使用 RestSharp 对 Bronto REST Api 进行身份验证
- python - 从字典列表中删除项目并将它们附加回来
- sql - 使用 SQL 中的提取获取昨天的详细信息
- c# - 如何为 WS-Security 生成 UsernameToken?
- google-closure-compiler - 如何在 --chunk 中为闭包编译器提供多个依赖项?
- android - Android webview 无法加载大型 html 内容(某些部分加载为白色)
- reactjs - Formik:按字段验证
- android - 在 LinearSnapHelper 中禁用或减慢投掷行为
- android - 如何使我的应用隐藏/消失在另一个特定应用的共享列表或手机默认共享列表中?