如何在 cPanel 上部署 React 应用程序?

IT技术 node.js reactjs webpack
2021-04-01 17:19:28

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

-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/ 文件夹吗?

这是我的 repo 的链接:https : //github.com/theoiorga/react-expensify-app

6个回答

第 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 放入所需的域或子域中

你能看一下吗?
2021-06-10 17:19:28
我做了同样的事情,但我的应用程序是 nextjs!这就是问题 => stackoverflow.com/questions/60008008/...
2021-06-16 17:19:28

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

Step(1) : Under your local project directory run this command "npm 
           run build" or "yarn build" then "build" directory will be created. This directory contains the bundle of all static files with dependencies which you can directly copy onto your production server. 

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

注意:对于react应用程序不需要上传整个项目,我们只需要部署“构建”目录。

在 Cpanel/Server 上部署 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>

现在运行你的项目。它会工作。

谢谢

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

无论如何,上面提到的Kallayya和Sumit都需要做。这里也有很好的分步信息

注意。如果您没有使用诸如“npx create-react-app”之类的东西来创建应用程序(样板),那么您将不会获得“Build”文件夹。

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

因此,如果您运行构建并且您没有获得构建文件夹(如上所述)。然后部署到 live 的文件将是您本地站点上“public”目录中的内容。(如果您有用于生产和开发的 env 设置,那么您可能需要为生产而构建,例如 yarn build:prod)。

现在按照上面的分步链接中的相同过程进行操作。但是,请将内容从本地站点的“public”目录上传到远程托管服务器上的 public_html 文件夹。创建并上传您的 .htaccess 文件,如上述链接的页面所示。现在在您的相关域中查看您的站点。

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

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

我通过实施以下步骤解决了它

步骤1

在 package.json 中添加以下内容

"homepage": "."

第2步

在meta上面的public/index.html中添加以下内容:描述

<script type="text/javascript"> document.write("<base href='//" + document.location.host + "' />"); </script>

第 3 步

使用npm run build构建您的应用程序

步骤4

使用任何文件传输工具将/build文件夹中的文件上传到服务器

第 5 步

.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>