reactjs项目如何上传到ftp？

Question

我是 React 新手，我做了 2 个分页网站进行锻炼，一切都在我的本地主机上运行良好。

但我对如何将项目上传到我的 linux 服务器感到困惑。

我做了什么？ 我使用以下命令通过终端创建反应应用程序：

create-react-app react-demo-project

终端创建我的项目，在项目根目录中我有node_modules目录。

所以我有一些问题：

1- React 项目可以在 linux 主机上正常工作吗？

2- 我需要将我所有的项目上传到 ftp 吗？ 因为 node_modules 目录中有大约 20.000 个文件。

Answer 1

使用此命令构建您的应用程序：

npm run build

Build 文件夹已在您的项目目录中创建，在浏览器中打开 index.html 并检查输出...

如果您看到一个空白页面（在构建并打开 index.html 之后），您必须更改 index.html 中的主要 js 文件路径：

默认为： src="/static/js/main.ddfa624a.js"更改为： src="./static/js/main.ddfa624a.js"

我改变了 js 路径，这奏效了！

Answer 2

create-react-app 有一个命令可以将您的应用程序捆绑到准备部署状态。

npm run build

此命令会将您的应用程序捆绑在/build文件夹中。 使用此文件夹的内容，您可以在任何托管环境中部署您的应用程序。 使用此命令时，您无需手动安装包和库。 有关使用此命令和在不同托管环境中部署应用程序的更多信息，请参见create-react-app README

部署

npm run build使用应用程序的生产npm run build创建一个build目录。 设置您最喜欢的 HTTP 服务器，以便为您网站的访问者提供index.html ，并对/static/js/main.<hash>.js等静态路径的请求与/static/js/main.<hash>.js文件。

Answer 3

1- React 项目可以在 linux 主机上正常工作吗？

是的，它适用于所有网络服务器，除非您有服务器端渲染 (SSR)

2- 我需要将我所有的项目上传到 ftp 吗？ 因为 node_modules 目录中有大约 20.000 个文件。

node_modules 中的文件不会转到您的 Web 服务器。 这些是仅在开发期间使用的开发依赖文件。

1. 运行 npm run build
2. 这将在项目根目录中创建一个名为build的文件夹。 这将包含所有 html、css、图像和 js 文件
3. 将build文件夹中的所有文件和文件夹复制到您的站点根目录。

如果您的网站必须托管在根目录下的子文件夹中，您需要执行以下操作，否则您将看到一个空白页面。 这是因为您的静态文件（css、js 等）没有正确加载。

打开 package.json 添加一个新的入口homepage: /your_subfolder/

它看起来像这样

现在执行上述步骤，您的网站应该可以正常工作