我正在嘗試在 VERCEL 上部署 MERN 應用程序，但未找到

Question

我正在嘗試在 Vercel 上部署 MERN 應用程序，但未找到

當我將NODE_ENV為PRODUCTION時，它工作正常並在運行npm start時在本地計算機上提供 static 文件，但它不適用於 Vercel。

.

我的目錄結構是

我的 app.js 文件是

const express = require("express");
const app = express();

const dotenv = require("dotenv");
const mongoose = require("mongoose");

const PostRoutes = require("./Routes/posts");
const CategoryRoutes = require("./Routes/categories");
const UserRoutes = require("./Routes/user");
const AuthRoutes = require("./Routes/auth");

const bodyParser = require("body-parser");
const multer = require("multer");

var storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/images/");
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + "_" + file.originalname);
  },
});

var upload = multer({ storage: storage });

const cors = require("cors");

dotenv.config();

app.use(express.json());
app.use("uploads/images/", express.static("uploads/images/"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

if (process.env.NODE_ENV == "production") {
  const path = require("path");
  app.get("/", (req, res) => {
    app.use(express.static(path.resolve(__dirname, "frontend", "build")));
    res.sendFile(path.resolve(__dirname, "frontend", "build", "index.html"));
  });
}

mongoose
  .connect(process.env.MONGO_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(console.log("connected to Mongo database "))
  .catch((err) => {
    console.log(err);
  });

app.use("/api/posts", upload.single("photo"), PostRoutes);
app.use("/api/categories", CategoryRoutes);
app.use("/api/auth", upload.none(), AuthRoutes);

app.use("/api/users", upload.single("profile_pic"), UserRoutes);

app.listen(process.env.PORT || 3001, () => {
  console.log(`Server Listening on the port ${process.env.PORT}`);
});

package.json 文件

{
  "name": "backend",
  "version": "1.0.0",
  "description": "Backend to the blog app ",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "dev-start": "nodemon app.js --ignore client",
    "start-client": "npm start --prefix frontend",
    "dev": "concurrently \"cd ./frontend && npm start\" \"npm run dev-start\""
  },
  "author": "Shiv Shankar Prasad",
  "license": "MIT",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.0",
    "concurrently": "^7.4.0",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "express-async-handler": "^1.2.0",
    "express-validator": "^6.14.2",
    "jsonwebtoken": "^8.5.1",
    "minifaker": "^1.34.1",
    "mongoose": "^6.5.3",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^2.0.19"
  }
}

請幫忙。

Answer 1

我找到了一個解決方案，它是 vercel.json 文件中的更改。

現在我使用了 vercel CLI，它更容易使用。

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