[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...