Home
avatar

Mu

个人博客快速自动部署到自己的服务器

一点字 0分钟 Code

自己之前博客的文章都是使用WebStorm连接上服务器的FTP，打包之后手动提交到服务器，太麻烦，所以想找一个自动部署的方案。

🚀 使用 GitHub Actions 自动部署前端项目到云服务器

实现前端项目的自动化部署可以显著提升开发效率。GitHub Actions 提供了强大的自动化能力，让你能够在代码推送至特定分支后，自动完成构建、测试和部署到云服务器的全过程。

📋 前期准备

  1. 云服务器配置：
  • 创建对应网站
  • 开放 ssh 对应端口 22
  1. 生成 SSH 密钥对​：
  • 在本地终端运行 ssh-keygen -t rsa -b 4096 -C “Github Action”生成密钥对。这将产生一个私钥（如 id_rsa）和一个公钥（如 id_rsa.pub） （注意：mac电脑，win没试）
  1. 配置服务器 SSH 访问​：
  • 将公钥内容添加到服务器的 ~/.ssh/authorized_keys 文件中。这可以通过手动编辑文件或使用 ssh-copy-id 命令实现。
  • 下方这条指令把本机用户目录下的 id_rsa.pub 文件发送到服务器root用户的 home 目录下，并添加到 authorized_keys 文件中
ssh-copy-id -i ~/.ssh/id_rsa.pub root@你的IP
  • 最后测试 SSH 密钥登录，确保无需密码即可连接到服务器：ssh root@你的服务器，如果成功登录，说明配置成功。
  1. 配置 GitHub Secrets 存储私钥：
  • 在 GitHub 仓库中，导航到 Settings > Secrets and variables > Actions。
  • 点击 New repository secret，添加以下加密变量（Secrets），这些变量将在工作流文件中使用：
    • SSH_PRIVATE_KEY：你的私钥内容（id_rsa 文件内容）
    • SSH_HOST：你的服务器 IP 地址
    • SSH_USER：你的服务器用户名（如 root）
    • SSH_PORT：SSH 端口号（默认 22）
    • TARGET：服务器上部署项目的目标路径（例如 /var/www/html）

⚙️ 配置 GitHub Actions 工作流

在你的项目根目录下创建 .github/workflows文件夹，并在其中创建一个 YAML 文件（如 deploy.yml）来定义工作流。

基本工作流示例 (使用 SCP 进行文件传输) 以下是一个基础的工作流配置示例，它在代码推送到 main 分支时触发，负责拉取代码、安装依赖、构建项目，并通过 SCP 将构建产物传输到云服务器。 工作流文件内容如下：

name: Deploy to Server  # 工作流的名称

on:  # 指定触发工作流的事件
  push:
    branches: [ main ]  # 当代码推送到 main 分支时触发

jobs:
  build-and-deploy:  # 定义一个名为 build-and-deploy 的任务
    runs-on: ubuntu-latest  # 使用最新的 Ubuntu 系统作为运行环境

    steps:  # 定义任务中的各个步骤
      - name: Checkout code  # 步骤1：检出代码
        uses: actions/checkout@v3  # 使用 GitHub 官方的 checkout Action 来获取仓库代码

      - name: Setup Node.js  # 步骤2：设置 Node.js 环境
        uses: actions/setup-node@v3
        with:
          node-version: '18'  # 指定 Node.js 版本，请根据你的项目要求调整

      - name: Install dependencies and build  # 步骤3：安装依赖并构建项目
        run: |  # 执行一系列 shell 命令
          npm install
          npm run build

      - name: Deploy to Server  # 步骤4：部署到服务器
        uses: appleboy/scp-action@v0.1.5  # 使用 SCP Action 进行文件传输
        with:  # 配置 SCP Action 的参数
          host: ${{ secrets.SERVER_HOST }}  # 服务器 IP，从 Secrets 中读取
          username: ${{ secrets.SERVER_USER }}  # 服务器用户名，从 Secrets 中读取
          key: ${{ secrets.SSH_PRIVATE_KEY }}  # SSH 私钥，从 Secrets 中读取
          port: ${{ secrets.PORT }}  # SSH 端口，从 Secrets 中读取（可选，默认22）
          source: "dist/*"  # 要传输的本地文件或目录（构建产物）
          target: ${{ secrets.TARGET }}  # 服务器上的目标路径，从 Secrets 中读取

自此每次编辑好博文提交到git上之后就会自动执行工作流上传到服务器对应目录。

GitHub Actions 自动部署 云服务器