如何将reactjs项目上传到ftp？

Question

我是“反应”的新手，我为锻炼做了两个传呼的网站，在我的本地主机上都做得很好。

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

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

create-react-app react-demo-project

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

我有一些问题要问：

反应项目会在linux主机上正常工作吗？

我需要所有的项目上传到ftp？因为在node_modules目录中有ar圆形20.000文件。

Answer 1

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

npm run build

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

如果您看到一个空白页(在生成和打开index.html之后)，您必须更改index.html中的主js文件路径：

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

我改变了js的路径，这起作用了！

Answer 2

创建-反应-应用程序有一个命令捆绑您的应用程序到一个就绪的部署状态。

npm run build

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

部署 npm run build创建一个build目录，其中包含您的应用程序的产品生成。设置您最喜欢的HTTP服务器，以便为站点的访问者提供index.html服务，并向静态路径(如/static/js/main.<hash>.js )的请求提供/static/js/main.<hash>.js文件的内容。

Answer 3

反应项目会在linux主机上正常工作吗？

是的，它将在所有的Yes服务器上工作，除非您有服务器端呈现(SSR)。

我需要所有的项目上传到ftp？因为在node_modules目录中有ar圆形20.000文件。

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

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

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

打开package.json添加一个新条目homepage: /your_subfolder/

它会看起来像这样

​

​

现在，执行上面提到的步骤，您的站点应该可以正常工作。