在 5 分钟内使用 cPanel 部署/托管您的 React 应用程序

深入探索

关于 FileZilla 的说明

保持水分充足

深入探索

在开发一个名为Punchstarter的个人项目（一款 Kickstarter 克隆应用）时，我苦于找不到任何关于如何使用 cPanel 在自己的域名上托管自定义应用的文档。希望这篇文章能对大家有所帮助。

1. 购买域名和主机

要托管网站，您需要从托管服务提供商处购买注册域名和托管套餐（两者均通过Namecheap或Godaddy等众多渠道提供）。如果您同时购买，这些提供商通常会自动将域名指向您的托管服务器。如果没有，本教程可以帮助您。

2. 将主页添加到 package.json 文件中

接下来，打开你的 React App。打开你的package.json文件并添加一个"homepage"属性，如下所示：

格式应该是"homepage": "http://yourdomainname.whatever"

3.创建build文件

在应用程序的根目录中，运行yarn install以安装更新的依赖项。完成后，下一个要运行的命令是yarn build( npm install，npm build同样有效)。

你会注意到，这会在你的项目中创建一个名为 的新目录build。build 文件夹本质上是程序的超级压缩版本，它包含浏览器识别和运行应用所需的一切。

4. 连接到 cPanel

让我们转到您的主机提供商（Namecheap、Godaddy、Bluehost 等）。登录后，导航到您域名的 cPanel 管理器。通常，会有一个下拉菜单，上面写着“管理”，它会引导您进入 cPanel。

您的 cPanel 管理器应该看起来像这样：

导航到文件管理器。在那里你会看到一个目录下拉列表。我们感兴趣的是public_html。打开它。

5. 将构建文件内容添加到public_html

导航到build应用根目录中的文件。打开它并选择构建文件中的所有内容。如果您直接上传整个构建文件，则该过程将无法进行。

一旦您复制了构建文件中的所有内容，请将其上传到public_html。

6.创建并上传.htaccess文件

为了让路由在你的 React 应用中正常工作，你需要添加一个.htaccess文件。在与文件内容public_html同级的文件夹中build，添加一个新文件并将其命名为.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>

保存文件。

您已经完成了。

保持水分充足

就是这样！在浏览器中导航到您的域名地址，您应该会看到功能齐全的 Web 应用程序。

但你知道还有什么好东西吗……一款闪亮的全新机械键盘。如果你对一款好键盘感兴趣，请点击它。或者点击这个，看看有没有其他酷炫的选择。

或者也许你有一个好的，并且你想将它稍微修饰一下（你知道我就是这么做的）。

关于 FileZilla 的说明

我知道很多人喜欢用 FileZilla 来部署和托管他们的自定义 Web 应用。我发现它对我来说没必要，但如果你选择的话，你可以：

1. 下载并运行FileZilla
2. 获取你的域名的 IP 地址——或者询问你的托管服务提供商
3. 在顶部栏中输入域名 IP、cPanel 登录名、cPanel 用户名和主机端口（例如 21。您的托管服务提供商应该会为您提供该信息）
4. 点击“QuickConnect”
5. 连接后，导航到、选择并复制文件内的内容build（在显示计算机目录的左侧窗格中）
6. 导航到public_html右侧 cPanel 窗格中的目录。将文件内容粘贴build到public_html
7. .htaccess使用上面列出的相同信息创建文件