在 DigitalOcean 应用平台上构建和部署带自定义域名的应用

教程
DNS

介绍

作为开发人员，我们经常会在业余时间开发项目，无论是出于兴趣还是为了学习新知识。这些项目也是我们技能的证明。

您应该有工作证明。除了您的代码外，用户应该能够使用您的应用程序，为此，它不应只存在于localhost:3000，而应通过链接访问。为了实现这一点，您需要部署您的应用程序并将其映射到自定义域名，以便更易于阅读和共享。

在本文中，您将了解到DigitalOcean 应用平台，并看到从部署应用程序到将其映射到自定义域名只需点击几下有多么简单。

先决条件

  1. 一个 DigitalOcean 账户 以访问应用平台。

  2. 一个 GitHub 账户。

  3. 在 NameCheap 或类似平台上可用的自定义域名。

什么是 DigitalOcean 应用平台？

应用平台 是一个完全托管的平台即服务（PaaS），帮助开发者轻松构建、部署和扩展应用程序。它抽象了大量基础设施管理，让你可以专注于代码和部署。

它可以自动分析和构建来自GitHub和GitLab等git提供商的代码，并将您的应用程序发布到云端。它还可以使用您已上传到DigitalOcean容器注册表或Docker Hub的容器镜像进行发布。

借助诸如DDoS防护、自动OS打补丁、垂直扩展、HTTP支持、全球CDN和域名支持等功能，App平台使发布和管理您的应用程序变得简单。

步骤1 – 使用App平台部署

一旦应用程序准备就绪，您可以从单体仓库、容器镜像或使用GitHub Actions进行部署。

单体仓库是一个版本控制的代码仓库，其中包含许多项目。虽然这些项目可能相关，但它们通常在逻辑上是独立的，并由不同团队运行。

让我们看看如何使用App平台和GitHub部署应用程序。假设您有一个私人GitHub存储库，其中包含一个包含简单的Hello World代码的index.html文件：

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

使用GitHub部署

  • 转到应用程序页面，然后单击“创建应用程序”

  • 连接您的GitHub帐户，然后选择包含源代码的GitHub存储库。

  • 在源目录字段中，指定包含源代码的文件夹，如下图所示。由于我们的演示库仅包含根目录中的index.html文件，我们将继续使用默认的/。如果您的代码遵循单体库结构，请确保选择代码所在的特定目录。

选择自动部署，这将在您推送新更改时自动重新部署：

  • 为您的应用程序配置资源，然后单击下一步。您将看到以下内容：

  • 接下来，它将经过一些检查，然后最终部署该应用程序。对于使用API的更复杂应用程序，您可能需要添加环境变量，在接下来的页面中，您可以配置这些环境变量。

  • 在下一步中，您可以编辑应用程序的名称并选择部署应用程序的资源。

  • 然后点击下一步查看审阅页面，在那里您可以查看其他与应用相关的信息，如计费、位置等。最后点击创建资源来部署该应用。

  • 这将花费几分钟时间。应用部署完成后，您可以在概述页面查看应用的URL和其他详细信息。

如果您按照以上所有步骤操作，您的应用将如下所示：https://sea-lion-app-l8cvv.ondigitalocean.app/。

第2步：将应用映射到自定义域名

现在您的应用已成功部署，并拥有一个ondigitalocean.app域名，在这一步中，您将了解如何将其映射到自定义域名。

有两种方法可以为您的应用添加自定义域名：

  1. 使用自动化

  2. 使用控制面板

在本文中，您将看到如何使用控制面板配置自定义域名。

  • 登录到DigitalOcean云，选择要将域名添加到的应用程序，然后单击设置选项卡。

  • 然后，单击编辑链接，位于域右侧，然后单击添加域名按钮。

  • 一旦您在下方的文本字段中开始输入域名，您将获得两个选项来添加您的自定义域名。

  • 您可以使用DigitalOcean的域名服务器或使用CNAME提供商来添加自定义域名。

  • 要使用 DigitalOcean 的名称服务器，请将以下地址复制并粘贴到您的域名注册商的名称服务器记录中（ns1.digitalocean.com，ns2.digitalocean.com，ns3.digitalocean.com）。请查看我们关于 从常见域名注册商指向 DigitalOcean 名称服务器 的教程，以获取从流行注册商将您的域名委托给 DigitalOcean 名称服务器的指导。

  • 您还可以向您的域名添加 CNAME 记录。如果您的 DNS 提供商不是 DigitalOcean，请查看他们的文档以获取说明。使用 复制 按钮复制 ondigitalocean.app 别名，并将其粘贴到您的 DNS 提供商的 CNAME 记录中，以将您的自定义域名指向您的应用平台应用。完成后，点击 添加域名 按钮。

有关域相关的更高级设置，请参考我们关于如何在应用平台管理域名的文档。

添加在Namecheap购买的域名

您可以按照上述步骤添加在任何平台购买的自定义域名。例如，让我们看看如何配置在Namecheap购买的域名的设置。

  • 登录到您的Namecheap帐户。单击域名列表，选择要添加的域名，然后单击管理。

  • 然后转到高级DNS选项卡，单击添加新记录。

  • 然后，转到DigitalOcean的控制面板，复制下面显示的字段中的链接。

  • 粘贴到Namecheap中并保存更改。

这样就完成了！现在，您的应用程序已映射到您的自定义域名。

结论

在本文中，您学习了如何使用DigitalOcean部署应用程序和管理自定义域名。

自定义域名可以帮助您的网站在搜索引擎中获得更高的排名，因为它们是独特的并与您的品牌相关。这也使得人们更容易记住URL并访问您的应用程序。

以下是一些关于自定义域名的最佳实践：

  • 确保SSL/TLS安全，因为它可以加密数据并通过提供安全连接来提高SEO。

  • 定期监控域名健康，以检测问题并为用户维持最佳性能。

  • 创建备份以防止数据丢失，并在您的域名或网站遇到问题时快速恢复。

下一步

如果您决定出于某种原因停止使用您的应用程序，请确保在删除应用程序之前先移除自定义域名。要移除它，请进入 控制面板，点击您的应用程序，然后点击 设置。接下来，点击 编辑 链接，位于 域名 右侧的三个点（…）菜单项，然后最后点击 移除域名 来移除域名。

以下是一些可能会有用的资源列表：

Source:
https://www.digitalocean.com/community/tutorials/deploy-apps-with-custom-domain