第一部分:将React App上传到AWS S3 并通过Cloudfront CDN加速
因为需要上传的图片太多了,传不过来,可以访问我的博客看带有图片原文:https://brucediscovery.com/2020/02/23/Technology/React-APP-S3-SEO1/
创建React App
最方便的方式就是通过官方的Create-react-app来创建。create-react-app默认安装的环境参数和软件包可见我之前的博客:[create-react-app](https://brucediscovery.com/2019/03/05/Technology/React-Dev-Packages/)
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":)内的信息。 设置完成后,我个人建议在权限,阻止公共访问权限中将"阻止全部公共访问权限"