使用Github Action将静态网站样式化部署到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存储桶，我们首先需要在存储库中配置两个新密钥。这些秘密是给我们的 AWS_ACCESS_KEY_ID 和 AWS_SECRET_ACCESS_KEY。
导航到 Settings GitHub存储库部分，然后找到 Secrets 部分在左侧。到达那里后，我们将为 AWS_ACCESS_KEY_ID 并粘贴在 access_key 我们进入了IAM步骤。然后，我们将为 AWS_SECRET_ACCESS_KEY 并粘贴到我们的 secret_access_key。最后，我们应该在GitHub存储库中有两个新的秘密。
我们已经配置了GitHub Secrets，并且我们的IAM用户有权将内容上传到我们的S3存储桶。现在，我们可以配置Action以在Git推送上连续部署到存储桶中。
通过GitHub Actions设置持续部署
GitHub Actions使用了 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:// --delete
在这里，我们看到了我们定义的三个步骤 build 工作。第一个是AWS提供的操作，它采取我们配置的机密并使用它们来设置我们的AWS CLI凭证。然后，根据静态网站的构建和配置方式，您需要先构建网站，然后再将其上传到S3。然后，我们的最后一步正在运行 aws s3 sync 通过AWS CLI同步我们的 dist 文件夹到我们的S3存储桶。我们使用 --delete CLI调用中的标记以删除S3存储桶中但不在我们的存储桶中的所有文件 dist 夹。
现在，如果我们提交这个新的工作流程文件，那么我们应该能够在 Actions 作业运行到完成的GitHub存储库部分。
now现在，我们为位于GitHub上的静态网站存储库配置了连续部署，但已部署到我们的S3存储桶。
结论
如今，有数十种方法可以持续部署我们的应用程序和网站。在本文中，我们展示了使用GitHub Actions并将其部署到AWS S3的一种方法。但这只是一对选择，还有更多类似的选择。
我的希望是，在这篇文章中，您已经看到设置新的GitHub操作非常容易。这使得像这样的简单的连续部署设置变得轻而易举。最重要的是，如果您已经在AWS上托管了静态站点，那么这是从GitHub操作将站点推送到S3的一小步。
是否想查看我的其他项目？
我是DEV社区的忠实粉丝。如果您有任何疑问或想就有关重构的不同想法进行讨论，请访问Twitter或在下面发表评论。
在博客之外，我创建了“使用它学习AWS”价格。在价格中，我们将重点学习如何实际使用Amazon Web Services托管，保护和交付静态网站。这是一个简单的问题，有许多解决方案，但是对于增强您对AWS的理解而言，它是完美的。我最近在价格中增加了两个新的奖励章节，重点介绍了“基础结构即代码和持续部署”。
我还策划自己的每周新闻。每周做的“边做边学”时事通讯挤满了很棒的云，编码和DevOps文章。注册以在收件箱中获取它。