В производственном процессе запрос Axios возвращает index.html в приложении React.Пока не работает, приложение работает без проблем - PullRequest
Новая
       32

В производственном процессе запрос Axios возвращает index.html в приложении React.Пока не работает, приложение работает без проблем

0 голосов
/ 25 сентября 2019

РЕДАКТИРОВАТЬ: теперь я могу вернуть данные в моем ответе Axios.Проблема заключалась в том, что я заказал мою строку app.get (*) для всех целей.Я поместил это ниже всех других маршрутов.Таким образом, этот вопрос теперь решен.См. Ниже оригинальное сообщение.

-

Я закончил свое первое стековое приложение MERN и пытаюсь заставить его работать в производстве.

Когда язапустить NODE_ENV=production node server.js, компонент не рендерится, потому что ответ res.data от axios возвращает index.html.

Это приложение использует Parceljs в качестве упаковщика, Axios с точными URL-адресами и CORS. Судя по моим исследованиям, это плохая практика, так как , на производстве фронтенд и бэкэнд будут обслуживаться в одном и том же порту.Мои маршруты в server.js были следующим образом: 

// Define routes
const indexRouter = require("./routes/index");
const authorRouter = require("./routes/authors");
const bookRouter = require("./routes/books");

// Utilize routes
app.use("/", indexRouter);
app.use("/authors", authorRouter);
app.use("/books", bookRouter);

Однако, исходя из этого поста , маршрут '/' всегда будет обслуживать index.htmlфайл, поэтому я решил, что мой маршрут с именем indexRouter будет отображать index.html вместо компонента, который я написал для маршрута '/'.

На основе этого сообщения и сообщениявыше я переписал маршрут для моего файла server.js и запроса axios в моем компоненте index.js, чтобы он заканчивался на '/home'.

В первом связанном посте в ответе предлагалось использоватьпрокси.Поскольку мой проект использует Parceljs, я посмотрел, как использовать прокси здесь .

Даже после изменения маршрута с '/' на '/ home' и использования прокси-функции index.html все еще возвращается как «данные» из моего запроса axios.

Мое предположение о том, почему это происходит, связано с моим общим запросом get ниже: 

if (process.env.NODE_ENV === "production") {
  app.use("/", express.static("client/dist"));
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "dist", "index.html"));
  });
}

Когда я использовалвышеупомянутые строки ниже моих других маршрутов, все, что будет визуализироваться, будет ответом mongoDB (res.json).Итак, я переместил эти строки над этими маршрутами, следуя совету, предложенному внизу этой позиции t.

Мой файл server.js теперь выглядит так: 

if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}

const Bundler = require("parcel-bundler");
const express = require("express");
const proxy = require("http-proxy-middleware");
const app = express();
const cors = require("cors");
const path = require("path");

// Middleware
app.use(express.urlencoded({ limit: "10mb", extended: true }));
app.use(express.json({ limit: "10mb" }));
app.use(cors());

// Connect to Mongoose
const mongoose = require("mongoose");
mongoose.connect(process.env.MONGO_URI,
  {
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true
  }
);

const db = mongoose.connection;
db.on("error", err => console.error(err));
db.once("open", () => console.log("Connected to Mongoose"));

// Define routes
const indexRouter = require("./routes/index");
const authorRouter = require("./routes/authors");
const bookRouter = require("./routes/books");

if (process.env.NODE_ENV === "production") {
  app.use("/", express.static("client/dist"));
  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "client", "dist", "index.html"));
  });
}

// Utilize routes
app.use(
  "/home",
  indexRouter,
  proxy({
    target: "http://localhost:3000/home"
  })
);
// app.use("/", indexRouter);
app.use("/authors", authorRouter);
app.use("/books", bookRouter);

app.listen(process.env.PORT || 3000);

И соответствующие части моего файла index.js теперь выглядят так: 

import React, { Component } from "react";
import axios from "axios";

class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      books: [],
      mounted: false
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:3000/home")
      .then(res => {
        console.log(res);
        this.setState({ books: res.data, mounted: true });
      })
      .catch(e => {
        console.log(e);
      });
  }

export default Index;

Если требуется больше кода, сделайте репо здесь: https://github.com/adambrikman/books-to-read

Мой вопрос: Как я могу заставить мое приложение React работать на производстве? решено

-

...