Javascript 在apache服务器上部署React（3000）和Express（8000）应用程序

我使用命令npx create React app client for React和npx Express generator api for Express后端创建了一个React+Express应用程序。客户端和API都在同一个文件夹应用程序下

react应用程序正在端口3000上运行，我已将express应用程序的端口更改为在/bin/ww中使用端口8000

在express应用程序中，我在routes/testAPI.js中创建了一条路由

在app.js文件中，我使用了路由来处理请求

let testAPIRouter = require("./routes/testAPI");
app.use("/testAPI", testAPIRouter);

现在在App.js文件中的react应用程序中，我调用了API并更新了{this.state.apiresponse}

的内容

App.js文件

class App extends React.Component{
   constructor(props){
       super(props);
       this.state = {
          apiResponse : "",
       }
    }
    apiCall = () => {
       fetch("http://localhost:8000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
    }
    componentWillMount = () => {
       this.callAPI();
    }
    
    render(){
        return(
          <div>
              <p>{this.state.apiResponse}</p>
          </div>
    )
   }
 }

我的问题是在apache服务器上部署此应用程序。当我运行express并在不同的端口3000和8000做出反应时。我可以使用npm run build构建react应用程序，它将为react创建静态构建文件。但是，如何构建与react一起使用的express应用程序？ 是否将express文件移动到服务器并始终在端口8000处运行应用程序

我已经成功地在同一时间使用并发命令运行了这两个程序。我可以使用npm run dev运行应用程序。但是如何构建应用程序并从apache提供服务呢

---

提前感谢。

在react应用程序的package.json中使用代理

"proxy": "http://localhost:8000"

并且只使用路由而不是基本url来获取

fetch("/testAPI")

现在将React应用程序文件夹复制到您的Express文件夹 并将此脚本添加到Express的package.json中

"scripts": {
"client-install": "npm install --prefix reactapp",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix reactapp",
"dev": "concurrently \"npm run server\" \"npm run client\""
},

快跑

npm run client-install

只跑了一次

npm run dev

---

要在react应用程序的package.json中同时运行服务器和客户端，请使用代理

"proxy": "http://localhost:8000"

并且只使用路由而不是基本url来获取

fetch("/testAPI")

现在将React应用程序文件夹复制到您的Express文件夹 并将此脚本添加到Express的package.json中

"scripts": {
"client-install": "npm install --prefix reactapp",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix reactapp",
"dev": "concurrently \"npm run server\" \"npm run client\""
},

快跑

npm run client-install

只跑了一次

npm run dev

---

要同时运行服务器和客户端，需要修改react应用程序。用于使用不同的URL。将基本url定义为ENV

构建之后，它只是简单的HTML、CSS、JS应用程序，您也可以将其部署到子路径上

前。https://example.com/website

无需在端口上或使用Express部署react

但是如果你想达到这样的目标，你能做的就是

---

准备一个构建，将其放入express View文件夹中，并从express为react应用程序提供服务。

您需要修改react应用程序。用于使用不同的URL。将基本url定义为ENV

构建之后，它只是简单的HTML、CSS、JS应用程序，您也可以将其部署到子路径上

前。https://example.com/website

无需在端口上或使用Express部署react

但是如果你想达到这样的目标，你能做的就是

---

准备一个构建，将其放在express View文件夹中，并从express为您的react应用程序提供服务。

我感谢收到的所有答案。因此，作为我收到的答案的补充，我想提及我是如何将构建转移到生产中的

1. npm install -g pm2
2. sudo chmod 755 /server/build/server.js (build file)
3. sudo pm2 start /server/build/server.js (Adds to pm2 task)
4. sudo pm2 startup systemd

我在/etc/apche2/sites available/nodeapp.conf中创建了一个新的虚拟主机，并启用了这些apache模块 sudoa2enmod代理和sudoa2enmod代理

现在通过sudoa2ensite nodeapp.conf启用站点。重新加载服务器，点击localhost/node并启动

如果您遇到任何黑屏错误，请确保在react的package.json中添加以下内容。主页：http://localhost/node.

---

我很感激收到的所有答复。因此，作为我收到的答案的补充，我想提及我是如何将构建转移到生产中的

1. npm install -g pm2
2. sudo chmod 755 /server/build/server.js (build file)
3. sudo pm2 start /server/build/server.js (Adds to pm2 task)
4. sudo pm2 startup systemd

我在/etc/apche2/sites available/nodeapp.conf中创建了一个新的虚拟主机，并启用了这些apache模块 sudoa2enmod代理和sudoa2enmod代理

现在通过sudoa2ensite nodeapp.conf启用站点。重新加载服务器，点击localhost/node并启动

如果您遇到任何黑屏错误，请确保在react的package.json中添加以下内容。主页：http://localhost/node.

---

我试过这个。在我的例子中，start是./bin/www。但是我得到一个错误，上面写着sh:1：并发：未找到现在它工作正常。他失踪了。如何从apache构建服务？我已经尝试过了。在我的例子中，start是./bin/www。但是我得到一个错误，上面写着sh:1：并发：未找到现在它工作正常。他失踪了。如何从apache构建此服务？