项目与Node Server + React UI (Typescript) heroku只显示节点后端

Question

我创建了一个Github项目，结合服务器(Node.js)和UI (React)，用于一个简单的web应用程序，试图学习MERN堆栈。应用程序运行良好，Heroku弹出了"up"。国家也是如此。我曾尝试将应用程序部署到Heroku，但奇怪的是，我只看到服务器端组件渲染。ui不会出现。你有什么建议我做错/遗漏了什么吗?

文件夹结构:

.
|- package.json
|- server/
|  |- src/
|  |- package.json
|  |- tsconfig.json
|- ui/
|  |- src/
|  |- package.json
|  |- tsconfig.json

我的文件相关内容如下:

。/package.json

{
"scripts": {
"build": "cd ui/ && npm install && npm run build",
"start": "cd server/ && npm install && npm start"
},
}

。/服务器/package.json

{
"main": "src/server.ts",
"scripts": {
"clean": "rimraf build",
"build": "npm run clean && tsc",
"start": "npm run build && node build/server.js",
"test": "echo "Error: no test specified" && exit 1"
}
}

。/ui/package.json

{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}

Answer 1

您不能简单地将包含前端和后端应用程序的整体存储库推送到Heroku。

部署Node.js应用程序，Heroku希望package.json中的启动脚本执行单个进程。在您的示例中，这将通过使用./server/package.json启动ExpressJS服务器。这很好，但是你不能同时启动你的React应用。

你能做的就是从ExpressJS服务器上提供React应用。步骤如下:

• 使用heroku-postbuild脚本自定义Heroku构建过程，将React代码构建到从后面
提供服务的位置
• 设置一个中间件，从您指定的构建位置静态地为您的React应用程序服务app.use(express.static(path.resolve(__dirname, "./client/build")));

更多细节，请阅读这篇文章。