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

Question

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

运行命令：npm 运行 build
已有 db.json 个包含虚拟数据的文件。上下文，当我运行 json-server --watch db.json -p 3001 -d 2000 整个反应应用程序在本地主机上工作
使用 npm
创建了一个 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 在我的本地计算机上运行时才有效，并且它正在向我的本地端口发出请求。如果该命令不是运行ning，则 react-app 无法对数据库执行 axios 请求。我不知道出了什么问题。我为此使用了以下教程：https://github.com/jesperorb/json-server-heroku

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

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

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

感谢您的帮助。

Answer 1

您应该 link 您使用服务器构建的 React 文件夹 (server.js)，为此添加：

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);

Answer 2

我的 JSON 服务器上也有 Heroku 运行。您需要将您的 API 路径更正为您的资源名称，例如；

如果您的 API 中的资源名称是 'blogs'；

    {
  "blogs": [
    {
      "postTitle": "My First Blog",

那么您的 api 路径将是；

https://xxxx.herokuapp.com/blogs

或

export const baseUrl = 'https://xxxx.herokuapp.com/blogs';

您不需要指定端口，但如果您这样做，它将是 Heroku 使用的端口 4000。

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

How to deploy reactJS app with json-server

json

heroku

node.js

reactjs

json-server