使用 Github Actions 将 React App 部署到 Amazon S3

亚马逊简单存储服务（S3）？

亚马逊简单存储服务 (S3) 是按需云计算平台 Amazon Web Services (AWS) 提供的众多服务之一。Amazon S3 通过 Web 服务接口提供可扩展的对象存储，可用于随时随地在 Web 上存储和检索任意数量的数据。

Github Actions？

GitHub Actions 让您在使用 Github（一个使用 Git 提供软件开发版本控制托管的平台）时轻松自动化构建、测试和部署等工作流程。

在这篇文章中，我们将讨论：

1. 如何创建 Amazon S3 存储桶。
2. 如何为 Web 托管设置 S3 存储桶。
3. 如何配置我们的 Github 操作以自动将更改部署到 S3 存储桶。最后，部署一个 React 应用上线。

在我们开始之前，您需要：

1. Github 帐户。
2. AWS 账户

这项练习可以在AWS Free Tier

创建 Amazon S3 存储桶

首先，登录您的 AWS 账户。在 AWS 管理控制台中，点击相应部分S3下的服务列表Storage，或使用搜索栏。

在页面上Amazon S3，点击Create Bucket

要创建存储桶，请提供Bucket Name。S3存储桶名称在 Amazon S3 的所有存储桶中必须是唯一的。另外，请记下您创建存储桶时使用的Region。在本文中，我们使用。US East (N. Virginia)us-east-1

取消选中 的复选框Block all public access。之后，点击Next和Reviewbucket 配置。然后点击Create bucket。

添加存储桶策略

这将使您的存储桶内容公开。使用S3存储桶时不建议执行此操作，但就我们的目的而言，这样做是可以的。

在 Buckets 下，选择您的存储桶名称(s3-github-actions)> 选择Permissions> 选择Bucket Policy。

复制以下存储桶策略，并将其粘贴到编辑器中。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket-name>/*"
            ]
        }
    ]
}

更新代码片段以包含您的存储桶名称。在存储桶策略中，<bucket-name>您必须更新此名称以匹配您的存储桶名称。
然后点击Save。

启用静态网站托管

点击Use this bucket to host a website。

index.html在字段中输入Index document并Save。

注意：记下端点 URL，我们的网站将可通过此 URL 在浏览器中访问。

创建并推送 React App 到 GitHub

现在我们有了 S3 存储桶，是时候创建并将我们的 React App 推送到 GitHub 了。

• 首先，New Repository在 GitHub 上创建一个。

创建存储库后，您可以：

• 使用Create React App或Parcel-Bundler创建一个 React 应用程序，并确保文件中有一个构建脚本package.json将输出到dist文件夹中。

  $ git init # initialize git locally
  $ git add . # add changes to git
  $ git commit -m "React App" # commit changes
  $ git remote add origin <your-github-repo-url.git> # add remote origin
  $ git push -u origin master # push to remote master branch

                                          OR

• S3-Github Actions React App克隆我们将在本文中使用的示例 React App 存储库，并添加您的存储库remoteURL。GitHub Repo - S3-Github Actions React App

添加新的遥控器（这将添加一个名为 的新遥控器actions）：

  $ git remote add actions <your-github-repo-url.git> # add remote actions
  $ git push -u actions master # push to remote master branch

为了设置我们的工作流程，我们需要提供存储桶的AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY，以便成功连接到 Amazon S3。AWS_REGIONS3

获取 AWS 授权

在 AWS 控制台上：

1. 单击IAM该Security, Identity, & Compliance部分下方的。
2. 单击Users并选择您喜欢的用户。
3. 在 下Security Credentials，点击Create Access Key。这将创建一个，AWS_ACCESS_KEY_ID并AWS_SECRET_ACCESS_KEY复制这些值。您还可以通过删除或停用密钥来管理密钥访问权限。

即使有知己，你也不想分享你的访问密钥。你的知己也许还有知己。谁知道呢！🤷🏻‍♂️

所以这就是为什么我们要Secrets在 GitHub 上传递一些非常重要的值，然后稍后使用表达式语法在工作流文件中访问它们。${{ <expression> }}

返回 Github

单击Settings选项卡，Secret在左侧菜单中选择，然后单击New Secret以添加提供Name和的秘密Value。

设置 Github Actions

现在，我们已经S3设置了存储桶并部署了 React 应用程序。

在 GitHub 仓库中，点击Actions标签页打开 Github 操作页面。Actions点击页面上的Set up this workflow或set up a workflow yourself ->按钮，将会重定向到一个新页面，其中包含一个包含一些样板代码的 Web 编辑器，但我们会删除它们。

首先，让我们命名工作流文件。更改blank.yml为s3-depl。您可以将文件名保留为blank.yml，但最好为其指定一个描述性名称。

将代码片段复制并粘贴到编辑器中。复制粘贴，开发者的超能力🦸🏻‍♂️🦸🏻‍♀️。

name: s3-depl

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}
      - name: Build React App
        run: npm install && npm run build
      - name: Deploy app build to S3 bucket
        run: aws s3 sync ./dist/ s3://<bucket-name> --delete

嗯！好多行啊！！🥶
现在，让我们分解一下上面的代码片段。

• name：我们定义此操作的名称。这将用于在您可能拥有的其他操作中识别此操作。

• onon: 我们用:push以及分支来定义触发器。只要你push对master分支进行编码，此工作流程就会运行。

• jobs：工作流运行由一个或多个作业组成，默认情况下它们并行运行。

  • steps：作业包含一系列称为步骤的任务。步骤可以运行命令、运行设置任务或运行存储库中的操作，每个步骤都以uses:或 开头name:。
  • actions/checkout@v2：此操作检出您的存储库，以便您的工作流程可以访问它。
  • aws-actions/configure-aws-credentials@v1：这将配置 AWS 凭证和区域环境变量以供其他 GitHub Actions 使用。
  • 构建 React App：此步骤块安装节点包并在文件build中运行package.json，这会dist在根目录中创建一个文件夹。
  • 将应用程序构建部署到 S3 存储桶：这会将新创建的构建部署到S3存储桶<bucket-name>（替换<bucket-name>为您的存储桶的名称S3。我的是s3-github-actions）。

要保存，请点击。这Start Commit将Commit New File，

• 保存操作，创建一个.github目录，workflows其中包含一个包含新文件s3-depl（您之前使用的文件名）的目录
• 触发动作。

要检查进度，请单击Actions选项卡。

瞧！行动成功了。耶！派对接连不断！🎊

您现在可以检查您的S3存储桶，您会看到构建文件已上传到其中。

我们的网站现已上线！在浏览器中，访问我们启用时看到的EndpointURL 。现在，你对 React 应用所做的任何更改都将构建并上传到你的bucket，并实时更新。(http://<s3-bucket>.s3-website-<s3-region>.amazonaws.com)Static Website HostingS3

您可以继续使用 Github Actions，通过触发操作来Pull Request运行一些 CI 测试并在部署到您的之前执行几个步骤S3。

谢谢。🎊