如何将前端应用部署到 Netlify？

部署前端应用程序在今天并不是什么大事。 我们可以使用现代技术和托管平台在几分钟内部署一个站点。 那里有许多托管平台。 但是，我们对本文感兴趣的是 Netlify。

让我们将前端应用程序部署到Netlify 。

前端应用

有不同类型的前端库和框架，如 React、Vue、Angular 等，好消息是所有这些都使用相同的包打包器。 使用不同库和框架构建的所有前端应用程序的部署是相似的。 因此，我们很乐意使用这些库和框架中的任何一个。

我们还可以创建没有任何库或框架的前端应用程序。 这是从前构建前端应用程序的传统方式。 但是，现在变化很大。 因此，我们可以以不同的方式构建前端应用程序。 尽管如此，所有这些不同类型的前端应用程序的部署过程都是相同的。

我们将看到部署一个使用库构建的前端应用程序和另一个没有任何库或框架的前端应用程序。 让我们使用React和普通JavaScript构建用于部署的最小前端应用程序。

设置

我们将为部署演示创建简单的 React 和 JavaScript 应用程序。 您也可以创建它们以进行后续操作。 或者，如果您已经拥有前端应用程序，则跳到部署部分。

我们需要记住，在部署到Netlify时，任何前端应用程序的入口点都应该是index.html 。

如果我们使用任何库或框架创建了应用程序，我们就不必担心。 默认情况下，库和框架会在构建过程中为我们创建index.html文件。 但是，当我们有普通的 JavaScript 应用程序时，我们需要创建一个index.html文件作为我们应用程序的入口。

反应应用

运行以下命令以创建 React 应用程序。

 npx create-react-app demo

您可以在部署之前根据需要更新应用程序。 我刚刚更新了主页上的一行文字。 不过没关系:)。

纯 JavaScript 应用程序

按照以下步骤创建一个简单的 JavaScript 应用程序。

• 创建一个名为demo的文件夹。
• 创建三个名为index.html 、 styles.css和script 的文件。 js 。
• 这里， index.html是我们应用程序的入口点。

发挥您的创造力并更新应用程序。 我只是向应用程序添加简单的东西。

部署

将前端应用程序部署到 Netlify，我们有两种选择。 我们可以直接将来自 GitHub、GitLab、BitBucket 等的应用程序部署到 Netlify。 或者我们可以使用Netlify CLI（命令行界面）进行部署。 部署我们的应用程序并不一定要知道每个。 但是，我们为部署提供了不同的选项，这很好。

让我们一一探讨它们。

GitHub

我们正在使用 GitHub 来托管我们的代码。 您不需要使用它，因为它不是强制性的。 您可以根据需要使用其他平台。

有两种类型的应用程序供我们部署。 但是，他们两个的过程看起来都很相似。 尽管我会向你展示他们两个。 主要有两个步骤。 他们是

• 将代码推送到 GitHub。
• 使用 Netlify 从 GitHub 部署应用程序。

第一部分对于React和JavaScript应用程序都是通用的。 让我们从第一步开始部署过程。

我们假设您在 GitHub 上没有您的代码。 如果你在 GitHub 上有你的代码，那么你可以跳过推送代码部分。 你需要git工具。 如果你的机器上没有安装git ，那么你应该在继续之前安装它。

#1. 将代码推送到 GitHub

• 转到您的 GitHub 帐户并创建一个名为demo 的存储库。

• 创建后，您可以看到如下所示的 repo。

现在，我们必须将代码推送到我们在上面创建的存储库中。 要推送代码，您可以按照 repo 或以下命令中给出的命令进行操作。

• 打开终端或cmd。
• 转到您的项目目录。
• 使用git init初始化git init
• 将更改添加到本地 git git add .
• 使用消息git commit -m 'Completed application'提交更改
• 将远程存储库与我们的本地存储库连接git remote add origin 'your_repo_path' 。 将your_repo_path替换为您的远程存储库。 您可以在类似我的[email protected]:hafeezulkareem/demo.git的存储库中找到它[email protected]:hafeezulkareem/demo.git
• 现在，推送代码git push -u origin main
• 而已; 我们已将代码推送到 GitHub。

您可以在您的 repo 中看到如下代码。

我们完成了将代码推送到 GitHub 的第一步。 如果您正在部署一个普通的JavaScript应用程序，那么您的代码可能如下所示。

让我们进入下一步并将我们的应用程序部署到 Netlify。

#2. 将 GitHub 代码部署到 Netlify

如果您在 Netlify 中没有帐户，请创建一个。

• 转到 Netlify 网站。
• 登录到您的帐户。
• 您可以在 Git 中看到一个名为New site的按钮，如下所示。

• 单击按钮开始部署。
• 您将导航到如下所示的部署页面。

• 您可以在页面上使用不同的代码托管平台。 我们正在使用 GitHub。 所以，点击它。
• 它将打开一个新窗口以登录我们的 GitHub 帐户，如下所示。

• 登录你的 GitHub 账号进行 Netlify 授权。
• 登录到 GitHub 帐户后，窗口将关闭并显示Authorized 。
• 现在，从给定的搜索栏中搜索您的存储库名称。

• 当您搜索存储库时，它不会出现，因为我们没有授予我们的存储库访问 Netlify 的权限。 您将在 GitHub 上看到一个名为Configure Netlify的按钮。

• 单击按钮并输入您的 GitHub 帐户密码以确认访问。

• 您将导航到如下所示的访问页面。

• 向下滚动，您将看到一个名为Repository Access的部分。

• 有两种选择。 我们可以访问我们所有的存储库或其中一些需要它的存储库。 最好授予对我们正在部署的存储库的访问权限，而不是全部。
• 选择“仅选择存储库”选项，如下所示。

• 单击下面的下拉列表并搜索要部署的存储库。 选择它。

• 单击“保存”按钮。
• 它将重定向到Netlify部署页面。 您可以看到新的存储库。

• 单击存储库。
• 它将显示不同的详细信息，例如要部署的分支、安装包的命令等。

• 如果您在master以外的其他分支上有完整代码，请通过从下拉列表中选择分支来更新它。
• 最后，单击“部署站点”按钮。 它会将您重定向到仪表板。
• 部署站点需要一些时间。

• 部署后，您将看到已发布的站点。

而已。

我们已成功将我们的站点部署到 Netlify。 您可以单击站点 URL 以实时查看它。

我们可以根据需要更新站点和域设置。 但是，我们不会在这里介绍它，因为它是另一个完整的话题。 下面是部署后的纯 JavaScript 应用程序。

部署过程没有区别。 但是，请记住不要忘记应用程序的入口点，即index.html 。

现在，是时候了解另一种部署前端应用程序的方法了。

#3. 使用 Netlify CLI 部署代码

Netlify CLI 是一个命令行界面，用于从终端或命令行部署前端应用程序。 当您不想执行一些额外的步骤（上述方法）时，它很有用。 像上面的方法一样，我们可以部署React （任何库或框架）或JavaScript应用程序。

您可以在此处获取Netlify CLI的完整文档。 但是，没有必要部署应用程序。 进入高级的时候可以参考一下。

让我们看看如何使用 Netlify CLI 进行部署。

首先，我们必须在我们的机器上安装它。 它可以作为节点包使用。 因此，我们可以使用npm安装它。 让我们使用以下命令安装它。

 npm install netlify-cli -g

标志-g是全局安装包，以便我们可以在任何地方访问它。 您将看到类似于下图的内容。

让我们看看使用 Netlify CLI 部署React和普通JavaScript应用程序的步骤。

• 运行 React（或任何其他库或框架）应用程序的构建命令。 对于普通 JavaScript 应用程序，我们不需要运行任何命令。

 npm run build

• 构建命令可能因您使用的库或框架而异。
• 您将看到一个构建文件夹，如下所示。

• 在 React 应用程序的情况下将目录更改为build文件夹，在 JavaScript 应用程序的情况下将目录更改为项目文件夹。

• 在进行下一步之前，我们需要创建一个Netlify帐户。 转到 Netlify 并创建一个帐户，然后转到下一步。
• 现在，我们需要使用 CLI 登录。 让我们运行以下命令来登录。

 netlify login

• 上述命令将在默认浏览器中打开一个新选项卡以登录 Netlify 帐户。 它将带您到 Netlify 站点。
• 输入您的凭据并登录。登录后，您将要求授权CLI。

• 单击授权以验证您自己。 之后您将看到一条成功消息。

• 现在，是时候部署我们的应用程序了。 运行以下部署命令。

 netlify deploy

• 它会要求您选择现有站点或创建一个新站点。 选择（使用向上和向下箭头）创建并配置新站点并按Enter 键。

• 然后它会显示Teams进行选择，使用箭头进行选择，然后按 Enter 。

• 现在，您可以输入站点的子域。 不过，这不是强制性的。 如果我们离开它，Netlify 会为我们随机选择一个。 如果我们愿意，我们可以稍后更改它。 我暂时把它留空。

• 它会要求我们输入要部署的目录。 我们已经导航到目标目录。 让我们按 Enter 键。 您也可以输入其他目录。 但这并不简单。 因此，最好先导航到目标目录，然后再部署。

• 它将为草稿 URL 部署我们的站点，如下所示。

• 您可以在草稿 URL 上检查您的网站，并确保一切正确。
• 检查站点后，我们可以使用以下命令将其部署到生产环境中。

 netlify deploy --prod

• 它只会询问目录。 进入目录。 如果我们在同一目录中，则只需按 Enter 即可。
• 而已。 我们的站点部署已完成。 您可以访问该网站进行检查。

• 而且，这是结果。

我们已经完成了使用Netlify CLI将我们的站点部署到 Netlify 的工作。 您可以在 Netlify 仪表板中更新站点的设置。

结论

呼！ 这是一个很长的。 完全阅读完本文后，您无需任何其他指南即可将前端应用程序部署到 Netlify。

有两种方法可以将我们的应用程序部署到 Netlify。 遵循哪个？ 使用第一种方法有一点优势。 每当我们将新代码推送到我们的站点存储库时，Netlify 都会更新构建。 但是，在 CLI 方法的情况下，我们必须手动完成。

我们总是根据我们所处的情况采用一种方法而不是其他方法。无论如何，您知道这两种部署方法。 所以，我们不需要担心方法。 选择最适合您的那一款。

注意：文章中显示的演示站点在一段时间后可能无法公开使用。

需要 Netlify 的替代品吗？ 查看这些最好的静态站点托管平台。

快乐部署