Question

我在我的 React/Express 应用程序中使用 Express 来解析 CORS 请求。我找不到任何有关如何将全栈应用程序部署到 Vercel 的工作教程。我试过了： npm install --prefix client && npm run build --prefix client && node index.js 当我的 Node.js 服务器开始运行（状态“正在构建”超过 15 分钟）时，它会导致无限部署。也许我错过了配置中的某些内容？这是我的后端 package.json：

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "npm install --prefix client && npm run build --prefix client && node index.js",
        "start": "concurrently \"nodemon index.js\" \"npm start --prefix client\"",
        "server": "nodemon index.js",
        "dev": "concurrently \"nodemon index.js\" \"npm start --prefix client\""
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "axios": "^0.21.1",
        "cheerio": "^1.0.0-rc.10",
        "concurrently": "^6.2.0",
        "express": "^4.17.1",
        "path": "^0.12.7",
        "query-string": "^7.0.1",
        "querystring": "^0.2.1"
    }
}

这是我的前端 package.json：

{
    "name": "kino",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/utils": "^4.11.2",
        "@testing-library/jest-dom": "^5.12.0",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "backend": "file:..",
        "idb-keyval": "^5.0.5",
        "mobx": "^6.3.0",
        "mobx-react-lite": "^3.2.0",
        "react": "^17.0.2",
        "react-copy-to-clipboard": "^5.0.3",
        "react-dom": "^17.0.2",
        "react-full-screen": "^1.0.2",
        "react-helmet-async": "^1.0.9",
        "react-image": "^4.0.3",
        "react-indiana-drag-scroll": "^2.0.1",
        "react-lazy-load-image-component": "^1.5.1",
        "react-lazyload": "^3.2.0",
        "react-loading-skeleton": "^2.2.0",
        "react-player": "^2.9.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "react-youtube": "^7.13.1",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "screenfull": "^5.1.0",
        "swiper": "^6.7.0",
        "web-vitals": "^1.0.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

这是我的 index.js（Node.js 服务器文件）：

const express = require('express');;
const path = require('path');
const film = require('./routes/film.js');
const geturl = require('./routes/geturl.js');
const search = require('./routes/search.js');
const related = require('./routes/related.js');
const details = require('./routes/details.js');
const app = express();
const port = 8000;

app.use('/api/film', film);
app.use('/api/geturl', geturl);
app.use('/api/search', search);
app.use('/api/related', related);
app.use('/api/details', details);

const buildPath = path.normalize(path.join(__dirname, './client/build'));
app.use(express.static(buildPath));

app.get('(/*)?', (req, res) => {
    res.sendFile(path.join(buildPath, 'index.html'));
})

app.listen(port, () => console.log(`App is listening on port ${port}!`))

module.exports = app;

如何将 React & Express 应用程序部署到 Vercel？

0 个答案: