我如何在后端使用 nodejs 在 nginx 上運行 ReactJS 應用程序 [暫停]

Question

我在 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

Answer 1

對，繼續我們之前的對話。

這是一個基本的示例應用程序

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聲明一起提供給我們，我可以更具體地告訴您該怎么做。

Answer 2

我正在處理這樣的所有請求：

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'
    })
  ]
};