我一直在使用Vercel托管几个React web应用程序，它非常棒!最近，我升级了一个现有的后端项目(Express.js和MongoDB Atlas)，我也想在那里托管它。
在我的机器上，MongoDB服务器和所有CRUD路由在localhost:5000上顺利运行，但我想知道如何将其添加到Vercel部署中。Vercel的文档侧重于无服务器部署，虽然我不介意重写我的后端，如果我不得不，我想知道是否有一个更简单的解决方案来添加服务器/数据库。
MERN堆栈仍然相对流行，所以我想很多开发人员已经找到了一种方式来托管这种项目。如果有人能帮忙，我将非常感激!
根据你的注释，你的文件结构应该是这样的
// + 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 - edit frontend package.json
add主页
{
// 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 - add basename
// 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>
step3 - build your react
你必须在每次部署前构建你的前端，当且仅当你改变你的前端代码
那么你的前端应该像
- frontend
+ build // build folder at root of your frontend
+ public
- src
+ pages
+ components
> package.json
> package-lock.json
step4 -修改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 - add 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
这种方法的缺点是，每次你把你的repo推送到github时，你都必须构建你的前端。
当且仅当您更改前端代码时，请记住在将repo推送到github之前构建您的前端。
还记得替换前端包中的主页url。使用vercel提供的url或您的自定义域url部署后的json文件
Happy Coding:)
确保在你的后端app.js或server.js中有以下内容供前端加载到vercelapp/
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)
}
}
)
})由于我们正在重写规则:/(.*)vercel将通过后端server.js文件传递所有请求这个代码片段将确保它发送build/index.html
对不起，我的英语不好!
这个repo是为MERN堆栈分层部署而设置的。我能够适应一个MERN应用程序，并通过fork这个repo https://github.com/hack4impact-uiuc/mern-template/tree/main/client/src和更新成功部署。