全栈身份验证和托管（Nodejs、Reactjs、Heroku、Netlify）

介绍

Node.js 简介

使用Node.js构建后端

React-Bootstrap 简介

使用 React 构建前端

应用程序托管

获取所有资源并查看预览

结论

介绍

本文是我过去撰写的一系列关于身份验证文章的合集。作为一名全栈工程师，我致力于通过创作此类内容来弥合前端和后端工程师之间的鸿沟。本合集专为零基础读者编写，您可以随意跳转到各个章节。

跳转至

• Node.js 简介
• 使用Node.js构建后端
• React-Bootstrap 简介
• 使用 React 构建前端
• 应用程序托管
• 获取所有资源并查看预览
• 结论

Node.js 简介

本部分将向您介绍 Node.js 并演示如何创建服务器。标题为：搭建一个简单、安全且健壮的 Node.js 服务器。阅读全文

使用Node.js构建后端

本部分内容介绍了如何使用 Node.js 构建身份验证后端。

1. 使用 Node.js 和 MongoDB 进行身份验证 - 第一部分

2. 使用 Node.js 和 MongoDB 进行身份验证 - 第 2 部分

3. 使用 Node.js 和 MongoDB 进行身份验证 - 第 3 部分

4. 使用 Node.js 和 MongoDB 进行身份验证 - 第 4 部分

5. 在 Heroku 上托管 Nodejs 和 MongoDB 应用

React-Bootstrap 简介

本节将向您介绍 React Bootstrap，以免您对接下来要编写的代码感到困惑。React-Bootstrap 可以帮助我们用更少的代码更快地构建应用程序。点击此处阅读全文。

使用 React 构建前端

在这里，我们使用后端构建的 API 端点。我们还会保护需要身份验证的路由。请参阅以下教程：

1. React 身份验证 - 注册

2. React 身份验证 - 登录

3. React身份验证 - 保护和访问路由/端点

应用程序托管

这部分没有专门的教程，因为我以为网上已经有很多相关的教程了。我会把它作为额外内容添加到这个合集中。有很多主机网站提供免费主机服务，例如 Vercel、Netlify 和 Heroku。本教程将使用 Netlify。操作步骤很简单，跟着做就行了。

• 请访问https://app.netlify.com/signup并注册。

• 按照流程操作，直到进入您的仪表板。

• 向下滚动一点，你就会看到这个屏幕。

• 您可以将项目文件夹拖入框中，即可完成托管；或者，您可以将其连接到您的 Git 仓库。连接到 Git 的优势在于可以实现持续部署。如果您将来需要对应用程序进行更改，则无需再次执行这些步骤。

• 所以，点击按钮New Site from Git

• 选择你想要的 Git 平台，并授予其将其同步到你的 Netlify 应用的权限。

• 选择要同步的存储库

• 点击Deploy Site您被重定向到的页面上的按钮。

• 请等待您的网站发布。这应该只需要不到 2 分钟。现在您可以点击看到的链接访问您的网站了。

请注意页面顶部显示的网站网址。这是 Netlify 随机分配给您的网址。

• 你可以点击按钮进行更改Site Settings。

• 在该Site details部分中，点击change site name按钮

• 更改名称并点击Save

请注意，网站名称已更改。请看我下面的网站名称：

您在托管后可能会遇到重定向到另一个页面的问题。错误信息可能如下图所示：

解决问题

• 进入 React 项目的 public 文件夹

• 创建一个文件并命名为_redirects

• 请输入以下内容
  

    /*  /index.html 200

• 保存并推送回托管应用程序的 Git 平台。

• 请稍等片刻，您的应用将自动发布，发布完成后应该就一切顺利了。

错误已消失。

恭喜！！！你现在是一名全栈工程师了……

获取所有资源并查看预览

1. a. Node.js 代码在这里
   。b.后端已上线。

2. a. Reactjs 代码在这里
   。b.前端页面在这里。

结论

本教程讲解了如何使用 JavaScript （后端使用 Node.js，前端使用 React.js）构建一个完整的身份验证系统。我们还学习了如何在 Netlify 上托管应用程序以及如何解决重定向问题。

我会鼓励你们开始开发能够解决实际问题的应用程序。如果你们已经开始了，那就请不要停下来。现在没有什么能阻止你们了。