时间戳

首页 > 解决方案 > 前端未部署在 Heroku 中

node.js - 前端未部署在 Heroku 中

问题描述

我正在尝试将我的第一个 MERN 网站部署到 heroku。我一直在关注不同的教程，但我在连接前端和后端时遇到了问题，尽管它们在开发模式下连接良好。

只是为了澄清：唯一正在部署的是服务器端。我无法部署前端。

客户端的 package.json 代理：

"proxy": "http://localhost:5000"

服务器包.json：

{
  "name": "pictshare",
  "version": "1.0.0",
  "description": "Image Sharing Application",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server",
    "build": "cd client && npm run build",
    "install-client":"cd client && npm install",
    "heroku-postbuild":"npm run install-client && npm run build",
    "client": "npm start --prefix client",
    "dev": "concurrently -n 'server,client' -c 'red, green' \"npm run server\" \"npm run client\""
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "config": "^3.3.1",
    "ejs": "^3.0.2",
    "express": "^4.17.1",
    "express-validator": "^6.4.0",
    "form-data": "^3.0.0",
    "gravatar": "^1.8.0",
    "gridfs-stream": "^1.1.1",
    "jsonwebtoken": "^8.5.1",
    "merge-images": "^1.2.0",
    "method-override": "^3.0.0",
    "moment": "^2.24.0",
    "mongoose": "^5.9.7",
    "multer": "^1.4.2",
    "multer-gridfs-storage": "^4.0.2",
    "node": "^13.12.0",
    "nodemailer": "^6.4.6",
    "path": "^0.12.7",
    "react-draggable": "^4.2.0",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "concurrently": "^5.1.0",
    "minimist": "^1.2.5",
    "nodemon": "^2.0.2"
  }
}

服务器.js：

const express = require('express');
const connectDB = require('./config/db');
const app = express();
const bodyParser = require('body-parser')

connectDB();

//Initialize Middleware
app.use(express.json({ extended: false }));
app.use(bodyParser.urlencoded({ extended: false }))

app.get('/', (req, res) => res.send('API Running'));

...

app.use('/api/posts', require('./routes/api/posts'));

if (process.env.NODE_ENV === 'production'){
    app.use(express.static('client/build'))
}

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

猫鼬：

const mongoose = require('mongoose');
const config = require('config');

const db = process.env.MONGODB_URI || config.get('mongoURI');


const connectDB = async () => {
    try {
        await mongoose.connect(db, {
            useNewUrlParser: true,
            useCreateIndex: true,
            useFindAndModify: false,
            useUnifiedTopology: true,
            useNewUrlParser: true,
        });
        console.log('MongoDB Connected...');
    } catch(err) {
        console.error(err.message);
        process.exit(1);
    }
}

module.exports = connectDB;

我真的很感激任何想法或观点！谢谢大家！谢谢！

标签： node.jsreactjsexpressherokumern

解决方案

也许您已经完成了这项工作，让我在您的代码中指出一件事：

app.use(express.static('client/build'))

你可能需要这样写：

const app = express();
const path = require('path');
app.use('/static', express.static(path.join(`${__dirname}/client/build`)));

然后在服务器在线时发送文件：

  app.get('/*', (req, res) => {
  res.sendFile(path.join(`${__dirname}/client/build/`));
});

推荐阅读