_ 作者选择了 Creative Commons以作为 Write for Donations计划的一部分接收捐款。

<$>[注] 注: 本教程展示了如何使用React和App平台部署静态资产和网站。如果您希望使用动态的后端代码部署React应用程序,请查看官方文档中的App Platform React样本(https://docs.digitalocean.com/products/app-platform/languages-frameworks/nodejs/react/)。

介绍

DigitalOcean的"App Platform"(https://www.digitalocean.com/products/app-platform/)是一个[Platform as a Service (PaaS)] (https://andsky.com/tech/tutorials/what-is-platform-as-a-service-paas)产品,可以让您从源寄存器配置和部署应用程序. 在配置了您的应用程序后, DigitalOcean 将会在每次更改上构建和部署应用程序,使您获得一个完整的网络服务器和配置最小的部署管道的好处. 这可以是一个快速高效的方式来部署您的React应用程序,如果使用React来构建一个没有后端的网站,可以使用[App平台的自由阶 (https://www.digitalocean.com/docs/app-platform/# plans-and-pricing).

在此教程中,您会使用免费Starter 级向 DigitalOcean App平台部署一个反应应用程序. 您将使用 [创建React App] (https://andsky.com/tech/tutorials/how-to-set-up-a-react-project-with-create-react-app) 构建一个应用程序,将代码推向 [GitHub] (https://github.com/) 寄存器,然后将应用程序配置为 DigitalOcean app. 你会把应用程序连接到你的源代码,并将项目部署为一组静态文件.

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

前提条件

• 联合国 在您的本地机上, 您需要运行 [Node.js] (https://nodejs.org/en/about/; 此教程在 Node.js 版本 10. 22.0 和 npm 版本 6. 14.6. 6 上进行了测试 。 要在 macOS 或 Ubuntu 20.04 上安装此功能,请遵循 [如何在 macOS (https://andsky.com/tech/tutorials/how-to-install-node-js-and-create-a-local-development-environment-on-macos) 上安装节点并创建本地开发环境(https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-20-04) 或使用节点源 PPA 部分的** Installing Node.js with Aptit us a node Source PPA** (如何在 Ubuntu 20.04 (https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-20-04))中的步骤。
• 安装在您的本地机器上。 您可以跟随教程 [Controduction to Open source: Got started with Git] (https://andsky.com/tech/tutorials/contributing-to-open-source-getting-started-with-git) 在您的计算机上安装和设置 Git 。
• [数字海洋] (https://digitalocean.com)账户。
• 联合国 在 GitHub 上的一个账户,您可以通过去 [ 创建您的账户** 页] (https://github.com/join) 创建该账户。
• 联合国 您还需要JavaScript, HTML, CSS的基本知识, 您可以在 [How To Build a website With HTML series] (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html), [How To Build a website With CSS series] (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css), 以及 [How To Code in JavaScript] (https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript) 中找到这些知识. .

步骤1 - 创建一个反应项目

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

首先,在本地机器上使用Create React App创建一个新应用程序,在终端中运行命令,以构建一个名为数字海洋应用程序的应用程序:

1npx create-react-app digital-ocean-app

)包,而不会下载到您的计算机上。 )。

代码将下载依赖性,并创建一个基础项目。 完成程序可能需要几分钟。 完成后,您将收到成功消息。 如果您使用 yarn而不是 npm,您的版本可能会略有不同:

 1[secondary_label Output]
 2Success! Created digital-ocean-app at your_file_path/digital-ocean-app
 3Inside that directory, you can run several commands:
 4
 5  npm start
 6    Starts the development server.
 7
 8  npm build
 9    Bundles the app into static files for production.
10
11  npm test
12    Starts the test runner.
13
14  npm eject
15    Removes this tool and copies build dependencies, configuration files
16    and scripts into the app directory. If you do this, you can’t go back!
17
18We suggest that you begin by typing:
19
20  cd digital-ocean-app
21  npm start
22
23Happy hacking!

现在你有一个基础项目,运行本地,这样你就可以测试该项目将如何出现在服务器上。

1cd digital-ocean-app

使用npm start脚本运行项目:

1npm start

当命令运行时,您将收到本地开发服务器的 URL 输出:

 1[secondary_label Output]
 2Compiled successfully!
 3
 4You can now view digital-ocean-app in the browser.
 5
 6  Local:            http://localhost:3000
 7  On Your Network:  http://192.168.1.110:3000
 8
 9Note that the development build is not optimized.
10To 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 . 您可以使存储库私有或公共:

创建 React 应用程序会自动启动你的项目使用 git,这样你就可以设置直接将代码推到 GitHub. 首先,用以下命令添加你想要使用的存储库:

1git remote add origin https://github.com/your_name/digital-ocean-app.git

接下来,声明您希望按下主要分支:

1git branch -M main

最后,将代码推到您的存储库:

1git push -u origin main

当被要求推你的代码时,输入你的GitHub凭证。

当您按下代码时,您将收到成功消息. 您的消息将略有不同:

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

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

在此步骤中,您将您的项目推向GitHub,以便您可以使用DigitalOcean Apps访问它。

第3步:部署到DigitalOcean应用平台

在此步骤中,您将部署一个 React 应用程序到 DigitalOcean App Platform. 您将连接您的 GitHub 存储库到 DigitalOcean,配置要构建的项目,并构建您的初始项目。

到此步骤结束时,您将能够在DigitalOcean上部署具有连续交付的应用程序。

首先,您可以登录您的 DigitalOcean 帐户,然后按下 Create 按钮,然后选择** Apps** :

如果你还没有连接它,你需要使用你的用户名和密码登录,并授权DigitalOcean访问你的库:

在 GitHub 授权屏幕上连接你的帐户后,选择你想要连接的存储库. 在这种情况下,你正在使用 digital-ocean-app 存储库,但如果你想:

选择存储库后,您将重新连接到DigitalOcean接口. 从存储库列表中选择 digital-ocean-app ,然后按** Next** 。

在此示例中,服务器将位于北美,在 区域 字段中选择 ** 纽约** ,部署分支将是** main** . 对于您的应用程序,选择最接近您的物理位置的区域:

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

点击 下一步 以继续到** 设置您的应用程序** 屏幕。

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

注意: Create React App 不是像 [Gatsby] 这样的静态网站生成器(https://www.gatsbyjs.com/),但你正在使用静态资产,因为服务器不需要运行任何服务器侧代码,如 Ruby或 PHP. 应用程序将使用节点来运行安装和构建步骤,但不会在免费层执行应用程序代码。

您还可以选择使用自定义构建脚本,但在这种情况下,您可以遵守默认的)或生产环境,您可能想要创建自定义构建脚本:

点击 下一步 继续到** 完成和启动** 页面。

在这里你可以选择价格计划. 免费的 Starter 层是为静态网站,所以选择一个:

点击启动启动应用程序按钮,DigitalOcean将开始构建您的应用程序。

该应用程序将在您的 repo 中运行npm ci和npm build脚本. 这将下载所有依赖性,并创建build目录,其中包含您的所有JavaScript,HTML文件和其他资产的编译和缩小版本。

构建运行需要几分钟,但完成后,您将收到一个成功消息和链接到您的新网站。

在浏览器中点击 Live App 来访问您的项目. 它将与您本地测试的项目相同,但它将以安全的 URL 在网络上进行实时测试:

现在您的项目已配置,每次您对链接的存储库进行更改时,您将运行一个新的构建。在这种情况下,如果您将更改推到 main 分支,DigitalOcean 将自动运行一个新的部署。

在此步骤中,您在 App 平台上创建了一个新的 DigitalOcean 应用程序. 您连接了您的 GitHub 帐户并配置了该应用程序以构建 main 分支。

结论

DigitalOcean的应用平台为您提供了快速部署应用程序的工具. 有了小小的初始设置,您的应用程序将在每次更改后自动部署。

此类项目的下一个可能的步骤是更改应用程序的域名. 要做到这一点,请查看 应用程序平台的官方文档。