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

最新推荐文章于 2024-08-29 09:22:07 发布

bruce discovery

最新推荐文章于 2024-08-29 09:22:07 发布

阅读量741

点赞数

CC 4.0 BY-SA版权

文章标签： aws react javascript reactjs

本文链接：https://blog.youkuaiyun.com/github_37534525/article/details/104524883

本文介绍了如何将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":）内的信息。

设置完成后，我个人建议在权限，阻止公共访问权限中将"阻止全部公共访问权限"

最低0.47元/天解锁文章

200万优质内容无限畅学