如何将React应用程序部署到DigitalOcean应用程序平台

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

注意： 本教程展示了如何使用 React 和 App Platform 部署静态资产和站点。如果您希望使用动态的后端代码部署 React 应用程序，请查看官方文档中的 App Platform React 示例。

介绍

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

在本教程中，您将使用免费的 Starter 层将 React 应用程序部署到 DigitalOcean 应用平台。您将使用 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 和创建本地开发环境中的步骤或使用 NodeSource PPA 使用 Apt 安装 Node.js [X207X ] 如何在 Ubuntu 20.04 上安装 Node.js 部分。
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，您的版本可能会略有不同：

OutputSuccess! 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 的输出：

OutputCompiled 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 https://github.com/your_name/digital-ocean-app.git

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

git branch -M main

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

git push -u origin main

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

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

OutputCounting 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 应用平台。您将 GitHub 存储库连接到 DigitalOcean，配置要构建的项目，并构建您的初始项目。项目上线后，每次更改都会触发新的构建和更新。

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

首先，登录您的 DigitalOcean 帐户并按 Create 按钮，然后选择 Apps：

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

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

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

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

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

按 Next 移动到 Configure your app 屏幕。

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

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

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

按 Next 移动到 Finalize 并启动 页面。

在这里您可以选择价格计划。免费的 Starter 层是为静态站点制作的，所以选择一个：

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

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

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

按 Live App 在浏览器中访问您的项目。它将与您在本地测试的项目相同，但这将通过安全 URL 在 Web 上进行：

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

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

结论

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

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