简介
部署是将我们的代码从源码控制系统转移到托管平台的过程，在那里它被存储，并可以作为一个应用程序提供给最终用户。通常情况下，这是在云端或本地服务器上完成的。
在Netlify这样的云平台出现之前，托管只由托管供应商完成，他们要求在你每次做出改变时重新上传所有的静态资产（运行npm run build 后生成的构建文件）。这种上传是通过FTP软件或像cPanel这样的虚拟主机管理系统完成的，这可能是非常大的压力和技术。
Netlify就是为了解决这个问题!它为你提供了三种简单的方法来部署应用程序--拖放界面、项目导入界面和命令行界面（CLI）。尽管所有这些方法都很简单，但每一种方法都是为不同的使用情况量身定做的。
在本指南中，我们将看看如何将React应用部署到Netlify，并介绍每种部署React应用的方式的利弊。之后，我们将快速解释如何处理Netlify中的404页面未找到的错误。
为什么使用Netlify？
Netlify是一个云主机供应商，它为静态网站提供无服务器的后端服务。它旨在最大限度地提高生产力，使开发人员（特别是面向前端的）和工程师能够快速构建、测试和部署网站/应用程序。
它的工作方式是连接到你的GitHub仓库，从那里获取源代码。之后，它将运行一个构建过程，将我们的网站/应用程序的页面预先渲染成静态文件。
有很多理由支持使用Netlify，这里只是其中的几个。
- Netlify的成本较低--从长远来看，创建和托管一个静态网站将为您节省资金。Netlify通过全球分布和自动预渲染，大大提升了网站速度。
- Netlify让网站的部署变得异常简单--事实上，最简单的方法是使用GitHub、GitLab或Bitbucket来设置持续部署。
- Netlify通过其内置的DNS管理方案使网站的启动变得超级简单。
- 我们可以很容易地只部署Git项目的一个特定分支--这对于测试可能或不可能进入主/主分支的新功能，或者快速确定一个PR将如何影响你的网站是很有用的。
- Netlify允许你预览你所做的或想做的任何部署--这让你和你的团队可以看到在生产中的变化，而不必在现有的网站上部署它们。
- Netlify提供了一个方便的表格提交功能，使我们能够收集用户的信息。
开始使用
在本指南中，我们将部署一个 色调和阴影的应用到Netlify。它是一个简单的React应用，从values.js包中提取色调和阴影。
在开始之前，我们先来看看使用Netlify的一些先决条件。
将你的代码推送到GitHub
在向Netlify部署我们的应用程序之前，我们必须首先将我们的项目推送到任何一个Git提供者。在本指南中，我们将使用终端来推送我们的React应用程序到GitHub。
但让我们先创建一个GitHub仓库。然后确保填写必要的信息并点击创建仓库。
回到终端，让我们先把所有的文件暂存，这样我们就可以把它们提交到仓库，然后用以下命令创建一个新的分支main 。
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
一旦完成这些，我们就可以用下面的命令推送到创建的远程版本库。
$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main
当我们刷新版本库的时候，我们的代码应该出现了!继续，有三种主要的方法来进行Netlify的部署。让我们看看所有的方法并在最后进行比较。
将应用程序部署到Netlify
Netlify提供了一个免费计划，允许我们创建一个账户或使用登录页面上列出的任何一个选项登录（如下图所示）。
登录后，我们将被带到Netlify的仪表板，在那里我们将使用拖放方法和项目导入方法来部署我们的应用程序到Netlify。
使用拖放方式将应用程序部署到Netlify
我们将通过运行下面的命令来创建我们的应用程序的构建。
$ npm run build
一旦成功完成，我们的构建文件夹将被创建，它将包含所有生产就绪的文件（这些是我们将使用拖放方法上传到Netlify的文件）。
**注意：**这只对HTML、CSS和JS等静态文件有效。这就是为什么我们必须首先建立我们的项目，以便它可以生成我们的静态文件。
在我们的Netlify概述页面上点击**"添加新网站**" >"手动部署"。这将带我们到我们要放置静态文件的页面。只要我们登录了，我们也可以在这里访问投放页面。
下一步是将生成的构建文件夹放入，这样它就会立即被部署到一个实时的URL，如下图所示。
使用Netlify的CLI将应用程序部署到Netlify
Netlify的命令行界面（CLI）允许我们直接从命令行部署我们的应用程序，以及配置持续部署，这样当我们推送提交到我们连接的Git仓库时，Netlify会自动部署我们网站的新版本。
第一步是使用下面的命令来安装CLI。
$ npm install netlify-cli -g
这个命令将在全球范围内安装Netlify。如果你想在本地安装Netlify CLI，在我们项目的根目录下运行以下命令。
$ npm install netlify-cli --save-dev
**注意：**一旦安装成功，我们可以在终端运行netlify ，查看所有Netlify命令的列表和它们的作用。
使用Netlify CLI部署我们的React应用的第一步是通过命令行认证并获得一个访问令牌，在任何目录下运行以下命令。
$ netlify login
这将打开一个浏览器标签，以认证我们并授予我们对Netlify CLI的访问权。
一旦成功，我们现在可以使用deploy 命令来部署我们的应用程序。
$ netlify deploy
这将提示一些关于设置的问题。
由于我们已经在GitHub上托管了我们的react应用，那么我们只需要*"将这个目录链接到一个现有的网站"*。现在会出现下一个问题。
这个文件夹将被链接到我们推送代码的GitHub仓库，只要它被添加为远程来源，就会自动出现。之后，我们的网站将被创建并部署到一个草拟的URL，我们可以通过复制和粘贴URL到浏览器来查看。
根据我们的控制台，*"如果你的草案URL上的一切看起来都很好，就用--prod 标志将其部署到你的主网站URL上"。*这使我们能够预览我们所做的任何部署，以便我们和我们的团队能够看到变化在生产中的样子，而不必在我们现有的网站上部署它们。
因此，为了使我们的应用程序上线，我们将执行以下命令。
$ netlify deploy --prod
一旦成功完成，我们将得到两个重要的URL：唯一的部署URL（代表每个单独部署的唯一URL）和实时URL（它总是显示你的最新部署）。
因此，每次我们更新和部署我们的网站时，我们将得到该部署的唯一URL。从本质上讲，如果我们多次部署，我们将有多个独特的URL，你可以用来引导用户到你的应用程序的一个特定版本。然而，实时URL总是在同一个URL上显示我们最新的变化。
将项目导入到Netlify仪表板
到目前为止，我们已经看到了如何通过拖放以及Netlify CLI来部署一个React应用程序。如果我们不想使用CLI，我们可以通过手动将项目从你的Git提供者导入到我们的Netlify页面来完成一切。这也可以执行类似于Netlify CLI的功能。
第一步是访问我们的Netlify团队页面，然后点击**"Add new site**" >"Import an existing project"，如下图所示。
之后，它将把我们带到一个页面，我们可以选择你的网站/应用程序的源代码所在的Git提供商。在我们的例子中，我们选择了GitHub。现在我们可以在授权后搜索GitHub的仓库了。
一旦我们确定了项目，我们现在就可以处理部署。这将带我们到一个页面，在那里我们可以指定我们要部署的分支，例如，如果我们正在测试一个特定的版本。这个页面还允许我们指定构建命令和构建文件的位置（这是Netlify自动处理的，除非我们想改变它）。当我们完成后，我们会点击 ***"部署网站"***按钮。
当我们的部署成功后，我们应该得到一个Live URL。我们还可以在设置概览页面上调整设置，如域名设置、查看部署日志等。
对比部署选项
前三种方法都能帮助我们进行部署，但后两种方法有助于其他功能，如持续部署、部署特定的分支、处理测试等等。
当你想快速部署构建文件而不需要将代码推送到任何Git提供者时，拖放界面很有用。Netlify CLI和Dashboard在引擎盖下执行相同的功能。Netlify CLI通过一个干净的终端接受所有的命令，所以你不必处理不必要的导航，并且可以期望它比网页的变化更少。
选择最好的是一个开发人员的个人偏好问题，许多人喜欢CLI，因为所需的开销较低--你可以从IDE中使用它，它是干净和简洁的，并且不会随着时间的推移而改变。
处理 "未找到 "错误
如果我们使用一个路由器，比如React Router，我们就需要为我们的URL配置重定向和重写规则。因为当我们点击任何导航项来改变页面（路由）并刷新浏览器时，我们会得到一个404错误页面。
因此，Netlify使得为我们的URL配置重定向和重写规则变得非常容易。我们需要在我们应用程序的构建文件夹中添加一个名为_redirects 的文件，为了让这个文件自动发生，我们会把它放在public 文件夹中。该文件中必须包含以下重写规则。
/* /index.html 200
无论浏览器请求什么URL，这个重写规则都会为index.html文件服务，而不是返回404。因此，为了在实时URL中看到最新的变化，我们必须使用任何一种首选方法进行重新部署。在改变路线并刷新应用程序后，我们将不再看到404错误页面。
结论
部署是将我们的代码从源码控制系统转移到托管平台的过程，在那里它被存储，并可以作为一个应用程序提供给最终用户。通常情况下，这是在云端或本地服务器上完成的。
在Netlify这样的云平台出现之前，托管只由托管供应商完成，他们要求在你每次做出改变时重新上传所有的静态资产（运行npm run build 后生成的构建文件）。这种上传是通过FTP软件或像cPanel这样的虚拟主机管理系统完成的，这可能是非常大的压力和技术。
在本指南中，我们已经看到了如何通过三种方式轻松地将React应用部署到Netlify--通过拖放界面、Netlify CLI和Netlify仪表板。我们还学习了如何修复当你的React应用使用路由器时出现的404错误。
