cicd githubAction

沐森
136 阅读5分钟

GitHub Actions 工作流程：从SSH连接到代码渲染

这个流程主要分为以下几个部分：

  1. 准备阶段：服务器配置与GitHub Secrets

  2. GitHub Actions 工作流程文件 (.github/workflows/main.yml)

    • 触发器
    • 检出代码
    • 设置Node.js (或其他语言环境)
    • 安装依赖
    • 构建项目 (生成静态文件)
    • 通过SSH部署到服务器

  3. 服务器端配置

1. 准备阶段：服务器配置与GitHub Secrets

在GitHub Actions能够连接到你的服务器之前，你需要做一些准备工作：

  • 服务器端生成SSH密钥对：  在你的部署服务器上生成一对SSH密钥（公钥和私钥）。
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

  • 一路回车即可，不要设置密码，因为GitHub Actions是非交互式的。这会生成id_rsa（私钥）和id_rsa.pub（公钥）文件，通常在~/.ssh/目录下。

  • 将公钥添加到GitHub Deploy Keys (可选，但推荐)：  如果你希望服务器能够拉取GitHub仓库，可以将id_rsa.pub的内容添加到GitHub仓库的 "Deploy keys" 中。但在这个工作流程中，我们是从GitHub向服务器推送，所以这不是必须的，不过了解一下也无妨。

  • 将服务器的公钥添加到GitHub Actions Secrets：  **这是最关键的一步。**你需要将 服务器的私钥 (id_rsa的内容)  添加到你的GitHub仓库的Secrets中。

    1. 复制id_rsa文件的全部内容。
    2. 在你的GitHub仓库中，导航到 Settings -> Secrets and variables -> Actions。
    3. 点击 New repository secret。
    4. 为Secret命名，例如 SSH_PRIVATE_KEY。
    5. 将复制的私钥内容粘贴到 Value 字段。
    6. 点击 Add secret。

  • 记录服务器连接信息：  你还需要知道服务器的IP地址（或域名）、SSH端口（默认为22）、以及用于SSH连接的用户名。这些信息也建议作为GitHub Secrets存储，例如：

    • SSH_HOST (e.g., your_server_ip or your_domain.com)
    • SSH_USERNAME (e.g., ubuntu or root)
    • SSH_PORT (e.g., 22)

2. GitHub Actions 工作流程文件 (.github/workflows/main.yml)

这是定义自动化流程的核心文件。通常放在仓库根目录下的.github/workflows/子目录中。

name: Deploy Static Website

on:
  push:
    branches:
      - main # 当main分支有新的push时触发

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 在最新的Ubuntu Runner上运行

    steps:
      - name: Checkout repository # 步骤1：检出仓库代码
        uses: actions/checkout@v4

      - name: Set up Node.js # 步骤2：设置Node.js环境 (以Node.js项目为例，如Jekyll/Hexo/VuePress)
        uses: actions/setup-node@v4
        with:
          node-version: '20' # 或者你项目所需的Node.js版本

      - name: Install dependencies # 步骤3：安装项目依赖
        run: npm install # 或者 yarn install / bundle install (对于Jekyll)

      - name: Build project # 步骤4：构建项目，生成静态文件
        run: npm run build # 这个命令会生成_site, public, dist等目录，具体取决于你的项目配置

      - name: Deploy to server via SSH # 步骤5：通过SSH部署到服务器
        uses: appleboy/ssh-action@v1.0.0 # 使用一个流行的SSH Action
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          port: ${{ secrets.SSH_PORT }} # 可选，默认为22
          script: |
            # 以下是在服务器上执行的命令
            # 1. 确保目标目录存在
            mkdir -p /var/www/your_website_path
            # 2. 清理旧文件 (可选，如果你想完全替换)
            rm -rf /var/www/your_website_path/*
            # 3. 将本地构建的静态文件复制到服务器目标目录
            # 注意：此处的文件路径取决于你的构建输出。例如，如果是VuePress/Hexo通常是public，Jekyll是_site，React/Vue是dist
            # 这里我们假设构建输出在当前工作目录的 'dist' 文件夹中
            sudo cp -r ${{ github.workspace }}/dist/* /var/www/your_website_path/
            # 4. 设置文件权限 (可选，确保Web服务器可以读取)
            sudo chown -R www-data:www-data /var/www/your_website_path
            sudo chmod -R 755 /var/www/your_website_path

            # 如果需要，可以重启Web服务器服务 (例如Nginx)
            # sudo systemctl restart nginx # 谨慎使用，确保服务不会中断太久

工作流程解释：

  • name: 工作流程的名称。

  • on: 定义了触发工作流程的事件。这里是当代码被推送到main分支时触发。你也可以配置为pull_request、workflow_dispatch等。

  • jobs: 一个工作流程可以包含一个或多个作业。这里只有一个build-and-deploy作业。

    • runs-on: 指定作业运行的Runner环境。ubuntu-latest是GitHub提供的一个虚拟环境。

    • steps: 作业中按顺序执行的步骤。

      • actions/checkout@v4: 这是一个官方Action，用于将你的GitHub仓库代码检出到Runner上。

      • actions/setup-node@v4: 用于设置Node.js环境。如果你是Python、Ruby等项目，需要使用对应的setup-python、setup-ruby等Action。

      • npm install / npm run build: 这些是你的项目特定的构建命令。确保它们能够在本地成功运行。build命令的输出目录（例如dist, public, _site）非常重要，因为你需要将这些文件传输到服务器。

      • appleboy/ssh-action@v1.0.0: 这是一个非常流行的第三方Action，用于通过SSH执行命令和传输文件。

        • host, username, key, port: 这些参数从GitHub Secrets中获取，提供了SSH连接所需的凭据和信息。

        • script: 这是最核心的部分，定义了在远程服务器上执行的命令。

          • mkdir -p: 确保目标目录存在。
          • rm -rf: 清理旧文件，确保部署的是最新版本。
          • sudo cp -r ${{ github.workspace }}/dist/* /var/www/your_website_path/: 这条命令至关重要。github.workspace是Runner上你的仓库代码的根目录。dist/*假设你的构建输出在dist文件夹内。你需要根据你实际项目的构建输出路径进行调整。cp -r会将所有文件和子目录递归地复制到服务器的目标路径。
          • sudo chown -R www-data:www-data 和 sudo chmod -R 755: 这些命令用于设置文件的所有者和权限，确保Web服务器（通常以www-data用户运行）可以访问和提供这些文件。
          • sudo systemctl restart nginx: 如果你的Web服务器（如Nginx）需要重新加载配置或重启才能识别新部署的文件，可以添加此命令。但对于静态文件，通常Nginx会自动读取新文件，不需要重启。

3. 服务器端配置

为了让Web服务器能够渲染你部署的代码，你需要配置服务器上的Web服务器（如Nginx或Apache）。

以Nginx为例：

你需要在Nginx的配置文件中添加一个server块或修改现有的location块，指向你部署静态文件的目录。

# /etc/nginx/sites-available/your_website.conf
server {
    listen 80;
    server_name your_domain.com www.your_domain.com; # 你的域名

    root /var/www/your_website_path; # 指向你部署静态文件的目录

    index index.html index.htm; # 默认索引文件

    location / {
        try_files $uri $uri/ =404; # 尝试查找文件或目录，否则返回404
    }

    # 如果有其他需求，例如SSL配置，可以后续添加
}

配置完成后，创建符号链接并测试Nginx配置，然后重载Nginx服务：

sudo ln -s /etc/nginx/sites-available/your_website.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx # 或者 restart

总结工作流程：

  1. 代码提交：  你在本地开发完成，将最新代码git push到GitHub仓库的main分支。

  2. GitHub Actions触发：  GitHub检测到main分支的push事件，自动启动Deploy Static Website工作流程。

  3. Runner启动：  GitHub分配一个Ubuntu Runner虚拟机。

  4. 检出代码：  Runner将你的仓库代码克隆到其文件系统中。

  5. 环境准备：  安装Node.js（或其他语言环境）和项目依赖。

  6. 构建项目：  执行npm run build等命令，生成最终的静态文件（例如HTML、CSS、JS、图片）。

  7. SSH连接与部署：

    • appleboy/ssh-action使用你在GitHub Secrets中配置的私钥和服务器信息，通过SSH连接到你的服务器。
    • 在服务器上执行script中定义的命令：创建目录、清理旧文件、将Runner上构建好的静态文件复制到服务器的指定目录，并设置正确的权限。

  8. Web服务器渲染：

    • 一旦文件被复制到服务器上的指定目录，Web服务器（如Nginx）会立即开始提供这些新的静态文件。
    • 用户访问你的域名时，Nginx会从/var/www/your_website_path中读取并渲染出最新的网站内容。

这个流程实现了从代码变更到网站更新的全自动化部署，大大提高了开发效率和部署的可靠性。

avatar
文章
阅读
粉丝