如何使用 AWS 部署带有自定义域的 React 项目？

使用 aws（amazon web services）等云提供商通过自定义域部署 react 应用程序可能看起来令人畏惧，但当分解为可管理的步骤时，它就很简单。在本文中，我们将指导您完成从构建应用程序到使其在您的自定义域上运行的整个过程。

当您准备好与世界分享您的 react 项目时，使用自定义域部署它可以为您的应用程序带来专业的触感。 aws 提供了一个强大的、可扩展的平台来托管静态网站，使其成为部署 react 应用程序的绝佳选择。本指南将引导您逐步完成使用自定义域在 aws s3 上部署 react 应用程序的过程。

准备部署您的 react 应用程序**

在部署之前，您需要构建您的 react 应用程序：

1. 构建您的应用程序：在终端中运行以下命令来生成 react 应用程序的生产版本：

   npm run build

此命令创建一个优化的构建文件夹，其中包含您需要部署的所有文件。

1. 测试构建：在部署之前在本地测试你的构建是个好主意。您可以使用像服务这样的包：

   npx serve -s build

此命令将在本地为您的应用程序提供服务，以便您可以确保一切按预期工作。

设置 aws s3**

aws s3（简单存储服务）是托管 react 应用程序等静态网站的绝佳选择。

1. 创建s3存储桶:

   • 前往aws s3控制台。
   • 点击“创建存储桶”。
   • 输入唯一的存储桶名称（这将是您的应用程序的名称）。
   • 选择离目标受众较近的地区。
   • 取消选中“阻止所有公共访问”选项并确认您的存储桶将可公开访问（对于托管网站很重要）。

2. 上传你的react应用:

   • 创建存储桶后，点击它打开它。
   • 点击“上传”并选择构建文件夹中的所有文件。
   • 上传后，点击“属性”，然后启用“静态网站托管”。
   • 将“索引文档”设置为index.html，将“错误文档”设置为index.html

3. 公开存储桶:

   • 转到您存储桶中的“权限”选项卡。
   • 点击“存储桶策略”并粘贴以下 json，将 your-bucket-name 替换为您的实际存储桶名称：

    {
      "version": "2012-10-17",
      "statement": [
        {
          "sid": "publicreadgetobject",
          "effect": "allow",
          "principal": "*",
          "action": "s3:getobject",
          "resource": "arn:aws:s3:::your-bucket-name/*"
        }
      ]
    }
   

• 保存政策以允许公众访问您的文件。

设置自定义域**

要使用自定义域，您需要配置 aws 的 dns web 服务 route 53。

1. 注册您的域名:

   • 如果您没有域名，可以直接通过aws route 53注册一个。
   • 如果您已有域名，您仍然可以通过 route 53 为其创建托管区域来管理它。

2. 配置53号路线:

   

   Flowith

   一款GPT4驱动的节点式 AI 创作工具

   下载
   • 在 route 53 仪表板中，转到“托管区域”并单击您的域。
   • 点击“创建记录”并选择“a - ipv4地址”。
   • 选择“别名”并选择您的s3存储桶作为别名目标。

3. 更新您域名的dns:

   • 如果您的域是在 aws 外部管理的，请更新您的 dns 设置以指向您创建托管区域时提供的 route 53 名称服务器。

使用 aws certificate manager 设置 ssl（可选但推荐）**

为了安全和seo的好处，使用https至关重要：

1. 申请证书:

   • 前往aws证书管理器。
   • 申请公共证书并输入您的域名（包括www.yourdomain.com和yourdomain.com）。
   • 按照aws提供的说明验证域名。

2. 配置cloudfront:

   • 设置 aws cloudfront 以通过 https 安全地提供您的内容。
   • 在 cloudfront 控制台中，创建一个新的分配并选择您的 s3 存储桶作为源。
   • 在ssl证书下，选择“自定义ssl证书”并选择您创建的证书。
   • 更新域设置以指向cloudfront分配而不是直接指向s3存储桶。

示例：部署示例 react 应用程序

假设您已经使用 react 创建了一个个人作品集，并且想要将其部署到 www.myportfolio.com:

1. 构建你的 react 应用：

   npm run build

1. 上传到s3：

   • 创建名为 myportfolio.com 的 s3 存储桶。
   • 上传您的构建文件夹内容。
   • 启用s3静态网站托管。

2. 配置53号路线:

   • 在 route 53 中注册 myportfolio.com.
   • 在 route 53 中创建一条指向您的 s3 存储桶的 a 记录。

3. 设置ssl:

   • 为myportfolio.com申请ssl证书。
   • 设置 cloudfront 发行版以通过 https 安全地为您的应用程序提供服务。

片尾曲

在 aws 上使用自定义域部署 react 应用程序一开始可能看起来很复杂，但通过上述步骤，您可以放心地托管您的应用程序，并享受专业部署的所有优势。无论您是部署个人项目还是生产级应用程序，aws 都能提供满足您需求的工具和可扩展性。

常见问题

q1：我需要支付 aws s3 和 route 53 费用吗？

答：是的，aws 服务是付费的，但它们提供使用有限的免费套餐，这通常足以用于小型项目或测试。

q2: 我可以使用其他域名注册商代替 route 53 吗？

答：是的，您可以使用其他注册商，并通过相应配置 dns 设置将您的网站托管在 aws s3 上。

q3：为什么我应该使用cloudfront？

答：cloudfront 提供更好的性能、安全性（https）和缓存，可以显着提高您网站的速度和可靠性。

q4：如果我在部署过程中遇到问题怎么办？

答：aws 文档和社区论坛是排除故障的绝佳资源，如果需要，还可以提供客户支持。

按照本指南，您可以使用 aws 部署带有自定义域的 react 应用程序，并确保专业且安全的网络存在。