2021 年使用 Vercel 托管 MERN 应用程序（没有 Next.js）

Question

我一直在使用 Vercel 来托管多个 React Web 应用程序，它非常棒！最近，我升级了一个带有后端（Express.js 和 MongoDB Atlas）的现有项目，我也想在那里托管它。

在我的机器上，MongoDB 服务器和所有 CRUD 路由运行在 localhost:5000 上很顺利，但我想知道如何将其添加到 Vercel 部署中. Vercel 的文档侧重于无服务器部署，虽然我不介意在必要时重写我的后端，但我想知道是否有更简单的解决方案来添加 server/database.

MERN 堆栈仍然比较流行，所以我想很多开发人员都找到了托管此类项目的方法。如果有人能提供帮助，我将不胜感激！

Answer 1

根据您的评论，您的文件结构应该如下所示

// + refer as close folder
// - refer as open folder
// > refer as file

main

  - backend
    + models
    + routes
    > package.json
    > package-lock.json
    > server.js

  - frontend
    + public
    - src
      + pages
      + components
    > package.json
    > package-lock.json

step1 - 编辑前端 package.json
添加主页

{
  // initially add link whatever you suppose to be link of your site
  // then after deploying to vercel, you get the exact link
  // then replace it with vercel link in "homepage" key

  "homepage": "https://awesome-app.vercel.app",
  "name": "awesome-app",
  "version": "1.0.0,
  "private": true,
  ...rest of your frontend package.json file
}

step2 - 添加基名

// you wrapped your app with either BrowserRouter or HashRouter
// add basename prop so it refer to your package.json homepage
// if your route are '/awesome-route' then is converted to
// https://awesome-app.vercel.app/awesome-route

<BrowserRouter basename='/'>    // or HashRouter
  <Switch>
    ...your routes
  </Switch>
</BrowserRouter>

第 3 步 - 构建你的反应

you have to build your frontend everytime before deployment if and only if your change your frontend code

那么您的前端应该如下所示

  - frontend
    + build    // build folder at root of your frontend
    + public
    - src
      + pages
      + components
    > package.json
    > package-lock.json

第 4 步 - 更改您的 server.js 文件
应该是这样的

// i use "dotenv" package
// in your case must be located at "main > backend > .env"
// see the final file structure at bottom if you don't understand

if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config({path: __dirname+'/.env'});
}

const express = require('express');
const mongoose = require('mongoose');
const path = require('path');

const app = express();
app.use(express.json());

const port = process.env.PORT || 5000;

mongoose.connect(process.env.mongoURI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify: false,

  // remove poolSize or set according to your need
  // read docs before setting poolSize
  // default to 5
  poolSize: 1
})
  .then(() => {
    app.listen(port);
  })

// all your routes should go here
app.use('/some-route', require(path.join(__dirname, 'api', 'routes', 'route.js'));

// static files (build of your frontend)
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../frontend', 'build')));
  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '../frontend', 'build', 'index.html'));
  })
}

step5 - 添加vercel.json 在您的存储库的根级别，即在您的情况下 main 目录

{
  "version": 2,
  "builds": [
    {
      "src": "./backend/server.js",  // path to your server.js file
      "use": "@vercel/node"
    },
    {
      "src": "./frontend/build",    // path to your build folder
      "use": "@vercel/static"
    }
  ],

  // rewrites any request to api call with server.js
  // now your "app.use('/some-route')" would work as normal as localhost
  // no need to change your codes to serverless way

  // also remember here "/(.*)" is not regular js regex
  // it follows path-to-regex
  // playground link: https://regexr.com

  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/backend/server.js"
    }
  ]
}

最后你的文件结构是这样的

// + refer as close folder
// - refer as open folder
// > refer as file

main

  - backend
    + models
    - routes
      > route.js
    > package.json
    > package-lock.json
    > .env
    > server.js

  - frontend
    - build
      + static
      > manifest.json
      > index.html
    + public
    + src
    > package.json
    > package-lock.json

  > vercel.json   // in your main directory's root

此方法的缺点是每次将存储库推送到 github

时都必须构建前端

remember to build your frontend before you push your repo to github if and only if you change your frontend code

also remember to replace your homepage url in your frontend package.json file after deployment with vercel provided url or your custom domain url

快乐编码:)

2021 年使用 Vercel 托管 MERN 应用程序（没有 Next.js）

Hosting a MERN application with Vercel in 2021 (without Next.js)

express

reactjs

mern

serverless

vercel