自动化前端部署：Jenkins 和 GitHub Actions 的详细教程

引言

前端项目的快速部署对于现代敏捷开发至关重要。使用 Jenkins 和 GitHub Actions 等工具，可以实现前端项目的自动化部署，从而提高效率并减少错误。本文将提供一个全面的教程，逐步指导您使用 Jenkins 和 GitHub Actions 自动化前端项目部署。

部分 1：使用 Jenkins 部署到本地服务器

1. 安装 Jenkins 和 Gitea

• 在本地服务器上安装 Jenkins。
• 设置一个局域网 git 服务器，例如 Gitea。

2. 配置 Jenkins

• 创建一个 Jenkins 作业。
• 配置 Git 源代码管理。
• 设置构建步骤以安装依赖项并构建项目。

3. 部署到本地服务器

• 配置 Jenkins 以将构建的项目部署到本地服务器。
• 设置部署凭据。

部分 2：使用 GitHub Actions 部署到 GitHub Pages

1. 设置 GitHub Actions

• 在 GitHub 中创建存储库。
• 启用 GitHub Actions。

2. 创建 GitHub Actions 工作流

• 创建一个 GitHub Actions 工作流。
• 配置工作流以在 Git 推送时触发。

3. 部署到 GitHub Pages

• 使用 GitHub Actions 部署前端项目到 GitHub Pages。
• 配置部署凭据和 GitHub Pages 设置。

步骤示例

Jenkins 作业配置示例：

构建触发器：Git SCM
Git URL：git@192.168.1.10:username/frontend-project.git
构建步骤：
- shell 'npm install'
- shell 'npm run build'
部署步骤：
- shell 'rsync -av build/ username@192.168.1.11:/var/www/html/frontend-project/'

GitHub Actions 工作流示例：

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm install
      - run: npm run build
      - uses: JamesIves/github-pages-deploy-action@4.3.3
        with:
          branch: gh-pages
          folder: build
          clean: true

结论

通过使用 Jenkins 和 GitHub Actions，您可以自动化前端项目部署，显著提高效率。本教程提供了详细的步骤指南，使您可以根据自己的需要轻松配置和使用这些工具。自动化部署将为您节省大量时间，并确保您的前端项目快速准确地部署。