使用 NodeJS 后端（使用 express）為 heroku 上的服務器/數據庫部署 ReactJS 應用程序

Question

我的項目結束了，我必須在heroku上部署應用程序（ReactJS 前端，NodeJS 后端）：這里是 atm 鏈接https://ancient-chamber-42876.herokuapp.com/#/PageCollectionneur

我已經設法以某種方式部署它，但我不知道如何同時部署服務器。 問題是我在localhost:3000 中托管了客戶端，在 localhost:3004 中托管了服務器，現在我無法訪問服務器。

我想做一些事情，比如使用該站點作為代理，但我真的很困惑。使用 heroku 管理數據庫.. =/) 和一些功能

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

 <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>

我還應該發布我的 package.json 嗎？

無論如何，如果有人可以幫助我，順便說一句對不起，這個問題有點奇怪，但我真的遇到了這個問題，我真的很感激，因為我只剩下一周的時間來做這件事了

提前謝謝各位

Answer 1

你不能只在 heroku 上打開任何你想要的端口，heroku 為你打開一個端口，你可以從process.env.PORT獲取它。 如果您需要將 api 服務器與靜態服務器分開並托管在 heroku 上，那么您很可能需要創建兩個不同的 heroku 應用程序。

Answer 2

@Mich，我最近設法在 Heroku 上部署了一個由 react+express+mongo 組成的全棧應用程序。

確實，同步所有這些工具很復雜，例如： 1. 在 Heroku 上創建應用程序 2. 在 mlab.com 上托管 mongodb 3. 創建 react + express 4. 將它們部署到 Heroku。

我有一個類似問題的答案，你可以看看，希望它有所幫助。 鏈接：（ 如何使用 express 部署 react 到 heroku ）