如何使用GitHub在Netlify上部署React应用程序

React应用程序是使用JavaScript的React库构建的Web或移动应用程序。它帮助用户创建交互式、单页面和动态应用程序。这些应用程序使用 HTML 、 CSS 和 JavaScript 构建。可以通过GitHub、Netlify或任何其他部署平台部署React应用程序。GitHub有自己的 gh-pages ，可以在其中构建、启动和部署应用程序。通过在此类服务器上部署项目，您可以获得项目的公共URL，该URL可用于获取您的网站或项目。

Netlify 是使用最简单的部署平台之一。它具有以下两个功能：

使用 GitHub 存储库
简单的拖放功能（使用构建文件夹）

这使得 Netlify 非常直观。要在 Netlify 上使用 GitHub 部署一个 React 应用程序，需要按照以下步骤操作：

在 Netlify 上使用 GitHub 部署 React 应用程序的步骤

步骤1：创建一个 React 应用程序

首先，您需要一个 React 应用程序。要创建 React 应用程序，您的本地系统需要满足一些先决条件。您的系统中必须安装 Node.js 和 npm 。此外，要安装 npm，您可以在终端上运行以下命令：

npm install npm@latest -g

现在打开你的VS Code或其他IDE，打开终端，并运行以下命令创建一个React App-

npx create-react-app My-Project

使用以下命令导航到您的项目目录 –

cd My-Project

然后，使用以下命令启动React应用程序 –

npm start

步骤2：安装所需的依赖项

首先，打开您的代码在Visual Studio Code或任何其他IDE中。

运行以下命令，以便在您的React项目中将Netlify CLI包安装为开发依赖项。

npm install netlify-cli -g

这样用户就可以直接从终端部署React应用程序。(这不是必需的步骤)

步骤3: 创建一个Build目录

使用以下命令，我们现在将为我们的生产环境创建一个 build 。

npm run build

这将创建名为build的主目录。此Build文件夹包含我们部署应用程序所需的所有文件。现在，我们准备将此代码推送到我们的GitHub存储库。

步骤4：创建GitHub存储库

现在，您的本地系统上有一个react应用程序。打开您的GitHub帐户，并为您的项目创建一个新的存储库。将存储库命名为任何您想要的名称，例如”My project”。使用Git Bash将代码推送到存储库。为此，您需要对版本控制有很好的了解。

我们的项目已经上传到Github，现在我们将继续部署我们的项目：有各种开发平台，如Heruku，Vercel，Netlify，Github pages，Digital Ocean等。但是，最受欢迎且易于使用的平台之一是Netlify。在本文中，我们将使用Netlify部署我们的项目。

步骤5：设置Netlify

创建一个Netlify帐户（如果您还没有）。现在，将您的GitHub帐户与Netlify连接起来。授权Netlify使用GitHub来访问您的存储库。

按照以下步骤进行操作：

从Netlify网站的仪表板标题中转到“Sites”部分。
现在，点击“添加新站点”。
选择“导入现有项目”，这将带您转到一个页面，要求您连接Git提供程序。
选择您的Git提供程序，如果到目前为止我的东西与您相同，请选择GitHub。
这将带您转到一个页面，其中列出了您的GitHub存储库。
选择您的项目存储库。
现在，将会有一些设置，
a）不要更改预填的详细信息。
b）将Base Directory留空。
c）在构建命令中输入“npm run build”。
d）在发布目录中，输入“build”。
最后，点击部署站点。
它将重定向到部署页面，您可以在此处检查日志，并逐步查看工作情况。
如果部署由于某种原因失败，您将收到错误消息。删除错误并尝试重新部署。

到目前为止，react应用已部署完成。完成部署后，您将获得一个具有域名“netlify.com”的项目的公共URL。

步骤6：其他部署方式

使用GitHub存储库并不是在Netlify上部署React应用程序的唯一方式，还可以通过以下方式进行：

拖放方法
使用Netlify CLI（命令行界面）

拖放方法是部署React应用程序最简单的方法。你只需要在 第3步之后， 一旦你创建了一个构建目录，就将这个“ 构建 ”文件夹拖到Netlify的仪表板上，然后开始部署。

另一种方式是使用 Netlify CLI。 在执行 第2步 之后，转到你的工作目录并运行以下命令来部署应用程序。

netlify deploy

以下是将React应用程序部署到Netlify的所有方法。

结论

将项目部署后，它可以在网络上供其他用户使用。在Netlify上部署可以让开发人员更容易地将他们的React应用程序公开。通过将Netlify与GitHub连接，您可以配置设置并部署应用程序。只要部署完成，应用程序就会在网络上可用。Netlify具有持续开发环境，因此当应用程序有所更改并推送到GitHub时，更新应用程序变得更容易。因此，使用GitHub在Netlify上部署React应用程序实际上非常简单和直观。通过以上给出的步骤，任何人都可以轻松创建和发布React应用程序在Netlify上。