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

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章