Amazon CloudFront 本质是一个CDN服务

Amazon CloudFront 是一种快速的内容交付网络 (CDN) 服务，可以以低延迟安全地向全球客户交付数据、视频、应用程序和 API。内容交付网络由全球分布的服务器网络组成，这些服务器可以在靠近消费者的位置缓存静态内容，如图像、媒体、样式表、JavaScript 文件等或其他庞大的媒体。这有助于提高这些静态内容的下载速度。

在本教程中，我们会将单页应用程序 (SPA) 的内容存储在 S3 存储桶中，并配置 CloudFront 以在全球范围内交付此应用程序。

通过 CloudFront 分发内容

CloudFront 通过称为边缘站点的数据中心网络提供所有内容。边缘站点也称为入网点 (POP)，它是 AWS 全球网络基础设施的一部分，通常部署在全球主要城市和人口稠密的地区。

每当查看器请求我们使用 CloudFront 提供的内容时，请求都会被路由到距离提供最低延迟的用户最近的边缘站点。这导致内容以最佳性能交付给观看者。

如果内容已经在具有最低延迟的边缘位置，CloudFront 会立即交付它。如果内容不在该边缘站点，CloudFront 会从我们配置的源（如 S3 存储桶或 HTTP 服务器）检索它。

我们创建一个 CloudFront 分配来告诉 CloudFront 我们希望从哪里交付内容。我们定义原始服务器，例如 Amazon S3 存储桶，我们在其中上传 HTML 页面、图像、媒体文件等文件。

部署分配时，CloudFront 会为分配分配一个域名，并将我们的分配配置发送到所有边缘站点或接入点 (POP)。

将单页应用程序创建为静态内容

对于我们的示例，我们将通过打包包含 JavaScript、HTML、图像和样式表的准系统单页应用程序 (SPA)来创建一些静态内容。然后，我们将从 CloudFront 提供此应用程序。

我们可以使用 Angular、React、Vue 等众多可用框架之一创建单页应用程序。让我们通过运行以下npm命令使用 React 框架创建 SPA：

 npx create-react-app mystore 

运行此命令将引导react文件夹下的项目：文件夹mystore中包含以下文件：

src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

让我们使用以下命令运行此应用程序：

cd mystore 
npm start

这将在浏览器中启动默认的反应应用程序。

我们可以进一步发展此应用程序以构建有用的功能，但在本教程中，我们将使用 CloudFront 部署此 React 应用程序。

对于部署，我们将首先通过运行来构建项目：

npm build 

这会将应用程序打包到具有以下内容的构建目录中：

build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.073c9b0a.css
    │   └── main.073c9b0a.css.map
    ├── js
    │   ├── 787.dd20aa60.chunk.js
    │   ├── 787.dd20aa60.chunk.js.map
    │   ├── main.fa9c6efd.js
    │   ├── main.fa9c6efd.js.LICENSE.txt
    │   └── main.fa9c6efd.js.map
    └── media
        └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg

这些是一组静态文件，我们可以将它们托管在任何 HTTP 服务器上，以提供我们的 Web 内容。对于我们的示例，我们将按照下一节中的说明将这些静态内容复制到 S3 存储桶，然后在下一节中通过 CloudFront 呈现它们。