Express 404部署后调用api路由时出错_Express_Next.js_Vercel

Express 404部署后调用api路由时出错

express next.js

Express 404部署后调用api路由时出错,express,next.js,vercel,Express,Next.js,Vercel,我正在向Vercel部署Nextjs/Express应用程序，在调用/api路由时遇到问题。例如，在加载时尝试通过redux从服务器检索产品。这在dev中运行良好，但在部署之后，我在所有api路由上都遇到了404错误 index.js const express = require('express'); const next = require('next'); const mongoose = require('mongoose'); const cookieSession = requir

我正在向Vercel部署Nextjs/Express应用程序，在调用/api路由时遇到问题。例如，在加载时尝试通过redux从服务器检索产品。这在dev中运行良好，但在部署之后，我在所有api路由上都遇到了404错误

index.js

const express = require('express');
const next = require('next');
const mongoose = require('mongoose');
const cookieSession = require('cookie-session');
const passport = require('passport');
const bodyParser = require('body-parser');
const keys = require('../config/keys');
require('../models/User');
require('../services/passport/passport');



const PORT = process.env.PORT || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

mongoose.Promise = global.Promise;
mongoose.connect(keys.mongoURI, { useUnifiedTopology: true, useNewUrlParser: true, useCreateIndex: true });

app
    .prepare()
    .then(() => {
        const server = express();

        server.use(bodyParser.json({limit: '50mb'}));
        server.use(
        cookieSession({
            maxAge: 30 * 24 * 60 * 60 * 1000,
            keys: [keys.cookieKey]
        })
        );
        server.use(passport.initialize());
        server.use(passport.session());

        const getRoutes = require('./routes/index.js');
        server.use('/api', getRoutes);
        // const routes = getRoutes();

        server.get("*", (req, res) => {
            return handle(req, res);
        })

        server.listen(PORT, err => {
            if (err) throw err;
            console.log(`> Ready on ${PORT}`);
        })
    })
    .catch(ex => {
        console.error(ex.stack);
        process.exit(1);
    })

services.js

import React from 'react';
import Head from 'next/head';
import Link from 'next/link';
import Nav from '../components/Navbar/ColorNav';
import Selector from '../components/Custom/Presentation/MapSelector';
import AppointmentMobile from '../components/Custom/Presentation/Mobile-AppointmentPresentation';
import Footer from '../components/Footer/alt-footer';
import SelService from '../components/Custom/Presentation/Presentation-service.js';

const Services = () => {
    return (
        <React.Fragment>
            <div className="services-page">
            <Head>
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
                <link rel="preconnect" href="https://fonts.gstatic.com" />
                <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"></link>
                <title>Vohnt | Services</title>
                <meta name="keywords" content="Vohnt"/>
            </Head>
            <div className="service-header">
            <Nav popBox="services"/>
            <div className="service-selector">
            <Selector />
            </div>
            {/* <div className="mobile-service-selector">
            <AppointmentMobile />
            </div> */}
            </div>
            <div className="service-section-1">
                <div className="service-sec-1-container">
                    <h2 >Vohnt’s service offerings</h2>
                    <p className="serv-1-p">Creating a world where you have immediate, convenient, and affordable access to car care.</p>
                    <div className="serv-1-button">
                    <Link href="/how-it-works">
                    <button className="learn-more-button" id="no-border-radius">Learn More</button>
                    </Link>
                    </div>
                </div>
                <div className="vohnt-product-offerings">
                    <div className="product-list-left">
                        <SelService simpleHeight='600px' buttons="services"/>
                    </div>
                    <div className="product-list-left-small">
                        <SelService simpleHeight='420px' buttons="services"/>
                    </div>
                    <div className="product-list-left-small2">
                        <SelService simpleHeight='400px' buttons="services"/>
                    </div>
                    <div className="product-list-left-small3">
                        <SelService simpleHeight='350px' buttons="services"/>
                    </div>
                </div>
            </div>
            <div className="alt-footer-2">
            <Footer />
            </div>
            </div>
        </React.Fragment>
    )
}

export default Services;

您无法在Vercel上托管Next/express应用程序，因为express服务器必须始终运行，但Vercel是为无服务器功能而设计的

两种可能的解决办法：

在Heroku或vps中托管您的应用程序

删除Express，只需使用下一个api路由，就可以轻松地在Vercel上部署

我不知道vercel完全没有服务器，谢谢！能够在heroku上部署没有问题，我现在正在研究是否值得从express切换到NextJSAPI。

    useEffect(() => {
        dispatch(loadProducts());
    }, [])