node.js - 如何使用 json-server 部署reactJS应用程序

Question

我实际上已经通过以下方式部署了我的 React-app:-

1. 运行命令:npm run build
2. 已经有包含虚拟数据的 db.json 文件。 上下文，当我运行时 json-server --watch db.json -p 3001 -d 2000 整个react-app在本地主机上运行
3. 使用 npm 安装了 json-server
4. 创建了一个 server.js 文件

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3001;

server.use(middlewares);
server.use(router);

server.listen(port);

在heroku上创建应用程序并将其推送到heroku master 由于某种原因，该网站仅在我运行 node server.js 时才有效。在我的本地计算机上，它正在向我的本地端口发出请求。 如果该命令未运行，react-app 无法向数据库执行 axios 请求。 我不知道出了什么问题。 我为此使用了以下教程:https://github.com/jesperorb/json-server-heroku

我怀疑在我的代码中我创建了一个 basUrl.js 文件，其中

export const baseUrl = 'http://localhost:3001/';

我应该如何更改它来解决我的问题？

感谢您的帮助。

Answer 1

您应该链接使用服务器(server.js)构建的 react 文件夹，为此添加:

const express = require('express');
const path = require('path');

app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

“build”是在 npm run build 到 React 应用文件夹中后创建的 React 应用文件夹。

如果没有，您必须安装 path 和 express 模块。

并且，您应该在“get”函数中获取 json-server 数据库，以将其与特定的 url 一起使用，例如:/db，就像这样:

app.use('/db', middlewares, router);

但是您应该将 /db 放在 /* 之前，以免使用 url / 打开数据库。

因此，结果(server.js)将是:

const jsonServer = require('json-server');
const app = jsonServer.create();
const path = require('path');
const express = require('express');
const middlewares = jsonServer.defaults();
const router = jsonServer.router('db.json');
const port = process.env.PORT || 3001;

app.use('/db', middlewares, router);
app.use(express.static(path.join(__dirname, 'build')));

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

server.listen(port);