如何使用 Amazon S3 和 CloudFront 在 AWS 上托管 React 应用

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这里有一个教程，教你如何部署速度快、全球通用且托管成本低的 React 应用程序。

最终成果是一个包含 React 应用、自定义域名和 SSL 证书的网站——基本上，所有投入生产所需的一切都已具备。

而这一切都将通过 Serverless Framework 及其新的 Serverless Components 功能变得简单。

这篇文章图片很少，因为完整的教程视频可以在这里找到：

概述

您的 React 应用将通过全球内容分发网络进行分发。这使其在全球范围内都能拥有极快的性能。

我们将使用最便宜的基础设施来实现这一目标，即亚马逊网络服务的 S3 和 Cloudfront。

价格有多便宜？

一年内，您可以免费传输 50 GB 的数据，每月可处理 200 万次请求。

之后，费用将根据您的数据传输量而定，每 GB 收费 0.8 至 0.2 美元，外加每 10,000 次 HTTPS 请求 0.1 美元。更多详情，请访问 AWS CloudFront 定价页面。

您需要为自定义域名付费。不过，您可以从 AWS Certificate Manager 免费获得一个公共 SSL 证书。

首先声明一下——我之前并没有分析市面上所有的静态网站托管方案，所以并不了解是否存在更便宜的选择。但是，S3 和 CloudFront 已经存在很多年了，它们可靠且速度快。事实上，很多静态网站托管产品都是基于 S3 和 CloudFront 构建的，只是价格更高一些。

开发人员不经常使用普通的 AWS S3 和 AWS Cloudfront 的原因是，与其他产品相比，它们的使用体验实在太复杂了。

然而，Serverless Framework 正是在这种情况下发挥作用的。它为所有基础设施提供商带来了卓越的开发者体验，尤其是那些具备自动扩展、按需付费，也就是所谓的“无服务器”特性的基础设施。

设置

在进行任何操作之前，您需要拥有一个 AWS 账户。注册时必须使用信用卡，但只有在超出免费套餐限额后才会收取费用。

接下来，登录 AWS，导航到 IAM 控制面板，创建 Serverless Framework 将用于配置 React 网站所需基础设施的访问密钥。

转到“用户”，然后单击“添加用户”。给用户命名时包含 serverless-framework，然后单击“启用程序化访问”，再单击“下一步”。

选择“直接附加现有策略”。勾选“AdministratorAccess”旁边的复选框。点击“下一步”，再点击“下一步”跳过标签屏幕，然后点击“创建”。

注意：之后，您可能需要缩小这些权限范围，以便 Serverless Framework 只需访问必要的最少资源。不过，这可能比较复杂，因为 Serverless Framework 使用了许多 AWS 服务。为了帮助您，我们举例说明：网站组件目前使用 S3、证书管理器、CloudFront 和 Route 53，因此需要专门的访问权限。

复制“访问密钥 ID”和“秘密访问密钥”。稍后您将需要它们……

现在，到了最有趣的无服务器框架部分。

请确保您已安装Node.js。然后，通过NPM安装Serverless Framework并添加全局标志-g。

$ npm i -g serverless

请确保您已安装 Serverless Framework 1.49 或更高版本。提示：如果您现在正在安装，那么您就已经安装了。

我们将使用一个网站模板，它包含了快速入门所需的所有基础框架。这是一个完整的样板网站。使用以下命令安装网站模板。

$ serverless create --template-url https://github.com/serverless/components/tree/master/templates/website

这将为website您创建一个文件夹。

进入该文件夹，然后通过运行以下命令使用 npm 安装 React 依赖项npm i。

$ npm i

此外website，在该文件夹中创建一个名为 `AWS Keys` 的文件.env，并将您的 AWS Keys 粘贴到该文件中，格式如下：

AWS_ACCESS_KEY_ID=A92JA098J10FAJ10JAAFASF
AWS_SECRET_ACCESS_KEY=fJajajaf0919jIJFJA7813hAAFJHL

设置已完成，现在可以开始开发了！

发展

本项目使用 React 和 Parcel 来构建和打包应用程序。

您也可以使用以下命令通过 Parcel 在本地运行应用程序：

$ npm run start

现在，你可以快速发展。

部署

网站模板开箱即用，可以直接部署。

查看您的serverless.yml文件，您会看到一个名为“网站”的无服务器组件。无服务器组件其实就是一段代码，它知道如何部署创建特定结果或用例所需的云基础设施。

Serverless Components 是开源的，您可以利用它们轻松地在无服务器云基础设施上部署各种用例。点击此处查看。

每个 Serverless 组件都有一个inputs属性，允许您配置组件将要部署的用例。例如，您可以在这里看到src指向包含网站资源目录的输入，以及一个hook用于在部署前构建网站的调用。这样，您无需在部署前运行构建脚本，它会自动完成。

好了，接下来我们进入部署环节！

要部署您的 React 应用，只需在您的网站文件夹中运行该serverless命令即可。

$ serverless

您的网站应该会在一分钟内部署完成，并且您应该会获得指向您正式网站的URL！

首次部署总是耗时最长，因为创建云基础设施资源比更新它们更耗时。

设置自定义域名、CloudFront 和 SSL 证书

要设置您的自定义域名、CloudFront CDN 和 SSL 证书，您需要手动完成一个步骤：登录您的 AWS 账户并购买域名。目前，网站组件仅支持在 AWS Route 53 上购买的域名。未来几周内，我们将启用对在其他注册商处注册的现有域名的支持。

前往 AWS Route 53 控制面板，注册您的域名，并等待注册完成。这可能需要长达一个小时。完成后，只需将自定义域名添加到网站组件的输入项中即可。

再次运行serverless，它将识别input并设置您的自定义域名、Cloudfront 和 SSL 证书。

您需要等待新域名在全球各地的 DNS 服务器上生效。这可能需要长达一个小时的时间。生效后，您就可以看到新域名及其所做的任何更改。

每次您运行serverless部署网站更改的命令时，网站组件都会使您在 AWS CloudFront 中缓存的资源失效。这样，您几乎可以立即看到更改。

国家管理

目前，Serverless Components 尚不支持远程状态管理。该功能将在一个月内推出。在此之前，请务必将目录推.serverless送到 GitHub，因为它包含有关已部署到您网站的云基础设施资源的状态信息。

添加无服务器 API 后端、数据库等

如果您想更进一步，像搭建这个网站一样轻松地构建一个全栈应用程序，请查看全栈应用程序模板。它将为您提供快速、经济高效且面向全球的完整无服务器应用程序所需的一切。

享受！