求教，React 项目如何使用 Nodejs 部署

求教，React 项目如何使用 Nodejs 部署
运行 npm run clean && cross-env NODE_ENV=production webpack --webpack.config.babel.js --progress 命令打包出来了 index.html 和 js 文件，我理解这就打包完成了，然后打开 index.html 一片空白在 webpack-dev-server 上跑还是好的，求教啊

6 回复

打包好的项目文件需要通过 http 服务器别人才能访问到呢，你可以启动个 nginx 然后把文件放 html 目录下。


已经发现问题所在了 Browserhistory 的锅

webpack-dev-server 跑的是你内存里的代码
并不是真正 build 文件夹中的

location / {
root <dir>;
try_files $uri /index.html =404;
}

Browserhistory 的话你需要 nginx 或者是 http server 直接访问中国 index.html

在React项目中使用Node.js部署通常涉及以下几个步骤。这里我们假设你已经有一个构建好的React应用（通常通过npm run build生成build文件夹），以及一个基本的Node.js服务器（例如使用Express）。

  1. 安装必要的依赖： 确保你的Node.js环境已经安装了Express。如果没有，请运行：

    npm install express

  2. 创建服务器文件： 在项目根目录下创建一个server.js文件，内容如下：

    const express = require('express');
const path = require('path');
const app = express();

const PORT = process.env.PORT || 5000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

  3. 构建React应用： 在React项目目录下运行：

    npm run build

  4. 启动服务器： 在包含server.js的目录下运行：

    node server.js

  5. 访问应用： 打开浏览器，访问http://localhost:5000（或者你在server.js中设置的其他端口）。

这样，你的React应用就通过Node.js（Express）服务器部署并运行了。如果你计划在生产环境中使用，还需要考虑更多安全性、性能优化等方面的问题。

回到顶部