Node.js 如何部署React前端&x2B;生产服务器上的节点后端?
这是我第一次研究主题React Frontend with Node Backend。 我现在有一个小问题,我花了很多时间锁定一个解决方案,但没有成功 我用Node.js 如何部署React前端&x2B;生产服务器上的节点后端?,node.js,reactjs,frontend,backend,nodemailer,Node.js,Reactjs,Frontend,Backend,Nodemailer,这是我第一次研究主题React Frontend with Node Backend。 我现在有一个小问题,我花了很多时间锁定一个解决方案,但没有成功 我用react.js和antd作为前端的设计和输入验证组件开发了一个联系表单。对于后端部分,我使用nodeexpress、cors和axios来执行web请求。作为包装经理,我使用纱线 此联系表格位于公共GitHub回购中: 您可以在下面找到我的包.json以及所有使用的依赖项: { "name": "react-nodemailer",
react.js
和antd
作为前端的设计和输入验证组件开发了一个联系表单。对于后端部分,我使用nodeexpress
、cors
和axios
来执行web请求。作为包装经理,我使用纱线
此联系表格位于公共GitHub回购中:
您可以在下面找到我的包.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和ApacheWebServer将其部署到我的生产云服务器。但我的问题是怎么做?据我所知,我使用warn run build
为react前端部件创建了一个生产构建,并将构建文件夹中的所有文件放在服务器上的htdocs文件夹中。对于位于项目根目录中的后端文件app.js
,我在服务器上创建了一个名为/apps
的根文件夹。我在服务器上用node app手动启动了node服务
当我使用联系人表单打开我的网站并单击“提交”按钮时,出现以下错误:
xhr.js:166 OPTIONS http://localhost:5000/send net::ERR_CONNECTION_REFUSED
OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT
我的问题是如何在生产服务器上部署我的联系人表单以使其正常工作?我不想在这种情况下使用无服务器解决方案。多谢各位
更新:
将axios POST url从“localhost”更改为我的产品url“philipp buck.de”后,现在出现以下错误:
xhr.js:166 OPTIONS http://localhost:5000/send net::ERR_CONNECTION_REFUSED
OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT
Contactform.js具有硬编码到的后端URL。本地热:5000[
您的生产前端需要指向生产后端。您应该通过
您是在后端启用
cors
还是在前端使用代理?您应该响应您的html
// in the beginning of app
app.use(express.static('public'));
// ...your code
// serves frontend application
app.get('/*', (req, res) => {
res.sendFile(path.resolve('public/index.html'), { root: __dirname }, err => {
if (err) {
res.status(500).send(err);
}
});
});
我已在后端启用cors。我的配置具有以下标题:
标题始终设置访问控制允许源”https://philipp-buck.de“Header always set Access Control Allow Methods”发布、获取、选项、删除、放置“Header always set Access Control Max Age”1000“Header always set Access Control Allow Headers”“x-requested-with、内容类型、来源、授权、接受、客户端安全令牌"
您必须安装https
如果请求包含https
此外,您必须关闭防火墙或打开端口。安装并配置了https和有效的ssl证书。我允许防火墙上的端口5000使用iptables-A INPUT-p tcp--dport 5000-j ACCEPT
,但我收到了错误消息 选择权https://philipp-buck.de:5000/send net::ERR\u CONNECTION\u TIMED\u发送联系人表单时出错。我已完全禁用防火墙,但没有帮助。谢谢你的回答!但没有帮助。我已添加了你的代码并更新了github repo。我的后端文件app.js
位于/apps
中。我需要重新配置吗lve从htdocs
文件夹中的/apps
索引.html
路径?新的错误消息是xhr.js:166选项https://philipp-buck.de:5000/send net::ERR\u CONNECTION\u TIMED\u OUT
我没有看到const path=require('path'))
尝试使用localhost更多尝试=更好的结果:)另外,我不知道你为前端构建的文件夹是什么,也许你应该在dist/build dirs上更改public,如果你使用vps/vds,尝试使用daemon,就像有人提到的pm2pm2 start app.js
谢谢你的帮助!我已经将localhost更改为我的生产url新的错误消息是xhr.js:166选项https://philipp-buck.de:5000/send 网络::连接出错超时
。