Question

我创建了一个具有以下文件夹结构的反应应用

-public
--dist
--- bundle.js
--- styles.css的
--index.html
--images
-server
--server.js
-src
--components
--app.js
-.babelrc
-package.json
-webpack.config.js

我想将其上传到cPanel。那可能吗？我还需要上传node_modules /文件夹吗？

这是指向我的仓库的链接：https://github.com/theoiorga/react-expensify-app

Answer 1

我最近有同样的问题。作为React的新手，作为React课程的一部分，我已经多次将我的应用程序部署到Heroku。但是，我想部署到我自己的共享服务器（CPanel）上，以了解它是如何完成的。而且还可以使用托管来托管我编写的其他应用。

无论如何，上面提到的Kallayya和Sumit都需要完成。还有一个很棒的step by step information here。

注意事项。如果您未使用“ npx create-react-app”之类的方法来创建应用程序（样板），则不会获得“ Build”文件夹。

作为课程的一部分，我从头开始创建了样板。因此，我最初对于为什么没有获得Build文件夹感到困惑。然后我意识到如果应用程序是使用例如'npx create-react-app'或'yarn create react-app'。我曾经使用“ npx create-react-app”启动另一个项目。在新项目中，我能够获得一个Build文件夹。因此，我的认识。

因此，如果您运行构建并没有获得Build文件夹（如上所述）。然后，要部署以运行的文件将成为本地站点上“ public”目录中的内容。 （如果您具有用于生产和开发的环境设置，则可能需要为生产进行构建，例如yarn build：prod）。

现在在上面的分步链接中遵循相同的过程。但是，将内容从本地站点的“公共”目录上载到远程托管服务器上的public_html文件夹。如上述链接的页面所示，创建并上传您的.htaccess文件。现在，在您的相关域中查看您的网站。

按照上面的链接中的步骤，我能够部署到共享主机并在我的域中查看我的应用程序。它工作得很好。尚未看到任何问题。

我希望这对其他人有帮助。

Answer 2

步骤1："homepage": ".",->将其添加到package.json文件中

第2步：npm run build->这将创建一个构建文件夹。

第3步：创建一个.htaccess文件，它看起来像这样

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

第4步：现在将build文件夹中的所有文件以及您的htaccess文件放入所需的域或子域中

Answer 3

按照步骤在CPanel上部署React网站

Step(1) : in ur project i mean in your local project run this command "npm 
           run build" then "Build" folder will create automatically  after 
           that 

Step (2) : Go to ur project folder in that build folder will appear

Step (3) : Go to inside the "Build" folder and select all files and compress 
           or make a Zip then upload in cpanel it will work

注意：对于React应用，不需要上传整个项目，我们只需要部署建立zip文件夹。

希望每个人都能解决您的问题。

Answer 4

只需将您的本地公用文件夹上传到您的托管public_html文件夹

Answer 5

反应应用程序是在节点上构建的，无法在cpanel上开箱即用。

我假设您正在使用linux服务器。要部署React应用，您需要执行以下操作。

确保已对服务器进行了root评估。只有在使用vps或专用主机而不是共享主机的情况下，才有可能。
使用SSH登录到您的帐户
在服务器上安装节点和npm
将构建文件上传到服务器
运行命令以在生产环境中启动您的应用。

这些步骤看起来很简单，但有点复杂。如果您是刚开始使用React的新手，我建议您不要为这些步骤而烦恼。您也可以免费使用heroku之类的云服务在不到10分钟的时间内使您的react应用免费运行。

Answer 6

确保您的托管服务提供商支持将在CPanel上看到的Node.js。我使用的公司是Namecheap，他们只是将Node.js运行时环境添加到了CPanel。请与您的托管公司联系，并询问他们是否支持Node.js

Answer 7

我同意您拥有专用或VPS托管这一事实，因为您将需要控制命令行。

除了其他注释中提到的内容（通过SSH访问cPanel并安装节点和npm等）外，我建议您执行的操作，您应该使用GitHub或BitBucket上传文件。

通过这种方式进行操作，可以在每次需要时不断更新Web应用程序。

Answer 8

我想您具有ssh访问权限。如果确实通过SSH安装NodeJS，然后上传文件，则最好在public_html上进行安装。不仅是构建，还包括整个项目。我会用git来做。

归档文件后，您将必须安装npm，并且必须在客户机文件夹中安装客户机，因为仅上传node_modules文件夹将不起作用。

您应该永久安装并永久运行节点server.js，即使关闭终端，这也将使服务器运行

我希望我能自我解释。

Answer 9

在Cpanel /服务器上部署React App。请按照步骤

Step 1)转到Package.json文件并添加此属性"homepage":"http://yourdomain.com"并将您的域粘贴到其中。喜欢

Step 2)现在使用npm run build

构建应用

在您的项目目录中，它将创建一个构建文件夹，并将包含项目的所有静态文件。压缩所有文件并上传到您网站运行所在的cpanel目录中。

Step 3)创建一个.htaccess文件并将其放在根目录中。并将以下代码粘贴到.htaccess文件中。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

现在运行您的项目。可以。

谢谢

Answer 10

我有一个包含 siteground 的托管计划，我可以使用该计划托管任意数量的网站。

一旦我想通了，用 siteground 托管一个 React 应用程序就变得非常容易了。

通过阅读此线程，我获得了大量知识，因此如果您想要视觉效果，可以查看最佳答案。

步骤 1) 将 "homepage":".", 添加到 package.json 文件中的对象。

步骤 2) 在您的终端中运行 npm run build

步骤 3) 使用以下代码将 .htaccess 文件添加到您的构建文件夹：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

第 4 步）使用文件管理器将所有文件从您的构建文件夹上传到服务器上的公共文件夹，包括您的 .htaccess 文件。我使用了 FileZilla，但您可以使用内置的文件管理器或 SSH 密钥。如果您不知道如何成为 FTP 用户，请转到here。

场地特定说明：

步骤 5) 导航到所需网站的网站工具。（您甚至可以为此使用临时域）。

步骤 6) 在安全 > SSL 管理器中安装 SSL 证书。（您可以使用免费的。请注意到期日期。）

第 7 步）强制 HTTPS，方法是转到安全 > HTTPS 强制并打开它。

那应该可行！如果您有任何问题，请发送问题。

我与 siteground 或任何公司没有任何关系。我是一名自由网络开发人员，正在培养我的反应技能

如何在cPanel上部署react应用程序？

10 个答案: