![](/img/trans.png)
[英]Deploying ReactJS app with NodeJS backend (using express) for server/database on heroku
[英]How can i run ReactJS app on nginx using nodejs on backend [on hold]
我在 reactjs + nodejs 中编写了应用程序我在服务器上安装了 nginx,但是我有一个问题,我不知道如何构建应用程序我做了这样的事情:
server {
listen 80;
server_name 54.38.184.210;
location / {
#proxy_pass http://54.38.184.210:3000;
#proxy_buffering off;
root /root/site/dist/;
index index.html;
try_files $uri /index.html;
}
}
After that, I run: npm run build I got dist folder, now when i go to http://54.38.184.210 I can see the site, but the server is not working, I don't know how to put it all together ,在我使用proxy_pass后,站点无法正常工作!
我在 node.js 中有后端
我也尝试设置代理我的服务器:3000,然后我的网站正在工作(你可以在这里查看http://54.38.184.210/ )但它第一次加载这么长时间,我在控制台中遇到了一些错误,如 [WDS ] 断线!
我的树
my tree
node_modules
public
src
/client
/components
index.js -> react routes
/server
/index.js -> node.js file
some config files
对,继续我们之前的对话。
这是一个基本的示例应用程序
const path = require('path');
const express = require('express');
const app = express();
// {... your app.use statements}
// make sure this is after all your other app.use statements
app.use('/', express.static(path.resolve(__dirname, './public')));
app.use('*', (req, res) => {
res.sendFile(path.resolve(__dirname, './public', 'index.html'));
});
app.listen(3000);
在您的 node.js 应用程序中创建一个名为public
的文件夹,并将您的 react dist 文件放在那里。 然后只需将 nginx 代理传递给您的节点应用程序。
根据您的 node.js 应用程序代码的 rest,这可能会或可能不会起作用。 如果您将明确的代码与您的use
声明一起提供给我们,我可以更具体地告诉您该怎么做。
我正在处理这样的所有请求:
app.post('/api/getProfile', function(req, res){
getProfile(req.body.userEmail, req.body.userPass).then(function(data) {
if(data.Info=="success"){
res.send(data);
}else{
res.send({Info:"Zaloguj się!"});
}
})
});
我已经加了
app.use('/', express.static(path.resolve(__dirname, '../../public')));
app.use('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '../../public', 'index.html'));
});
我的 nginx 文件如下所示:
server {
listen 80;
server_name 54.38.184.210;
location / {
proxy_pass http://54.38.184.210:3000;
}
}
我现在该怎么办? 在公共目录中我得到了 index.html favicon 我应该如何启动应用程序 - 我在这里使用 webpack 和 babel
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: ['babel-polyfill', './src/client/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)$/,
loader: 'url-loader?limit=100000'
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
host: '54.38.184.210',
port: 3000,
proxy: {
'/api': 'http://localhost:8080'
}
},
plugins: [
new CleanWebpackPlugin([outputDirectory]),
new HtmlWebpackPlugin({
template: './public/index.html',
favicon: './public/favicon.ico'
})
]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.