时间戳

首页 > 解决方案 > 客户端（react）和服务器（nodejs）在同一个文件夹中时的问题

node.js - 客户端（react）和服务器（nodejs）在同一个文件夹中时的问题

问题描述

我正在尝试将我的 Web 应用程序（我的客户端和服务器位于同一个主文件夹）部署到 Heroku，但我遇到了一些烦人的问题，即服务器没有为 react 构建文件夹提供服务。

这是我的项目文件夹树：

/client
/api
app.js
server.js

app.js=> 路线、加载模型、控制器等

server.js=> 服务器配置

这是 的内容server.js，我相信问题就在这里

const app = require('./app');
const path = require('path');
const cors = require('cors');
const express = require('express');

app.use(cors())

if (process.env.NODE_ENV === "production") {
  console.log('we are on production!')
  app.use(express.static('./client/build'));
  app.get('*', (req, res) => {
    console.log('redirecting to react app build')
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"))
  });
}

const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listening on PORT ${port}`))

它永远不会到达那个console.log('redirecting to the react app build')部分

当我进入我的 heroku 服务器时，我面对的是服务器端，而不是我的 react 构建。为什么呢？

标签： node.jsreactjsheroku

解决方案

我刚刚使用您的架构创建了一个测试项目。我的项目现在正在运行并上传到 Heroku。我将详细说明我刚刚执行的所有步骤，以使其根据给定的信息工作。

所以我的项目架构：

client/ // from CRA
package.json
server.js
.env

配置您的环境变量：

heroku config:set NODE_ENV=production // this for production heroku

在我的.env文件中，我设置了本地环境变量，例如：

NODE_ENV=production

这是我定义的主package.json文件，heroku-postbuild用于创建客户端构建文件夹。

{
  "name": "foo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "mit",
  "dependencies": {
    "cors": "2.8.5",
    "express": "4.17.1",
    "path": "0.12.7"
  },
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn build"
  }
}

而且server.js文件，和提供的几乎一样

const path = require('path');
const cors = require('cors');
const express = require('express');
const app = express()
app.use(cors())

if (process.env.NODE_ENV === "production") {
  console.log('we are on production!')
  app.use(express.static('client/build'));
  app.get('*', (req, res) => {
    console.log('redirecting to react app build')
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"))
  });
}

const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listening on PORT ${port}`))

你可以在本地运行 Heroku，输入这个命令heroku local会加载.env带有环境变量的文件。

要测试生产 Heroku，您必须输入heroku open. 不要忘记使用我上面写的命令设置“生产”环境变量。

一切正常。如果您愿意，我可以将我的代码上传到 Github。

推荐阅读