Heroku отображает только бэкэнд приложения MERN.Как я могу это исправить? - PullRequest
Новая
       55

Heroku отображает только бэкэнд приложения MERN.Как я могу это исправить?

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

Я закончил работу над моим первым приложением MERN.Он работает локально и был «успешно собран» на Heroku, но все, что отображается, это данные бэкэнда, полученные для маршрута «/» из MongoDB.

Я рассмотрел несколько ресурсов, которые обсуждают развертывание приложений стека MERN в Heroku: 1. https://www.freecodecamp.org/forum/t/solved-deployment-problem-showing-backend/280178 2. https://www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/

Я пытался интегрировать этисообщения с моим кодом, но безрезультатно.Я не уверен, как использовать промежуточное ПО пути в тандеме с моими тремя существующими маршрутами ('/', '/ авторы' и '/ книги') и, в конечном счете, как это приведет к сборке для index.html.Я не уверен, имеет ли это какое-то значение, но я использую parceljs для создания внешнего интерфейса.

Редактировать: Добавлен скриншот макета папки, чтобы показать, где папка dist находится в проекте

Ниже приведен мой файл server.js: 

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

const express = require("express");
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");

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

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

1 Ответ

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

Можете ли вы попробовать этот код, если ваше приложение находится в производственном экспрессе, будет обслуживать статические ресурсы и перенаправит пользователя на index.html, если пользователь перейдет на маршруты, отличные от маршрутов API (предоставив app.get ('*',...))

server.js 

...

app.use("/books", bookRouter);

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