reactjs - 使用 Heroku 的 React + Express + SQLite 部署在 Get="/" 上给出 404

问题描述

我正在尝试create-react-app在 Heroku 上部署一个连接到 SQLite 数据库的 Express 服务器。在开发中一切正常，但是，在生产中生成以下日志，其中method=GET path="/"返回一个404.

2020-05-30T03:22:53.000000+00:00 app[api]: Build succeeded
2020-05-30T03:22:54.639920+00:00 heroku[web.1]: Starting process with command npm start
2020-05-30T03:22:57.641882+00:00 app[web.1]:
2020-05-30T03:22:57.641918+00:00 app[web.1]: > heroku-app@0.1.0 start /app
2020-05-30T03:22:57.641919+00:00 app[web.1]: > node server
2020-05-30T03:22:57.641919+00:00 app[web.1]:
2020-05-30T03:22:58.146414+00:00 app[web.1]: Node listening on port 15383
2020-05-30T03:22:58.147490+00:00 app[web.1]: Connected to material failures database
2020-05-30T03:22:58.697030+00:00 heroku[web.1]: State changed from starting to up
2020-05-30T03:23:25.514258+00:00 heroku[router]: at=info method=GET path="/" host=frozen-cliffs-13786.herokuapp.com request_id=24311843-65ba-49df-8464-195716354495 fwd="205.206.229.151" dyno=web.1 connect=1ms service=18ms status=404 bytes=493 protocol=https

我打电话给路由器react-ui/src/index.js

import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

// CSS
import './css/main.css';

import React    from 'react';
import ReactDOM from 'react-dom';
import Router from './components/router.component.js';

ReactDOM.render( <React.StrictMode> <Router /> </React.StrictMode>, document.getElementById( 'root' ) );

我的文件夹结构如下：

heroku-app
    react-ui
       node_modules
       public
       src
       .gitignore
       package-lock.json
       package.json
    server
    .gitignore
    app.json
    package.json
    package-lock.json
    static.json

老实说，我已经尝试了所有方法，例如：

添加一个static.json

{
  "root": "react-ui/build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

server/index.js在我的文件中添加“包罗万象” 。我试过了*，/*并且/

const path        = require( 'path' );
const express     = require( 'express' );
const bodyParser  = require( 'body-parser' );
const compression = require( 'compression' );
const cors        = require( 'cors' );
const helmet      = require( 'helmet' );
const router      = require( './router.js' );

const PORT = process.env.PORT || 5000;
const app  = express();


app.use( cors() )
app.use( helmet() )
app.use( compression() )
app.use( bodyParser.urlencoded( { extended: false } ) )
app.use( bodyParser.json() )

app.use( '/api', router )

app.use( function ( err, req, res, next ) 
{
    console.error( err.stack )

    res.status( 500 ).send( 'Response 500: Server Error. Very Frustrating!' )
} )

app.use( function ( req, res, next ) 
{
    res.status( 404 ).send( 'Response 400: Page Not Found. Hmmmm...' )
} )

app.use( express.static( path.resolve( __dirname, '../react-ui/build' ) ) );

app.get( '*', function( request, response ) 
{
    response.sendFile( path.resolve( __dirname, '../react-ui/build', 'index.html' ) );
} );

app.listen( PORT, function () 
{
    console.error( `Node listening on port ${ PORT }` );
} );

添加homepage到这两个package.json文件。我已经尝试.过https://frozen-cliffs-13786.herokuapp.com/

在根...

{
  "name": "heroku-app",
  "version": "0.1.0",
  "homepage":".",
  "description": "materials failure database web application",

  "engines": {
    "node": "10.x"
  },
  "scripts": {
    "start": "node server",
    "build": "cd react-ui && npm install && npm run build"
  },
  "cacheDirectories": [
    "node_modules",
    "react-ui/node_modules"
  ],
  "dependencies": {
    "body-parser": "^1.19.0",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "helmet": "^3.22.0",
    "sqlite3": "^4.2.0",
    "lodash": "^4.17.15"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/joleneborrelli-uofa/material-failures-database.git"
  },
  "keywords": [
    "node",
    "heroku",
    "create-react-app",
    "react"
  ],
  "license": "MIT",
  "devDependencies": {}
}

在反应-ui...

{
  "name": "react-ui",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "homepage":".",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "lodash": "^4.17.15",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

BrowserRouter和HashRouter, 有和没有basename属性之间的交换react-ui/src/components/router.component.js

import React    from 'react';
import Homepage from './homepage.component.js';
import Page     from './page.component.js';

// React Router
import 
{
  BrowserRouter,
  Switch,
  Route
} from "react-router-dom";


export default function Router()
{
    return (
        <BrowserRouter basename={`${process.env.PUBLIC_URL}/`}>
            <div>
                <Switch>
                    <Route exact path="/" component={ Homepage } />
                    <Route path="/:page/:id" exact component={ Page } />
                </Switch>
            </div>
        </BrowserRouter>
    );
};

我可能很快就会把头发拔掉。

标签： reactjssqliteexpressherokureact-router

reactjs - 使用 Heroku 的 React + Express + SQLite 部署在 Get="/" 上给出 404

问题描述

解决方案

推荐阅读