reactjs - el despliegue de la aplicación create-react-app en heroku con backend express devuelve el encabezado de host no válido en el navegador
proxy (1)
El título lo dice todo. He construido un ejemplo de trabajo mínimo aquí: https://github.com/sehailey/proxytest
Lo he intentado, así que las cosas que he perdido cuentan (aunque están almacenadas en las confirmaciones). Prometo una vez que obtenga una respuesta para hacer un seguimiento de las docenas de hilos respondidos haciendo esta pregunta.
Parece que cambiaron la forma en que la aplicación
create-react-app
utiliza un proxy.
Elimine el
proxy
del
package.json
.
Entonces...
Añadir este paquete:
npm i -S http-proxy-middleware
Luego crea un
setupProxy.js
en
src
:
src / setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = app => {
app.use(proxy("/api/*", { target: "http://localhost:5000/" }));
};
Ahora desde dentro del componente React, puedes hacer esto:
src / App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
export default class App extends Component {
state = {
message: "",
error: "",
eee: "",
text: ""
};
componentDidMount = () => this.fetchAPIMessage();
fetchAPIMessage = async () => {
try {
const res = await fetch(`/api/message`);
const { message } = await res.json();
this.setState({ message });
} catch (err) {
console.error(err);
}
};
render = () => (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>WELCOME CREATE REACT APP!</p>
<div className="App-link">{this.state.message}</div>
</header>
</div>
);
}
index.js
(agregué
npm i -D morgan
que es un marco de trabajo de registro útil: cuando una solicitud llega a la API, la muestra en la consola).
const path = require("path");
const express = require("express");
const app = express();
const morgan = require("morgan");
app.use(morgan("tiny")); // logging framework
// Serve our api message
app.get("/api/message", async (req, res, next) => {
try {
res.status(201).json({ message: "HELLOOOOO FROM EXPRESS" });
} catch (err) {
next(err);
}
});
if (process.env.NODE_ENV === "production") {
// Express will serve up production assets
app.use(express.static("build"));
// Express will serve up the front-end index.html file if it doesn''t recognize the route
app.get("*", (req, res) =>
res.sendFile(path.resolve("build", "index.html"))
);
}
// Choose the port and start the server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Mixing it up on port ${PORT}`));
package.json
(use el
node
para servir los activos de producción - vea la secuencia de comandos de "inicio")
{
"name": "proxytest",
"version": "0.1.0",
"private": true,
"homepage": "https://proxytest2.herokuapp.com/",
"dependencies": {
"concurrently": "^4.0.1",
"express": "^4.16.4",
"http-proxy-middleware": "^0.19.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.0.5",
"serve": "^10.0.2"
},
"scripts": {
"start": "NODE_ENV=production node index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"client": "react-scripts start",
"server": "nodemon server",
"eject": "react-scripts eject",
"dev": "concurrently --kill-others-on-fail /"npm run server/" /"npm run client/"",
"heroku-postbuild": "npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Lo que verá en la consola cuando se ejecute en
production
:
m6d@m6d-pc:~/Desktop/proxytest-master$ npm start
> [email protected] start /home/m6d/Desktop/proxytest-master
> NODE_ENV=production node index.js
Mixing it up on port 5000
GET / 200 2057 - 6.339 ms
GET /static/css/main.068b9d02.chunk.css 304 - - 1.790 ms
GET /static/js/1.9a879072.chunk.js 304 - - 0.576 ms
GET /static/js/main.e3ba6603.chunk.js 304 - - 0.605 ms
GET /api/message 201 36 - 4.299 ms
GET /static/media/logo.5d5d9eef.svg 304 - - 0.358 ms
Otras notas:
-
Asegúrese de separar el src de su cliente de la API (por ejemplo, coloque todo desde la aplicación React de front-end en una carpeta de
client
con sus propias dependencias). -
Elimina todas y cada una de las dependencias de React de
package.json
de tu API