从0到1创建一个前端React应用并部署至AWS

项目背景

准备制作一个个人博客的服务，初期先开发后端服务并部署，后期等熟悉前端后再开发前端项目，最终整合前后端实现一个个人博客服务。

项目参数

前端语言：Javascript
前端编程框架：React
云服务：AWS
代码管理：Github
包管理：Npm

环境配置

安装git
安装nodejs https://nodejs.org/zh-cn/download/package-manager
安装aws cli https://aws.amazon.com/cn/cli/

操作步骤

创建项目目录并进入该目录
- mkdir my-new-project cd my-new-project
初始化npm项目
- npm init
安装并使用create-react-app包
- npx create-react-app my-react-app
修改项目代码
启动项目预览
- npm start
打包项目
- 对于开发环境
- $env:REACT_APP_ENV_FILE=".env.local"; npm run build
- 对于生产
- $env:REACT_APP_ENV_FILE=".env"; npm run build
将生成的文件上传至AWS s3
- 登录 AWS 管理控制台，进入 S3 服务页面
- 创建存储桶：
  - 点击 Create bucket。
  - Bucket Name：输入一个独一无二的名称，比如 my-blog-bucket。
  - Region：选择你希望存储桶所在的区域。
  - 其他选项保持默认即可，点击 Create bucket。
- 配置 S3 Bucket
  - 启用静态网站托管：
    - 进入你创建的 S3 Bucket。
    - 点击 Properties，找到 Static website hosting，然后点击 Edit。
    - 选择 Enable，并设置以下内容：
    - Index document：index.html
    - Error document：index.html（对于单页应用）
    - 保存设置。
  - 设置 Bucket 公开访问：
    - 进入 Permissions。
    - 找到 Block Public Access，点击 Edit，关闭所有选项以允许公开访问。
    - 在 Bucket Policy 中，设置以下策略来允许公开读取文件：
```
    {
        "Version": "2012-10-17",
        "Statement": [
            {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-blog-bucket/*"
            }
        ]
    }
```
- 上传文件至s3
  - 使用 AWS 管理控制台
  - 在 S3 控制台中，进入你的存储桶。
  - 点击 Upload，然后将 build 文件夹中的所有文件（包括 index.html、static 文件夹等）拖到上传区域。
  - 点击 Upload 按钮，等待文件上传完成。
访问你的网站
- 文件上传完成后，你可以通过 S3 提供的 URL 访问你的网站。格式如下：
  - http://<your-bucket-name>.s3-website-<region>.amazonaws.com
（可选）使用 CloudFront 加速
- 如果你希望你的网站加载速度更快，尤其是面向全球用户，可以考虑使用 CloudFront（AWS 的内容分发网络）。
  - 进入 CloudFront 控制台，点击 Create Distribution。
  - 选择 Web，在 Origin Domain Name 中选择你刚才创建的 S3 Bucket。
  - 配置其他选项并创建分发。
  - 使用 CloudFront 提供的域名访问你的网站，以获得更快的加载速度。
（可选）配置自定义域名
- 如果你有自己的域名，可以在 Route 53 或其他 DNS 提供商中将域名与 S3 静态网站关联起来。
  - 在 Route 53 或其他 DNS 控制台中创建一条 A记录或 CNAME记录指向你的 S3 静态网站或 CloudFront 分发。
  - 确保你在 S3 存储桶或 CloudFront 中配置了自定义域名。