如何在 Netlify 上部署简单的前端无服务器(静态)React 应用程序

Netlify 是一个强大的无服务器(静态)网站托管平台，可以方便地在云上托管 Web 应用程序，包括静态文件，Functions，Serverless 架构等。本文以 React 应用程序为例，介绍如何在 Netlify 上部署简单的前端无服务器(静态)React 应用程序。

前置要求

在开始之前，确保您已经具备以下先决条件：

• 拥有一个 Netlify 账号。
• 本地已经安装了 Node.js 环境。
• 已经创建了一个 React 应用程序。
• 本地已经安装了 Git 工具。

如果您还没有完成以上先决条件，请按照它们的指示进行操作。

步骤

在这个过程中，我们将会完成以下四个步骤：

1. 创建 GitHub 仓库，将 React 项目上传到 GitHub。
2. 创建 Netlify 应用程序。
3. 设置 Netlify 应用程序实例。
4. 部署应用程序。

步骤一：创建 GitHub 仓库，将 React 项目上传到 GitHub。

在本地创建一个新的 Git 仓库。

$ git init

将你的 React 项目中的所有文件都添加到仓库中。

$ git add .

提交这些文件。

$ git commit -m "first commit"

在 GitHub 上创建新的仓库，将其命名为 React 应用程序的名称，然后将本地 Git 仓库推送到远程仓库。

$ git remote add origin https://github.com/your-username/your-repo-name.git
$ git push -u origin master

步骤二：创建 Netlify 应用程序。

在 Netlify 上创建一个新的应用程序。

1. 进入 Netlify 官网，并登录。
2. 点击右上角 New Site from Git 按钮。
3. 在列表中选择你推送到 GitHub 上的仓库。
4. 授权 Netlify 访问你的 GitHub 仓库。

步骤三：设置 Netlify 应用程序实例。

在 Netlify 应用程序的实例中设置如何编译和运行项目。

1. 进入 Netlify 网站，选择你的应用程序。
2. 在左侧导航栏中，点击 Settings 按钮。
3. 选择 Build & Deploy 选项卡。
4. 在 Build Command 下拉菜单中选择 npm run build。
5. 在 Publish Directory 下拉菜单中输入 build。

步骤四：部署应用程序。

最后一步，在 Netlify 上托管 React 应用程序。

1. 在 Netlify 网站中选择您的应用程序。
2. 在左侧导航栏中，点击 Deploys 按钮。
3. 在其中添加或者更新一个 Deploy。

现在，您的 React 应用程序已经成功的部署到 Netlify 上了！

总结

通过本文，您已经学会了如何在 Netlify 上部署简单的前端无服务器(静态)React 应用程序。尝试使用 Netlify 托管你自己的 React 应用程序吧！