Domanda React Routing funziona nella macchina locale ma non in Heroku


Reagire / reagire router / domanda heroku qui (probabilmente è heroku dove sta fallendo).

Sto seguendo questo meraviglioso tutorial: https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.y77yjte2j e tutto funziona fino al punto in cui lo posta su heroku e cerco di navigare https://appname.herokuapp.com/about e ottengo un errore 404 Not Found / nginx. Ovviamente, per il tutorial si suppone che visualizzi una pagina About.

Linea di fondo: Il router React non funziona su heroku e non riesco a capire perché.

Ho provato a modificare il mio server/app.js file come suggerito in questo: Le rotte di reazione non funzionano nel build di create-react-app di Facebook 

// server/app.js
const express = require('express');
const morgan = require('morgan');
const path = require('path');

const app = express();

console.log('hi from /src/server.js')
// Setup logger
app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// Always return the main index.html, so react-router render the route in the client

app.get('/about', (req, res) => {

  console.log('hi from app.get.about')
  console.log(req)
  console.log(res)
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});
app.get('/*', (req, res) => {

  console.log('hi from app.get')
  console.log(req)
  console.log(res)
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});


module.exports = app;

ma non funziona e non registra nulla nella console:

2017-01-20T21:03:47.438140+00:00 heroku[web.1]: Starting process with command `bin/boot`
2017-01-20T21:03:49.540005+00:00 app[web.1]: Injecting runtime env into /app/build/static/js/main.242e967b.js (from .profile.d/inject_react_app_env.sh)
2017-01-20T21:03:49.695317+00:00 app[web.1]: Starting log redirection...
2017-01-20T21:03:49.695899+00:00 app[web.1]: Starting nginx...
2017-01-20T21:03:51.108255+00:00 heroku[web.1]: State changed from starting to up
2017-01-20T21:04:22.720627+00:00 heroku[router]: at=info method=GET path="/" host=sentieoapp1.herokuapp.com request_id=fb8bc13b-f6b5-47bc-8330-443f28e211df fwd="132.147.73.97" dyno=web.1 connect=0ms service=3ms status=200 bytes=627
2017-01-20T21:04:22.746761+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:22 +0000] "GET / HTTP/1.1" 200 386 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:23.076521+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:23 +0000] "GET /static/js/main.242e967b.js HTTP/1.1" 200 62263 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:23.056416+00:00 heroku[router]: at=info method=GET path="/static/js/main.242e967b.js" host=sentieoapp1.herokuapp.com request_id=436d5ce5-ee39-4ab7-9e12-f5871e0fd552 fwd="132.147.73.97" dyno=web.1 connect=0ms service=25ms status=200 bytes=62540
2017-01-20T21:04:23.745285+00:00 heroku[router]: at=info method=GET path="/static/css/main.9a0fe4f1.css" host=sentieoapp1.herokuapp.com request_id=80438aaa-58c4-456e-8df9-7a29e49bc4ba fwd="132.147.73.97" dyno=web.1 connect=0ms service=2ms status=200 bytes=560
2017-01-20T21:04:23.766676+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:23 +0000] "GET /static/css/main.9a0fe4f1.css HTTP/1.1" 200 301 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:24.044940+00:00 heroku[router]: at=info method=GET path="/static/media/logo.5d5d9eef.svg" host=sentieoapp1.herokuapp.com request_id=bcbc1906-3b90-4f13-a700-f432f79c725d fwd="132.147.73.97" dyno=web.1 connect=0ms service=1ms status=200 bytes=2902
2017-01-20T21:04:24.065013+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:24 +0000] "GET /static/media/logo.5d5d9eef.svg HTTP/1.1" 200 2671 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:26.264631+00:00 heroku[router]: at=info method=GET path="/about" host=sentieoapp1.herokuapp.com request_id=0caef324-9268-4ebb-a3f5-0fb047100893 fwd="132.147.73.97" dyno=web.1 connect=0ms service=4ms status=404 bytes=403
2017-01-20T21:04:26.284717+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:26 +0000] "GET /about HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"

ed è qui che sono bloccato. Ho familiarità con Express e l'ho fatto funzionare su heroku prima, ma questo è un vero e proprio livello di incubo. Capisco che questo non è il routing lato server, ma piuttosto reagire facendo il routing all'interno di una singola pagina index.html. Ma se riesco a farlo funzionare sulla mia macchina locale, perché non funziona su Heroku?


13
2018-01-20 21:12


origine


risposte:


In realtà ho trovato questo post prima di 3 ore di ricerca attraverso la documentazione di react-router e heroku. Per swyx e chiunque altro abbia lo stesso problema, descriverò il minimo di ciò che devi fare per farlo funzionare.

router.js - (Ovviamente modifica AppSplash e AppDemo ai tuoi componenti)

export default <Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={AppSplash}/>
    <Route path="demo" component={AppDemo}/>
  </Route>
</Router>

app.js

import React, { Component } from 'react'

class App extends Component {
static propTypes = {
  children: PropTypes.node
}

render() {
  const { children } = this.props
  return (
    <div>
      {children}
    </div>
  )
}
}

export default App

Crea un nuovo file nella radice della tua home directory e nominalo static.json. Mettilo dentro

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

Spingi di nuovo su heroku. I percorsi dovrebbero funzionare questa volta.

Spiegazione: 

È necessario modificare il webpack predefinito di Heroku, altrimenti il ​​servizio viene confuso con la gestione del routing lato client. Essenzialmente ciò che static.json fa. Il resto è solo il modo corretto di gestire il routing in base alla documentazione del 'react-router'.


24
2018-03-17 20:51



Come correggere gli errori di routing sul lato client (errori di Heroku 404):

React Browser Router

Se stai usando React Browser Router, come un npm modulo con Create-reagiscono-app, quindi la soluzione (che funziona per me) è creare un static.json file (all'interno della stessa directory di package.json).

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

Ecco perché questa soluzione funziona:

Crea-reagiscono-app è per la maggior parte a Node.js server che serve lato client Reagire. Il public la directory statica è mappata al / endpoint e la visita di questo endpoint da un browser scaricherà il file index.html pagina web. Questa pagina web a sua volta carica i componenti di React. E perché React Browser Router è un componente React, i percorsi vengono caricati dinamicamente dopo aver visitato il / endpoint. In altre parole, prima del index.html la pagina web è caricata tutta la nostra React Browser Router i percorsi comporteranno 404 errori su Heroku. Per risolvere questo problema, a static.jsonil file può essere utilizzato per mappare qualsiasi endpoint con il seguente modello /** al index.html file, che a sua volta carica React Browser Router e carica correttamente i componenti di reazione per quella rotta.

Da un server HTTP Apache:

Allo stesso modo, creando un .htaccess file nel public directory, rimappare tutti gli endpoint che corrispondono /** al index.html file su un server HTTP Apache.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Altre risorse

Leggi anche la sezione "Distribuzione" di create-react-app README, che ha un sacco di buone informazioni su come riconfigurare il server per utilizzare il routing sul lato client.

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

Reagire sul router statico

Da ultimo, Reagire router offre un router statico, Reagire sul router statico, che può essere utilizzato con "react-dom / server" npm modulo su un server Node.js, per il rendering JSX lato server, e non ha bisogno static.json o .htaccess riconfigurazione.


11
2017-09-02 12:42