如何将前端应用程序部署到 Cloudflare 页面？
已发表: 2021-07-17部署前端应用程序是前一段时间的大问题之一。 但今天，这是小菜一碟。 即使是新手也可以在超级托管服务的帮助下部署应用程序。
许多托管平台允许我们在几分钟内部署前端应用程序。 我们的网站将在几分钟内公开准备就绪。
是不是很棒？
是啊，就是。
让我们学习如何在 Cloudflare Pages 上部署前端应用程序。
前端应用
在深入研究应用程序的部署部分之前，我们需要创建一个前端应用程序。
怎么做？
连你都知道。 所以，我们现在不打算在这里讨论它。
我们知道有很多库和框架可供我们创建前端应用程序。 但是，这些库或框架的核心部分是 JavaScript。 您知道所有这些，因为您已经在寻找一种部署前端应用程序的方法。 如果你只是在寻找部署部分，你可以跳过这部分并跳转到部署。
有 React、Vue、Angular、JavaScript 等等。 可以根据他们的要求创建应用程序。
正如我们所见，创建前端应用程序有很多选择。 部署情况如何？ 所有前端应用程序的流程是否相同？
是的，所有前端应用程序的部署过程都是一样的。 但是，使前端应用程序准备好部署的过程可能因库和框架而异。
对于大多数使用库和框架构建的前端应用程序，都会有一个命令来构建。 你可能已经知道了。 如果你不知道它是什么，你可能需要根据你的前端库或框架来研究它。
我们需要一个应用程序来部署。 让我们设置一个简单的应用程序。 如果您已经有要部署的前端应用程序，则可以跳过此部分。
设置
在设置之前，我们需要了解一件事。 入口点必须是index.html ，我们的前端应用程序才能将其部署到 Cloudflare 页面。 您可能会在构建过程后找到文件index.html （位置可能因库和框架而异）。
我们将为演示创建一个简单的React和普通JavaScript应用程序。 您可以选择您熟悉的任何其他库或框架。 让我们先设置React应用程序。
运行以下命令来创建 React 应用程序。
npx create-react-app demo用您的创造力更新应用程序，或保持原样。 我只会更改一些内容以确保它最终正确部署。
现在，让我们创建一个普通的 JavaScript 应用程序。
拥有index.html对我们来说是强制性的。 因此，让我们创建名为index.html的文件。 现在，你可以添加更多的文件，如styles.css、script.js、图像等，让它看起来很漂亮。 但这不是强制性的，虽然:)。
我们的简单部署设置现已完成。 接下来是什么？ 现在是部署时间。 潜入其中。
部署
Cloudflare 页面允许我们从 GitHub 部署我们的前端应用程序。 因此，部署过程有两个部分。
- 首先，我们需要在 GitHub 上拥有我们的应用程序代码。
- 其次，将应用程序部署到 Cloudflare 页面。
大多数情况下，您不必担心第一部分，因为我们从项目的第一天起就在托管平台中维护我们的代码。 您可以跳过第一部分并转到部署部分。
如果您尚未将代码推送到 GitHub 或在其他代码托管平台中，则可能需要将其转移到 GitHub 以部署到 Cloudflare 页面。 您可以按照以下步骤将代码推送到 GitHub 或自行完成。
1.推送代码到GitHub
你有 GitHub 账户吗？ 是的，我想在大多数情况下。 如果您没有，请在此处创建一个。
- 转到 GitHub 并登录您的帐户。
- 使用您的项目名称创建一个存储库。 在这里，我们将其命名为demo 。
- 新创建的存储库将如下所示。 它显示了一些用代码填充存储库的
git命令。
让我们将我们的代码推送到我们刚刚创建的存储库中。 如果您已经熟悉它，您可以按照以下步骤操作或自行完成。 让我们首先在终端或 cmd 中打开我们的项目。
- 使用
git init命令初始化 git。 - 使用命令
git add .将所有更改添加到本地 gitgit add .. - 使用
git commit -m "message"命令提交更改。 将消息替换为适合提交的消息。 - 现在，我们必须将远程存储库连接到本地项目。
- 连接它的命令是
git remote add origin 'your_repo_path'。 将your_repo_path替换为您的远程存储库。 存储库路径如下[email protected]:username/repo_name。 我的演示存储库路径是[email protected]:hafeezulkareem/demo。 - 最后一步是将代码推送到我们的远程存储库。 我们可以使用命令
git push -u origin main。
让我们看看 GitHub 存储库中的代码快照。
我们已经完成了将代码推送到 Github 的工作。 我们的下一个任务是将其部署到Cloudflare Pages 。 事不宜迟，让我们开始部署。
2. 部署到 Cloudflare 页面
让我们将站点部署到 Cloudflare 页面。 在继续之前，我们必须创建一个 Cloudflare 帐户。 如果您在 Cloudflare 中还没有帐户，请在此处创建一个。 完成创建 Cloudflare 帐户后，您就可以部署您的站点了。
- 转到 Cloudflare 页面站点。
- 登录到您的帐户。 您将看到如下仪表板。
- 如果您已登录Cloudflare网站，则可能看不到页面的仪表板。
- 单击 Cloudflare 仪表板右侧的“页面”按钮导航到页面的仪表板。 请参考下图。
- 单击页面仪表板中的“创建项目”按钮。
- 您将导航到以下页面。
- 单击Connect GitHub 帐户以从GitHub获取我们的应用程序存储库。
- 您将被重定向到 GitHub 应用程序页面以授权 Cloudflare 页面。
- 我们可以访问所有存储库或选定的存储库。 最好授予对我们部署到 Cloudflare Pages 的存储库的访问权限。 如果需要，您可以授予对所有存储库的访问权限。
- 选择两个选项之一。
- 如果您选择了All repositories ，则无需选择存储库的特定存储库。 单击按钮安装和授权。
- 如果您选择了Only select repositories ，那么您必须从下拉列表中选择存储库。 单击选择仅选择存储库选项后出现的选择存储库下拉列表。
- 输入您的存储库名称，如下所示。
- 输入名称后，将显示您的存储库。 选择存储库。 您可以在列表顶部看到所选的存储库，如下所示。
- 单击安装和授权按钮。 您将被重定向到 Cloudflare Pages 部署页面。
- 您将在页面上看到所有授权的存储库。
- 选择要部署的存储库。
- 选择要部署的存储库后，单击开始设置按钮。
- 它将带您进入部署过程的后续步骤，即设置构建和部署。
- 向下滚动时，您会找到一个名为Build settings的部分。 我们必须为我们的前端应用程序选择合适的构建过程。
- 我们必须根据我们使用的框架或库来选择构建过程。
- 单击框架预设以查看所有选项。
- 在这里，我们正在部署React和普通 JavaScript应用程序。
- 如果您要部署React应用程序，请从下拉列表中选择Create React App 。
- 对于没有任何包的普通 JavaScript应用程序，请选择None 。
- 如果您正在部署一些其他前端应用程序，则选择适当的框架预设构建选项。
- 我们也可以选择None并输入自定义构建命令。 根据您的应用程序，选择它。
- 在构建配置设置之后，单击Save and Deploy按钮以完成我们的部署过程。
- 单击Save and Deploy按钮后，部署过程将如下开始。
- 该过程将需要几分钟时间来部署我们的网站。 等待并享受。
- 部署过程完成后，它会向您显示带有成功消息的站点 URL。
- 访问具有给定 URL 的站点。
- 我们可以从项目页面更新站点的设置。
- 每当我们将新代码推送到存储库时，Cloudflare 页面都会自动部署更新。
而已。 我们已完成将前端应用程序部署到 Cloudflare 页面的工作。
结论
欢呼！ 我们已将前端应用程序部署到 Cloudflare 页面。 部署前端应用程序后，您可能需要更改设置、更新内容等。 请参阅此处的 Cloudflare 文档。 如果您想查看部署特定框架指南的步骤，您可以转到文档中的框架指南部分。
接下来，如何将前端部署到 Netlify？
注意：文章中显示的演示站点在一段时间后可能无法公开使用。
快乐部署