作者选择Creative Commons接受捐赠，作为Write for DOnations计划的一部分。

介绍

DigitalOcean 的应用程序平台是一种平台即服务 (PaaS)产品，可让您从源存储库配置和部署应用程序。配置您的应用程序后，DigitalOcean 将在每次更改时构建和部署应用程序，从而以最少的配置为您提供完整的 Web 服务器和部署管道的好处。这是部署React应用程序的一种快速有效的方式，如果您使用 React 构建没有后端的站点，则可以使用App Platform 的免费层。

在本教程中，您将使用免费的Starter层将 React 应用程序部署到 DigitalOcean App Platform 。您将使用Create React App构建一个应用程序，将代码推送到GitHub存储库，然后将该应用程序配置为 DigitalOcean 应用程序。您将应用程序连接到您的源代码并将项目部署为一组静态文件。

在本教程结束时，您将能够配置一个 React 应用程序，以便在每次推送到 GitHub 存储库的主分支时自动部署。

先决条件

• 在你的本地机器上，你需要一个运行Node.js的开发环境；本教程在 Node.js 版本 10.22.0 和 npm 版本 6.14.6 上进行了测试。要在 macOS 或 Ubuntu 20.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境或如何在 Ubuntu 20.04 上安装 Node.js 的使用 PPA 安装部分中的步骤进行操作。

• Git安装在您的本地机器上。您可以按照教程贡献开源：Git 入门在您的计算机上安装和设置 Git。

• 一个DigitalOcean帐户。

• GitHub 上的一个帐户，您可以通过转到创建您的帐户页面来创建该帐户。

• 您还需要具备 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 系列构建网站、如何使用 CSS 系列构建网站和如何使用 JavaScript 编码中找到这些知识。

第 1 步——创建一个 React 项目

在这一步中，您将使用 Create React App 创建一个 React 应用程序并构建它的可部署版本。

首先，在本地机器上使用 Create React App 创建一个新应用程序。在终端中，运行命令来构建一个名为 的应用程序digital-ocean-app：

npx create-react-app digital-ocean-app

该npx命令将运行Node包，而无需将其下载到您的机器上。该create-react-app脚本将安装所有依赖项，并将在该digital-ocean-app目录中构建一个基础项目。有关 Create React App 的更多信息，请查看教程如何使用 Create React App 设置 React 项目。

该代码将下载依赖项并创建一个基础项目。可能需要几分钟才能完成。完成后，您将收到一条成功消息。如果您使用yarn代替，您的版本可能会略有不同npm：

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

现在您有了一个基础项目，在本地运行它，这样您就可以测试该项目在服务器上的显示方式。首先，切换到目录：

cd digital-ocean-app

使用npm start脚本运行项目：

npm start

当命令运行时，您将收到带有本地开发服务器 URL 的输出：

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

打开浏览器http://localhost:3000，您将找到您的项目：

通过在终端中键入CTRL+C或来停止项目⌘+C。

现在您有一个可用的 React 应用程序，您可以将代码推送到 GitHub 存储库。

第 2 步 – 将代码推送到 GitHub

为了部署您的应用程序，App Platform 从托管代码存储库中检索您的源代码。在此步骤中，您会将 React 应用程序代码推送到 GitHub 存储库，以便 App Platform 稍后可以访问它。

登录到您的 GitHub 帐户。登录后，创建一个名为digital-ocean-app的新存储库。您可以将存储库设为私有或公共：

Create React App 会自动使用 git 初始化您的项目，因此您可以设置为将代码直接推送到 GitHub。首先，使用以下命令添加您要使用的存储库：

git remote add origin [email protected]:your_name/digital-ocean-app.git

接下来，声明您要main使用以下内容推送到分支：

git branch -M main

最后，将代码推送到您的存储库：

git push -u origin main

当提示推送您的代码时，输​​入您的 GitHub 凭据。

当您推送代码时，您将收到一条成功消息。您的信息会略有不同：

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

您现在已将代码复制到 GitHub 存储库。

在此步骤中，您将项目推送到 GitHub，以便您可以使用 DigitalOcean Apps 访问它。接下来，您将使用您的项目创建一个新的 DigitalOcean 应用程序并设置自动部署。

第 3 步 – 部署到 DigitalOcean 应用程序平台

在此步骤中，您将把 React 应用程序部署到 DigitalOcean App Platform。您将您的 GitHub 存储库连接到 DigitalOcean，配置要构建的项目，并构建您的初始项目。项目上线后，每次更改都会触发新的构建和更新。

在此步骤结束时，您将能够在 DigitalOcean 上部署持续交付的应用程序。

首先，登录到您的 DigitalOcean 帐户并按“创建”按钮，然后选择“应用程序”：

接下来将提示您链接 GitHub 存储库。如果您还没有连接它，您需要使用您的用户名和密码登录并授权 DigitalOcean 访问您的存储库：

链接您的帐户后，在 GitHub 授权屏幕上选择您要连接的存储库。在这种情况下，您使用的是digital-ocean-app存储库，但如果您愿意，可以连接更多存储库：

选择存储库后，您将重新连接到 DigitalOcean 界面。从存储库列表中选择digital-ocean-app，然后按Next。这会将您的应用程序直接连接到 GitHub 存储库：

现在您已经选择了您的存储库，您需要配置 DigitalOcean 应用程序。在此示例中，通过在Region字段中选择New York，服务器将位于北美，并且部署分支将为main。对于您的应用，选择离您的实际位置最近的区域：

在本教程中，您将检查Autodeploy 代码更改。这将在您每次更新代码时自动重建您的应用程序。

按Next移至“配置您的应用程序”屏幕。

接下来，选择您将运行的应用程序类型。由于 React 将构建静态资产，因此从类型字段的下拉菜单中选择静态站点。

注意： Create React App 不是像Gatsby那样的静态站点生成器，但您使用的是静态资产，因为服务器不需要运行任何服务器端代码，例如Ruby或PHP。该应用程序将使用 Node 来运行安装和构建步骤，但不会在免费层执行应用程序代码。

您还可以选择使用自定义构建脚本。但在这种情况下，您可以坚持使用默认npm run build命令。如果您有用于质量保证 (QA) 或生产环境的不同构建脚本，您可能需要创建自定义构建脚本：

按Next进入Finalize and launch页面。

您可以在此处选择价格计划。免费的Starter层是为静态站点设计的，所以选择一个：

按Launch Starter App按钮，DigitalOcean 将开始构建您的应用程序。

该应用程序将运行您的存储库中的npm ci和npm build脚本。这将下载所有依赖项并创建build包含所有 JavaScript、HTML 文件和其他资产的编译和缩小版本的目录。您还可以在应用程序平台上的应用程序的组件选项卡中创建自定义脚本package.json并更新命令。

构建运行需要几分钟时间，但完成后，您将收到一条成功消息和一个指向新站点的链接。您的链接将有一个唯一的名称，并且会略有不同：

按Live App在浏览器中访问您的项目。它将与您在本地测试的项目相同，但这将在网络上使用安全 URL：

现在您的项目已配置，任何时候您对链接的存储库进行更改时，您都会运行一个新的构建。在这种情况下，如果您将更改推送到主分支，DigitalOcean 将自动运行新的部署。无需登录；只要您推动更改，它就会运行：

在此步骤中，您在 App Platform 上创建了一个新的 DigitalOcean 应用程序。您已连接 GitHub 帐户并配置应用程序以构建主分支。配置应用程序后，您了解到应用程序将在每次更改后部署一个新版本。

结论

DigitalOcean 的应用程序平台为您提供了一个用于部署应用程序的快速工具。通过小的初始设置，您的应用程序将在每次更改后自动部署。这可以与 React 结合使用，以快速启动和运行您的 Web 应用程序。

此类项目的下一步可能是更改应用程序的域名。为此，请查看App Platform的官方文档。