在 Azure 上部署时无法将 Node.js 应用程序连接到 React.js 应用程序

Question

我正在尝试在 Azure 上部署 MERN 应用程序（React.js 作为客户端，Node.js 作为服务器）。我创建了一个 Cosmos DB 帐户和数据库 (MongoDB)，并将我的 Node.js 应用程序连接到该数据库。

我无法在我的 Node.js 和 React.js 应用程序之间创建通信。

我创建了我的 React.js 应用程序的构建并粘贴到 Node.js 应用程序中并部署了 Node.js 应用程序。

我遇到了问题

'无法获取/'

我还尝试通过将整个 React.js 应用程序粘贴到 Node.js 应用程序的结构中来手动部署应用程序--

|- node-app
   |- client
       |- react-app
|- node-app rest files...

我不知道如何在生产环境中获取环境变量

我的 app.js 在下面--

require('dotenv').config();
require('./config/database.config');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req,res) =>{
  res.sendFile(path.join(__dirname+'/build/index.html'));
});

app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

我的数据库配置文件如下--

var mongoose = require('mongoose');

mongoose.connect(
  process.env.DB_CONN,
  {
    auth :{user : process.env.DB_USER, password : process.env.DB_PW},
    useNewUrlParser: true
  })
    .then(() => {
    console.log("Successfully connected to the database");    
  }).catch(err => {
    console.log('Could not connect to the database. Exiting now...', err);
    process.exit();
});

Answer 1

根据我的经验，我认为您的问题是由您的代码 app.use(express.static(path.join(__dirname, 'build'))); 服务于 npm run build 构建的 React 客户端的静态文件引起的。

在 Azure 上，变量 __dirname 在本地和 Azure 之间存在差异。在本地，__dirname 变量的值始终是您启动节点进程的完整路径名，例如 print __dirname 如果在 D:\home 的 CMD 中运行节点，将返回 D:\home。但在 Azure 上，您将在任何路径中看到 __dirname 值，即 .如果您尝试运行命令 node -e "const path = require('path'); console.log(__dirname);"在 Kudu 控制台中，如下图。

因此，path.join(__dirname, 'build') 的值始终为build，与 IIS 启动的节点的当前路径无关。所以要修复它，请在path.join方法中使用D:\home\site\wwwroot之类的绝对路径而不是__dirname变量，或者在express.static方法中直接使用D:\home\site\wwwroot\build。

如有任何疑问，请随时告诉我。