GitHub WorkFlow CICD部署静态网站入门指南
2024-01-05 16:02:23
引言
在现代软件开发中,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 将为您的软件开发过程带来显著的提升。