如何在服务器上设置 React 应用程序答案

【问题标题】：How does a react app can be set up on server如何在服务器上设置 React 应用程序
【发布时间】：2020-05-02 22:04:28
【问题描述】：

我正在尝试了解如何将我的 react 应用程序上线。

到目前为止，我在我的 Mac 上使用npm start 启动它，并访问localhost:3000 或http://127.0.0.1:3000。

所以我目前购买了一台小型服务器，安装了所有东西（node 和npm 的最新版本，git 和其他必要的东西），克隆了我的 repo，并安装了所有依赖项。

当我在服务器上执行npm start 时，它说它在端口3000 上可用。但是当我使用以下:3000 进入服务器的IP 时，它会超时。

我真的不明白需要做什么才能做到这一点，我发现了一些关于在服务器上配置 apache 的东西，还有一些关于使用 pm2 的东西，所以即使在离开终端后也会运行一个节点脚本，但这会我想是我的下一步.. 以及其他关于使用 express 配置的东西（但我需要node+ express 吗？因为它是一个简单的前端反应页面？）。

【问题讨论】：

默认情况下不发布 3000 端口 - 您需要 NGINX 代理之类的东西来接受端口 80 或 443 上的请求并将它们路由到您的应用程序
如果你使用了create-react-app，你可能需要在你的package.json中添加proxy来代理你服务器上的API请求。

标签： node.js reactjs npm server

【解决方案1】：

如果您使用webpack devserver，请仅将其用于开发

本指南中的工具仅用于开发，请避免在生产中使用它们！

回到你的问题，有a difference between binding to 127.0.0.1 or binding to 0.0.0.0

尝试更改devserver to listen to 0.0.0.0

webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0'
  }
};

通过 CLI 使用

webpack-dev-server --host 0.0.0.0

另请注意，您需要允许入口规则（传入连接）。也就是说，允许来自 Internet 的请求到达您的服务器

【讨论】：

【解决方案2】：

在服务器上部署应用程序时，您必须进行很多配置。构建应用程序、Nginx、pm2 甚至 ssl 认证。该视频时长 20 分钟，满足您的所有需求。 https://www.youtube.com/watch?v=oykl1Ih9pMg&t=1s

【讨论】：

感谢链接，我认为以后会有用，但我做了他在 7 分钟 30 之前所做的所有事情，这就是我卡住的地方（似乎我无法访问我的服务器的 IP：3000）
我找到了开放3000端口的地方。所以现在我可以访问它了。现在我需要了解如何在服务器上启动create-react-app（但要长期）。您提供的 youtube 链接使用 pm2 讨论 node.js 文件。
（我的应用程序的基本文件是public/index.html，而不是.js 文件）
你需要一个 express 服务器来为 public/index.html 提供服务
我还需要pm2 吗？