Question

它是我项目的结束，我必须在 heroku 上部署应用程序（ReactJS前端，NodeJS后端）：这里是链接atm https://ancient-chamber-42876.herokuapp.com/#/PageCollectionneur

我已经设法以某种方式部署它，但我不知道如何同时部署服务器。问题是我已经在 localhost：3000和localhost：3004中的服务器中托管了客户端，现在我无法访问服务器。

我想做一些像使用网站代理的事情，但我真的很困惑...我已经尝试了很多东西这里是我的server.js（连接到数据库，但我仍然不知道如何使用heroku ... = /）和一些函数来管理数据库

＆＃13;

const express = require('express');
const bodyParser = require('body-parser');
const mysql      = require('mysql');
var url = require('url');
const path = require ('path')
// données de ma bd
const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '',
  database : 'l3ad2'
});


const app = express();

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});


if (process.env.NODE_ENV === 'production') {
   app.use(express.static('client/build'));
   app.get('*', (req, res) => {
     res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
   });
}

//crée une connection a ma bd
connection.connect();
// création de la database
connection.query("CREATE DATABASE IF NOT EXISTS bd_l3ad", function (err, result) {
  if (err) throw err;

});
//création de la table LignesCollection
 var sql1= "CREATE TABLE IF NOT EXISTS LignesCollection ( numero INTEGER UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY , collection VARCHAR(30), objet VARCHAR(30), descriptionObjet VARCHAR(250) , Avendre  VARCHAR(30) DEFAULT 'no' , prix VARCHAR(30), urlimage VARCHAR(250) )";
 connection.query(sql1, function (err, result) {
   if (err) throw err;
 });


// envoi des données de la table collection dans un serveur http://localhost:3004//getCollections
app.get('/getCollections', function (req, res) {


    connection.query('SELECT nom FROM collections', function (error, results) {
      if (error) throw error;
     res.json(results)
  });
});

// envoi des données de la table Collectionneur dans un serveur

app.get('/getCollectionneur', function (req, res) {

    connection.query('SELECT * FROM Collectionneur', function (error, results) {
      if (error) throw error;
     res.json(results)
    });
});


const port = 3004;

app.listen(process.env.PORT || port, () => console.log(`server is listening on ${port}`));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

我是否还应该发布我的package.json？

无论如何，如果有人可以帮助我，顺便说一下，这个问题有点奇怪，但我真的很难解决这个问题，我真的很感激，因为我只有一个星期的时间来做这件事

先谢谢你们

Answer 1

你不能只在heroku上打开你想要的任何端口，heroku为你打开一个端口，你从process.env.PORT得到它。如果您需要将api服务器与静态服务器分开并托管在heroku上，那么您很可能需要创建两个不同的heroku应用程序。

Answer 2

@Mich，我最近设法在Heroku上部署了一个由react + express + mongo组成的fullstack应用程序。

确实，同步所有这些工具很复杂，例如： 1.在Heroku上创建应用程序 2.在mlab.com上主持mongodb 3.创造反应+表达 4.将它们部署到Heroku。

我对类似的问题有一个答案，你可以看看，希望它有所帮助。链接：（How to deploy react with express to heroku）

使用NodeJS后端（使用express）为heroku上的服务器/数据库部署ReactJS应用程序

2 个答案: