返回

GitHub WorkFlow CICD部署静态网站入门指南

前端

引言

在现代软件开发中,CI/CD(持续集成和持续交付)已成为不可或缺的实践,它通过自动化构建、测试和部署流程,显著提高了开发效率和代码质量。在本指南中,我们将重点探讨如何使用 GitHub Workflow CICD 来部署静态网站。

什么是 CICD

CICD 是一种软件开发实践,它通过自动化来实现持续集成、持续交付和持续部署。持续集成涉及频繁地将代码合并到版本控制中,触发自动化的构建和测试流程。持续交付更进一步,它将代码更改自动部署到预生产环境,进行进一步的测试和验证。持续部署是CICD 的最高级别,它自动将代码更改部署到生产环境,实现持续更新。

GitHub Workflow

GitHub Workflow 是一个由 GitHub 提供的 CI/CD 平台。它允许开发者创建自定义的工作流,触发自动化构建、测试和部署任务。工作流可以使用 YAML 文件进行定义,并可以在 GitHub 存储库中进行管理。

部署静态网站

部署静态网站是一项常见的任务,GitHub Workflow 可以轻松实现这一目标。静态网站通常由 HTML、CSS 和 JavaScript 文件组成,它们在构建时生成静态内容。部署静态网站涉及将这些文件传输到Web服务器或托管提供商。

入门指南

1. 设置 GitHub 存储库

创建一个新的或现有的 GitHub 存储库来存放您的静态网站代码。确保代码符合静态网站结构,包含必要的 HTML、CSS 和 JavaScript 文件。

2. 创建 GitHub Workflow

在 GitHub 存储库中,创建一个名为 “.github/workflows” 的目录,并在其中创建名为 “build-and-deploy.yml” 的 YAML 文件。

3. 定义工作流

在 “build-and-deploy.yml” 文件中,定义一个名为 “build-and-deploy” 的工作流。以下是示例工作流:

name: build-and-deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16.x
      - run: npm install
      - run: npm run build

  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: shinyinc/action-aws-s3-deploy@v1.1.0
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
          bucket-name: my-static-website-bucket
          path: build

4. 部署网站

该工作流将定义两个任务,即 “build” 和 “deploy”。“build” 任务负责构建静态网站,而 “deploy” 任务负责将构建的网站部署到AWS S3 存储桶。“deploy” 任务使用 “shinyinc/action-aws-s3-deploy” 操作,它提供了与 AWS S3 交互的便捷方式。

5. 设置 AWS 凭证

将 AWS 访问密钥 ID 和 AWS 密钥访问密钥存储在 GitHub 密集中,然后在工作流中引用这些密钥。这些凭证将授予工作流对 AWS S3 存储桶的访问权限。

6. 触发工作流

将代码推送到 GitHub 存储库的 “main” 分支时,将触发 “build-and-deploy” 工作流。工作流将自动执行构建和部署任务,将您的静态网站部署到 AWS S3 存储桶。

7. 访问网站

您的静态网站现在应该部署在 AWS S3 存储桶中。可以通过访问存储桶的公共 URL 来访问该网站。

结论

使用 GitHub Workflow CICD 部署静态网站是一种简单有效的方法,它可以帮助您自动化和简化部署流程。通过遵循本指南,您可以轻松实现 CI/CD,并享受其带来的众多好处。从更快的发布周期到更高的代码质量,CI/CD 将为您的软件开发过程带来显著的提升。