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

本文介绍了如何将React App部署到AWS S3,利用Cloudfront CDN加速,并通过Google Search Console进行SEO优化。首先,通过Create-react-app创建React App,然后在AWS S3上创建存储桶并上传应用。接着,使用AWS CLI进行一键部署,配置IAM用户和Cloudfront以实现域名托管和SSL证书。最后,通过Route 53将CDN与自定义域名连接,完成设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

​​第一部分:将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":)内的信息。

设置完成后,我个人建议在权限,阻止公共访问权限中将"阻止全部公共访问权限"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值