Question

我正在尝试将我的第一个MERN网站部署到heroku。我一直在关注不同的教程，但是尽管在开发模式下可以很好地连接前端和后端，但我还是遇到了麻烦。

请澄清一下：唯一将被部署的是服务器端。我无法部署前端。

客户端的package.json代理：

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

服务器package.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"
  }
}

Server.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;

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

Answer 1

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

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/`));
});

Answer 2

如果有.env文件。尝试在其中添加此NODE_ENV = production。

前端未在Heroku中部署

2 个答案: