Question

我有一个网站，我想在该网站上部署完整堆栈的React应用程序。到目前为止，我已经成功地通过在命令提示符中使用命令npm run build部署了前端，然后将build文件夹的内容上传到了cPanel上。但是我不知道如何在cpanel上部署后端，然后将前端链接到后端。我尝试使用Setup Node.js App功能，然后为后端安装节点模块。但是我的后端编码为侦听端口：3001。我想在那里需要一些我不知道的修改。

这是后端中index.js的代码

// sqlite3 package used to create an sqlite database
var sqlite3 = require("sqlite3").verbose();

// create an sqlite database in-memory
var db = new sqlite3.Database(':memory:');

// express package used to create a server
var express = require('express');

// create an express instance to define our server
var app = express();

// include cors to allow for requests from our ReactJS app running on a different port
var cors = require('cors');

// accept requests from any origin
app.use(cors({origin: '*'}));

// startup a collection of data to manage
db.serialize(function(){

  // create a fresh version of the table
  db.run("DROP TABLE IF EXISTS Inventory");
  db.run("CREATE TABLE Inventory (animal TEXT, description TEXT, " +
         "age INTEGER, price REAL)");

  // insert initial records into the table
  var stmt = db.prepare("INSERT INTO Inventory VALUES (?,?,?,?)");
  stmt.run("Dog", "Wags tail when happy", "2", "250.00");
  stmt.run("Cat", "Black colour, friendly with kids", "3", "50.00");
  stmt.run("Love Bird", "Blue with some yellow", "2", "100.00");
  stmt.finalize();

});

// Make the backend available at localhost:3001/api
app.get("/api",
  function(req,res)
  {

    // log to console that an api request has been received
    console.log("API REQUEST RECEIVED");

    // return all of the animals in the inventory as a JSON array
    if (req.query.act == "getall")
    {

      db.all("SELECT id, animal, description, age, price FROM Inventory",
             function(err, results)
             {
               if (err) 
               {
                   // console log error, return JSON error message
                   console.log(err);
                   res.json({"error" : "Could not get inventory"});
               }
               else {
                 // send debug info to console
                 console.log(JSON.stringify(results));

                 // send back table data as JSON data
                 res.json(results);

               }  
             });
    }
// if no act is found
    else 
    {
      res.json({'error': 'act not found'}); 
    }        

});

// catch all case if no route found
app.get('*',function (req, res) {
  res.json({'error': 'route not found'});
});

// run the server
var server = app.listen(3001, function(){
  console.log("Pet Store Inventory Server listening on port 3001!")
});

这是前端提取请求的代码

import React from 'react';
import { BrowserRouter as Router,  Route,Link,  NavLink} from 'react-router-dom';
class EditContainer extends React.Component{
    constructor(props) {
        super(props);
        this.state = {pets:[]};
        this.handleDelete=this.handleDelete.bind(this)
      } 
      componentDidMount()
      {
        fetch("http://localhost:3001/api?act=getall")
          .then(response => response.json())
          .then(data =>
            {
              this.setState({pets: data });
            });

      }

如何在cPanel上为create-react应用程序部署后端？

0 个答案: