将 React 应用程序部署到 Netlify

创建一个新的 React 应用

部署时间到！

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

大家好👋，在本文中，我们将探讨使用 Netlify 托管和部署 React 应用程序的两种不同方法。

第一种方法只需不到一分钟，简直不可思议。第二种方法，包括通过 GitHub 对我们的应用程序进行持续部署和更新，也只需几分钟即可设置完成🤠。太棒了！是不是很激动？我也是😀，让我们马上开始吧👇。

要学习本教程，您需要拥有Github和Netlify帐户。如果您还没有帐户，请访问他们的网站创建一个。

完成这些之后，我们将创建一个新的 React 应用，这样你就可以全程跟随我们的步骤操作了
。

创建一个新的 React 应用

在桌面或你选择的任何目录中创建一个新的空文件夹，并给它起个名字。我打算把它
叫做react_app……很好。

在你的 VS Code 或任何你选择的编辑器中打开它。

接下来，我们需要打开一个终端。您可以使用操作系统默认的终端、Git bash，或者 VS Code 内置的集成终端。

导航到您的应用程序所在的目录。我的应用程序位于：

cd desktop/react_app

如果您使用的是集成的 VS Code 终端，则无需执行此操作😏。

从这里，您只需运行以下命令即可初始化您的 React 应用。

npx create-react-app (Name_Of_App)

其中(Name_Of_App)，你想给你的 React 应用起什么名字。

这可能需要一些时间。所以，趁它在你的设备上运行的时候，你可以去给自己泡杯热茶☕😊。

太棒了！完成后，你的代码编辑器中的文件夹结构应该与此类似。

跑步

npm start

启动应用程序并在浏览器中预览。您应该会看到类似这样的界面。

太棒了！🎉🎇 我们成功创建了一个 React 演示应用。

部署前，您可以进入src文件夹并编辑App.js文件，进行一些自定义设置。

类似这样的。

function App() {
return (
<div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>This is my first Deployment 😊🎉</p>
    </header>
</div>
);
}

保存后，现在你应该能在浏览器中看到修改后的版本了。

太好了！现在让我们聚焦本文的主要目标：向您展示如何将我们的应用程序从localhost port 3000
只有我们自己才能看到的地方搬到互联网上，这样您就可以与朋友、雇主以及任何人分享它。

部署时间到！

手动部署

我们将尝试部署 React 应用的第一种方法，也是最简单的方法。但你需要一个
Netlify
账户。所以，如果你 已经有账户，请注册或登录。

登录后，滚动到页面底部，你会看到一个空白框，我们可以将网站文件夹拖放到这里。

在开始之前，首先，Ctrl C在终端中输入命令停止 React 服务器。
接下来，我们需要启动buildReact 应用。只需运行以下命令即可。

npm run build

这将创建一个built浏览器可以原生支持的 React 版本，我们可以将其自由部署到 Web 上。点击
此处了解更多信息。

完成后，您应该能build在文件夹结构中看到该文件夹​​。

如果你使用的是 Mac，请在 Finder 中打开你的 React 应用；如果你使用的是 Windows，请在文件资源管理器中打开你的 React 应用。

接下来，将构建文件夹拖放到 Netlify 页面上的空白框中。就这么简单。几秒钟后，应用程序应该就会部署到网络上了！🎉 现在我们有了一个
可以分享给其他人访问网站的真实 URL 😊。就是这样，这个过程适用于任何前端 React 应用程序。就是这么简单。

自动化部署

我们当前部署版本的一个主要问题是：如果我们对源代码进行更改，这些更改不会反映在已部署的版本中。

这很合理，因为请记住，这个build文件夹里存放着我们应用的版本，也就是可以通过网页浏览器访问的版本。而且我们已经手动将它推送到了 Netlify，所以对代码所做的更改不会反映在buildNetlify 上的文件夹中，除非我们build再次手动部署我们的应用👀。

如你所见，这个过程是不可能的😞🤦‍♂️。

🤔 那么，我们如何部署应用程序，才能确保每次向 Github 推送代码时，所有对代码所做的更改都能反映在已部署的站点上呢？

为此，我们需要将项目添加到 GitHub 仓库。请访问GitHub并为您的应用创建一个新的空仓库。请按照GitHub 文档中的指南，了解如何将您的应用连接到 GitHub 上的远程仓库。

将仓库连接到应用程序后，运行

git push -u origin main

在终端上将代码推送到 GitHub。

我们可以返回 Netlify。滚动到顶部，然后点击“从 Git 创建新站点”按钮。

您将被要求选择托管网站源代码的 Git 提供商。当您向
Git 推送代码时。

然后，您可以在所有 GitHub 仓库中搜索您想要部署的特定仓库，然后
点击它。

点击“部署”按钮。

恭喜！您的应用已正式上线！🎉

证明我们的部署是自动化的

现在，每当您向 GitHub 推送代码时，Netlify 都会自动build为我们更新应用并更新
已部署的版本。

为了验证这一点，我们将对App.js文件进行一些简单的修改，只修改一些文本。看看
当我们把修改推送到 GitHub 后，这些修改是否真的会反映在网站上。

function App() {
return (
<div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p> SECOND DEPLOYMENT: BREAKING CHANGES 😊🎉</p>
    </header>
</div>
);
}

export default App;

修改完成后，提交并将代码推送到Github。

很快您就会在 Netlify 网站上看到更改生效。

欢呼！

结论

好了，各位。我们现在有了一个已部署的 React 应用版本，每当我们
向 Github 推送更改时，它都会更新。

非常感谢您的阅读。希望您下次部署 React
应用时不会再遇到任何问题😅。

请在评论区告诉我你一直在使用哪家免费起重服务，也许我会写
篇文章介绍一下。

你还在等什么？🤷‍♂️赶紧把你的 React 应用部署到 Netlify 上吧！

希望这篇文章对你有帮助，非常感谢你的阅读！！💖 继续加油，编程吧！👨‍💻