[Part 1]将React App上传到AWS S3 并通过Cloudfront CDN加速

[Part 1]React App 通过 AWS S3 存储，cloudfront CDN 加速并通过Google Search Console 做搜索引擎优化 SEO

第一部分：将React App上传到AWS S3 并通过Cloudfront CDN加速

创建React App

最方便的方式就是通过官方的Create-react-app来创建。create-react-app默认安装的环境参数和软件包可见我之前的博客：https://brucediscovery.com/20...

npx create-react-app my-app  

创建好网页的应用后，我们通过npm run build来生成对应的生产环境版本的React应用。

AWS S3 存储桶

创建存储桶

在对应的服务页面，选择创建存储桶。

如果选择将网页的App放在自有的域名上而不是AWS的域名，需要将存储桶的名称改为对应的域名名称。

以本博客网址为例：brucediscovery.com。 在创建存储桶时，存储桶的名称要改为brucediscovery.com。

取消阻止访问的权限是为了下一步将我们自己的存储桶策略写入S3中，如果不事先取消，是没有办法写入我们自己的策略的。

配置存储桶

第一步我们要将自己的存储桶赋予外部的访问权限，这样，其他的人才能够访问到我们存放在S3上的网页。

点击权限，存储桶策略，复制如下的存储桶策略代码：

需要注意的是，将*XXX存储桶的名称XXX*替换为你创建S3时的存储桶名称。
如果以本博客为例的话，XXX存储桶的名称XXX需要替换为brucediscovery.com。

{  
 "Version": "2012-10-17", "Statement": \[ { "Sid": "PublicReadForGetBucketObjects", "Effect": "Allow", "Principal": "\*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::XXX存储桶的名称XXX/\*" } \]}  

该段策略的大意是说，允许（"Effect": "Allow"）外部的任何人（"Principal": "*"）来读取（"Action": "s3:GetObject"）这个存储桶（"Resource":）内的信息。

设置完成后，我个人建议在权限，阻止公共访问权限中将"阻止全部公共访问权限"设置为打开，并取消勾选最后一个选项（或者直接勾选前三个服务）。最后一个选项需要取消勾选，否则无法实现公共访问。这样的话，能够进一步保护存储桶我们已经设置好的公共访问权限不会被更改。

第二步，我们需要开启网页托管。

打开属性，静态网站托管。

勾选使用此存储桶托管网站。

在索引文档选项下，写入index.html,同样在错误文档下，也需要写入index.html，点击保存。

这里错误文档也需要写入index.html的原因是，因为React作为单网页的应用，只具有一个html文档，就是index.html。虽然React router可以让网页的前端看起来有网页的跳转功能，但实际上，这种功能是通过javascript写入浏览器的网页历史中。

因此，当S3托管网站时，就只有顶级域名的html文件，而如果访问其他子域名，因为无法转到对应路径的html文件，就会回传404。

以本博客网页为例，当访问brucediscovery.com时，能够正确显示网页，但如果访问brucediscovery.com/tech时，就会产生404。

所以我们需要让404的情况自动跳转到index.html，这样，javascript就能够抓到网页历史中的路径并显示对应的网页。

将本地的React App上传

最笨的方法，就是我们把public文件夹下的所有文件，都手动上传到S3上。但是，考虑到我们的网页可能会不断的更新，我们如果每次都手动就会很麻烦，因此，我们采用AWS的cli（command line interface）来实现一键上传。

AWS cli 一键部署

为了能够使用aws cli，我们需要两个步骤来完成。第一步，安装cli，第二步，为我们的本地cli申请访问AWS服务的权限。

安装aws cli

根据你自己的操作系统，选择对应的AWS Cli安装方法并安装，链接如下：AWS Cli version 2.

因为我的操作系统是Mac OS，只想要使用command line，不要GUI，就按照如下的步骤安装：Installing using the macOS command line

安装好之后，我们就需要配置用户权限，从而使得cli工具能够访问AWS的服务。

IAM用户管理

我们找到AWS服务中的Identity and Access Management (IAM)。

点击左侧菜单，访问管理中的用户，我们点击添加用户，来管理我们AWS S3的服务。

在第一步这里，因为我们的用户主要是用来管理S3的上传功能，因此，起名为s3-upload。在访问类型下，勾选编程访问。

第二步，我们需要将这个用户添加到已有的用户组中，因为我们之前并没有创建任何的用户组，因此，需要创建一个用户组。我们点击创建组。

在创建组这个目录下，我们这个用户组的主要功能就是管理我们的AWS S3存储桶服务，因此，我们将组名命名为S3，并在策略中筛选和S3有关的服务。

在搜索框中我们输入S3，在结果中我们勾选"AmazonS3FullAccess"来管理所有的S3服务，点击创建组就完成了用户组的创建。

然后我们一路点击下一步，直到创建用户。

创建用户成功后，我们会看到一个安全凭证页面如下图，这就是我们需要配置AWS cli的用户信息。我们先不要关闭这个页面，打开我们的电脑终端。

配置AWS cli

在terminal中，我们输入如下的指令来配置aws cli。

aws configure  

在这之后，会一行一行的显示出我们需要输入的指令信息:

AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY  
Default region name [None]: us-west-2  
Default output format [None]: json  

"AWS Access Key ID" 对应的就是我们网页中的访问密钥ID，我们直接复制粘贴。"AWS Secret Access Key "则是我们"私有访问密钥"对应的值,需要点击显示才能看到，也是复制粘贴即可。
"Default region name"这个是默认的服务地区，因为比较穷，我选的是美东弗吉尼亚，代号是"us-east-1"，填入即可。这个信息可以在AWS网页的右上角地区里查看，就在用户名的右侧。这个也可以先空着，在具体使用cli时再指明即可。
"Default output format"我直接略过了，回车。我们的cli设定就大功告成。

React 添加AWS 指令

现在我们的AWS cli已经配置完成，为了一键上传，我们要在我们的React App中设置对应的cli 指令。

我们打开"package.json" 文件，在script指令区域,我们添加deploy指令如下：

 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "sitemap": "babel-node src/util/sitemap/sitemap-generator.js", "deploy": "aws s3 sync build/ s3://shortcutmac.com" #deploy 指令 },

这里面要注意把"shortcutmac.com"替换成你的S3存储桶名称，这个command的意思是，把build目录下的文件，同步到S3对应的存储桶下。

如果之前没有设置区域的话，或者默认的区域和S3服务的区域不同，还需要指明S3对应的区域信息，例如：

"deploy": "aws s3 sync build/ s3://shortcutmac.com --region ap-east-1",  

在这里，我的S3存储桶服务没有放在我默认的区域中（us-east-1），而是选择了香港(ap-east-1).

好了。我们这时就可以跑如下的指令，生成对应的react 生产版本文件，并上传到AWS 的S3存储桶内。

npm run build  
npm run deploy  

此时，我们回到AWS S3服务，打开属性，静态网站托管，点击终端节点中的网址就能够看到你自己的网页啦。

http://shortcutmac.com.s3-web...

当然，对大部分人来说，这是不够的，因此，我们通过将S3存储桶的网址导航到自己的域名上，来进行访问。

（当然这里最简单的方式是在DNS设置中将自己的域名CNAME指向S3的网址，但是这里我们想要采用HTTPS进一步保护自己的网站并采用CDN来加速访问来获得更好的用户浏览体验。）

AWS cloudfront来加速并将网页导航到自己的域名上

Route 53 托管自己的域名

首先在Route 53中创建托管区域，并将自己的域名信息填入。

之后在自己的域名注册商那里，把Route 53新域名NS的记录值填入，并保存。

此时，Route 53将提供你自己域名的DNS服务，并且可以用Amazon自家的证书服务，为你的域名申请SSL证书。

SSL 证书

在AWS的服务中选择certificate manager，并选择预置证书，点击开始使用。

此后，选择请求共有证书，点击请求证书。

在添加域名选项中，写入自己需要申请证书的域名,如果有多个域名，需要点击添加另一个名称添加另一个域名。然后选择下一步。

以我自己的react 项目shortcutmac.com为例，我申请了两个域名www.shortcutmac.com 和shortcutmac.com 。因为我提供的只有网页的服务，就只有两个域名需要申请。

因为我们的域名DNS服务就是由AWS提供的，因此，我们选择DNS验证，会非常方便。（邮件验证需要每隔一段时间验证一次，DNS配置好后就不需要再进行反复验证）

下一步之后，请求证书。如果DNS服务是由AWS的Route53提供的，我们可以直接点击"在 Route 53 中创建记录"，Route 53会自动帮我们在DNS中设置证书的验证。

等一段时间后刷新，SSL证书就会颁发给我们的域名啦。

HTTP是一种文件的传输方式，它的缺点是在这个文件传输路径上的人都能够看到里面的内容，就相当于我们在裸奔。SSL是一套加密协议，有了这个协议，我们就穿上了衣服。其他人也无法获得你访问的网页信息，他们看到的只是一堆乱码，这就相当于穿上厚衣服，胸小了看不出来哈。

但SSL并不能够随意颁发，它需要有认证的机构进行颁发，同时也需要颁发者证明他们持有这个域名。因此，我们需要从权威的机构（AWS certificate manager）证明我们持有域名（可以更改域名的DNS信息），从而授予SSL证书。

Cloudfront 加速

好了，这里我们采用AWS的cloudfront服务来加速我们的站点，在cloudfront服务中我们点击创建分配，选择web入门。

在下面这个设置页面中有很多我们需要一一设置的。

首先是原域名。这里需要注意的是我们不能够直接在下拉菜单中选择我们的S3存储桶路径。因为此处给出的存储桶路径并没有注明区域的信息，我们的存储桶不同于cloudfront是全球分布的，而是分布于AWS的某一数据中心中。

因此，我们需要抓到自己S3存储桶的位置信息，我们需要在新的页面中打开AWS S3存储桶服务，在静态网站托管中找到我们终端节点的网站信息。复制"http://"之后的网址并放入原域名当中，这样，我们的S3存储桶连带着它的区域信息就被cloudfront识别到了。

这里推荐设置的另一个是"默认缓存行为设置"下的"查看器协议策略"，我们选择"将 HTTP 重定向到 HTTPS"。因为我们已经申请了SSL证书，将用户裸奔的HTTP访问转化为加密的HTTPS访问能够进一步保护用户的隐私。

下面在"分配设置"中，在备用域名选项填入你想要让域名获得此CDN加速服务的域名。

同样以我的小网站为例，因为我只有两个域名需要作为我的网站，我只填入www.shortcutmac.com 和shortcutmac.com 。多个域名需要用逗号或者空行隔开。

在SSL证书中选择"自定义 SSL 证书"，并在下拉菜单中找到我们已经申请的SSL证书。这里需要注意的是，我们在备用域名中填入的域名要提前在certificate manager申请SSL才能够使用。

然后点击右下角的创建分配，我们的CDN服务就创建完成了！

因为CDN服务要在全球部署，需要消耗一些时间，可以活动一下，半个小时后继续我们的项目。

Route 53 接上 CDN

刷新cloufront 分配页面，当我们的状态显示为已部署后，我们就可以去做最后一步了。

我们打开Route 53服务，在我们的域名下方选择创建记录集，在类型中我们选择"A-IPv4 地址"，然后我们别名中选择是，（因为我们的CDN服务是由
埃文斯、提供的，不需要网址来导航），在别名目标的下拉菜单中我们找到"–– cloudfront 分配 –– "下我们的cloudfront项目，并选择。

点击保存记录集，我们的网站shortcutmac.com现在就通过CDN进行加速啦，而且有HTTPS的保护。

大功告成！在下一篇博客中，我们将把我们已经做好的react网站通过Google Search
Console进行搜索引擎优化。因为我们如果只是丢一个网站在互联网中，真的是沧海一粟，很难被其他人发现，因此，我们需要做SEO，当其他人搜索到和我们相关的关键词时，我们就能够将自己的网站展示出来。

Part 2 React App 通过 AWS S3 存储，cloudfront CDN 加速并通过Google Search Console 做搜索引擎优化 SEO

因为需要上传的图片太多了，传不过来，可以访问我的博客看原文：https://brucediscovery.com/20...