使用 Github Actions 将静态网站部署到 AWS

GitHub Actions 因其简单易用以及 GitHub 上已有大量仓库而广受欢迎。随着 Actions 的正式发布，现在可以轻松地将您的 CI/CD 实践整合到您的仓库中。以前，我们必须使用 Travis CI、CircleCI 或其他 CI/CD 提供商等第三方工具。但有了 GitHub Actions，我们只需一个简单的文件即可将所有 CI/CD 流程整合到我们的仓库中yaml。

在本文中，我们将快速探索如何使用 GitHub Actions 将静态网站持续部署到 AWS S3。本文假设您使用 AWS S3 托管静态网站，并在 GitHub 上拥有该网站的 Git 仓库。如果您目前没有在 AWS S3 上托管静态网站，可以参考这篇文章入门，或者查看我的“通过实践学习 AWS”课程进行深入了解。

如果您已满足这两个先决条件，那么让我们深入研究如何为我们的 GitHub 存储库设置 CI/CD 工作流程。

AWS 设置步骤

在创建工作流之前，我们需要在 AWS 账户中设置一个用户，该用户将被允许将静态网站部署到 S3 存储桶。为此，我们首先需要登录 AWS 账户并导航到 IAM 控制台。

到达那里后，我们需要创建一个新用户，该用户将拥有我们 AWS 账户的编程访问权限。我们希望限制此用户只能访问我们账户的 S3，因此我们将选择AmazonS3FullAccess权限策略。请参阅下面的 GIF，了解分步指南。

在创建新用户后的最后一页，我们可以看到他们的编程访问密钥、access_key和secret_access_key。将它们复制到某个文件中，因为我们接下来要将它们添加到 GitHub。

设置我们的 GitHub Action Secrets

要从 GitHub Action 部署到 AWS S3 存储桶，我们首先需要在仓库中配置两个新的 secret。这两个 secret 分别用于我们的AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY。

导航到SettingsGitHub 存储库的相应部分，并Secrets在左侧找到 。到达那里后，我们将为 添加一个新的密钥，AWS_ACCESS_KEY_ID并将其粘贴到access_key我们在 IAM 步骤中获得的 中。然后，我们将为 添加另一个密钥，AWS_SECRET_ACCESS_KEY并将其粘贴到我们的 中secret_access_key。最后，我们的 GitHub 存储库中应该有两个新的密钥。

我们已经配置好了 GitHub Secrets，并且我们的 IAM 用户拥有上传内容到 S3 存储桶的权限。现在，我们可以配置 Actions，以便在 Git 推送时持续部署到存储桶。

通过 GitHub Actions 设置持续部署

GitHub Actions 使用 a 的概念workflow来确定要运行哪些作业以及这些作业中的哪些步骤。为了完成设置，我们首先要在仓库中创建一个新目录，GitHub Actions 将监视该目录以了解要执行哪些步骤。

从存储库的根目录运行以下命令：

$ mkdir .github/workflows/
$ touch .github/workflows/main.yml

在我们的文件里面，main.yml我们将添加以下内容：

name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - 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: us-west-2
    - name: Build static site
    - run: yarn install && npm run-script build
    - name: Deploy static site to S3 bucket
      run: aws s3 sync ./dist/ s3://<your-website-bucket> --delete

这里我们看到我们的作业中定义了三个步骤build。第一个步骤是 AWS 提供的操作，它获取我们配置的密钥，并使用它们设置我们的 AWS CLI 凭证。然后，根据静态网站的构建和配置方式，您需要在将网站上传到 S3 之前先构建网站。最后一步是aws s3 sync通过 AWS CLI 运行，将dist文件夹同步到 S3 存储桶。我们使用--deleteCLI 调用中的标志来删除 S3 存储桶中但不在我们文件夹中的所有文件dist。

现在，如果我们提交这个新的工作流文件，我们就应该能够在ActionsGitHub 存储库的部分中看到该作业已运行完成。

💥🙏 现在，我们已经为位于 GitHub 上的静态网站存储库配置了持续部署，但部署到我们的 S3 存储桶中。

结论

如今，持续部署应用程序和网站的方法有很多种。本文仅展示了一种使用 GitHub Actions 部署到 AWS S3 的方法。但这仅仅是其中一种选择，类似的方法还有很多。

我希望您通过本文了解了设置新的 GitHub Action 是多么简单。这使得设置像这样的简单持续部署变得轻而易举。此外，如果您已经在 AWS 上托管了静态网站，那么只需一步即可从 GitHub Action 将网站推送到 S3。

想看看我的其他项目吗？

我是 DEV 社区的忠实粉丝。如果您有任何疑问，或者想讨论关于重构的不同想法，请在 Twitter 上联系我，或在下方留言。

除了写博客之外，我还创建了一门“通过使用 AWS 学习 AWS”课程。课程将重点讲解如何实际使用 Amazon Web Services 来托管、保护和交付静态网站。这是一个简单的问题，有很多解决方案，但它非常适合加深你对 AWS 的理解。我最近为该课程添加了两个新的附加章节，分别侧重于“基础设施即代码”和“持续部署”。

我还精心策划了每周的新闻通讯。“ Learn By Doing”新闻通讯每周都包含精彩的云计算、编程和 DevOps 文章。注册即可在您的邮箱中接收。