Блог

У меня возникла проблема с отправкой приложения, созданного с помощью Express и React, в производство. У меня есть два разных проекта, в одном у меня есть передний, а другой задний. Для развертывания первое, что я сделал, это выполнил сборку под управлением npm в моем приложении React и создал папку в моем бэкэнде под названием «интерфейс», чтобы иметь возможность добавлять туда папку сборки.

Приложение локально (в разработке) работает корректно, основная проблема заключается в том, когда я отправляю его в производство. В процессе работы он загружает интерфейс, но возникает ошибка с сервером (ошибка 504).

Развертывание с помощью Vercel я сделал это через свой репозиторий Git и вручную загрузил переменные среды.

Index.js

 const express = require("express");
const dataRoutes = require("./routes/dataRoutes");
const highlightsRoutes = require("./routes/highlightsRoutes");
const userRoutes = require("./routes/userRoutes");
const sellerRoutes = require("./routes/sellerRoutes");
const { token_request, refresh_token } = require("./api/token");
const connectDB = require("./config/db");
var cors = require("cors");
var session = require("express-session");
var cookieParser = require("cookie-parser");
const path = require("path");

const app = express();
require("dotenv").config();
connectDB();

app.use(
  session({
    secret: "kylie",
    resave: false,
    saveUninitialized: false,
    cookie: {
      maxAge: 24 * 60 * 60 * 1000,
    },
  })
);
app.use(cookieParser());
app.use(cors({ credentials: true, origin: "http://localhost:4000" }));
app.use(express.json()); // mapea el json con un objeto de js
app.use(express.urlencoded({ extended: true })); // mapea la entrada de un form a un objeto

// token_request();
// refresh_token();

app.use("/api/posts", dataRoutes);
app.use("/api/highlights", highlightsRoutes);
app.use("/api/v1", userRoutes);
app.use("/api/sellers", sellerRoutes);

if (process.env.NODE_ENV.trim() == "production") {
  app.use(express.static(path.join(__dirname, "./frontend/build")));

  app.get("*", function (_, res) {
    res.sendFile(
      path.join(__dirname, "./frontend/build/index.html"),
      function (err) {
        if (err) {
          res.status(500).send(err);
        }
      }
    );
  });
}

const port = process.env.PORT ? process.env.PORT : 3000;

app.listen(port, () => {
  console.log("Servidor escuchando en el puerto "   port);
});
 

package.json

 {
  "name": "meli-track",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "set NODE_ENV=production amp;amp; node index.js",
    "dev": "set NODE_ENV=production amp;amp; nodemon index.js",
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "bcrypt": "^5.0.1",
    "body-parser": "^1.19.0",
    "connect-mongo": "^4.5.0",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "cron": "^1.8.2",
    "dotenv": "^10.0.0",
    "exceljs": "^4.2.1",
    "express": "^4.17.1",
    "express-openid-connect": "^2.5.0",
    "express-session": "^1.17.2",
    "google-auth-library": "^7.6.2",
    "moment": "^2.29.1",
    "mongoose": "^5.13.0",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.7",
    "perf_hooks": "0.0.1",
    "pretty-format": "^27.0.6",
    "puppeteer": "^10.1.0",
    "router": "^1.3.5",
    "session-file-store": "^1.5.0",
    "xlsx": "^0.17.0"
  }
}
 

версель.json

   {
    "version": 2,
    "builds": [
       {
       "src": "./index.js",
       "use": "@vercel/node"
      }
   ],
    "routes": [
       {
          "src": "/(.*)",
          "dest": "/"
       }
    ]
 }
 

Я прилагаю скриншот ошибок, отображаемых в консоли, после запуска приложения в производство.

Спасибо!