如何在生产中基于 create-react-app 的项目中指定端口号？

Posted 2023-02-21

【中文标题】如何在生产中基于 create-react-app 的项目中指定端口号？

【英文标题】：How to specify a port number in a create-react-app based project in production?

【发布时间】：2018-01-26 13:08:08

【问题描述】：

我正在部署一个网站，其中包含一些使用 create-react-app 构建的 react 项目。每个项目将位于其自己的网页上：例如：mywebsite.com/project1、mywebsite.com/project。我正在 Ubuntu 服务器上设置 nginx 反向代理（我了解如何配置），但我不确定如何为我的每个 create-react-app 项目指定端口号，以便每个项目都有一个唯一的端口.谁能阐明如何做到这一点？谢谢！

PS - 我见过像这样的线程 - How to specify a port to run a create-react-app based project?，但我看不到这个解决方案如何应用于生产。

【参考方案1】：

你在 create-react-app 中以npm start 命令启动的服务器是 webpack 开发服务器。它只意味着在开发时使用，您不应该在生产环境中使用它。

相反，您可以使用简单的静态文件服务器轻松托管 CRA 应用程序，该服务器可以easily configure with nginx 无需反向代理或更改开发服务器的端口。您只需运行npm run build 命令并将build 文件夹的内容部署到静态文件服务器的相应文件夹即可。您可以在the documentation of CRA 阅读更多相关信息。

此外，请确保在构建项目之前specify the homepage in your package.json，因为您将在 mywebsite.com/project1 这样的相对路径中托管您的应用程序。因为 CRA 假定您的应用托管在服务器根目录并使用默认设置。

希望这会有所帮助！

【讨论】：

您好 Tharaka，非常感谢您的回复！使用静态文件服务器托管 CRA 应用程序绝对是部署我的网站的最有效和最直接的方式。我也很欣赏主页行上的提示。我刚刚部署了一个 CRA 项目，它正在运行！