手把手带你实现React+Vite+TS项目的CICD_react18+ts+vite 从0自定义组件库实战复杂项目-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42745647/article/details/131618263

本文介绍了如何使用GithubAction进行持续集成和持续交付(CICD)，特别针对React项目。通过创建workflows文件并配置自动化流程，包括代码检查、依赖安装、构建、测试和Rsync同步到服务器，实现了一种简单的CICD方案。同时，文中提到了SSH私钥的设置和处理RSYNC退出代码127的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文节选自本人博客：前端工程化 - Github Action 实现 CICD

💖 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
📝 优快云主页：爱吃糖的猫🔥
📣 我的博客：爱吃糖的猫
📚 Github主页: MilesChen
🎉 支持我：点赞👍+收藏⭐️+留言📝
💬介绍：The mixture of WEB+DeepLearning+Iot+anything🍁

前言

CI/CD（Continuous Integration and Continuous Delivery）即指持续集成与持续交付。它是一种软件开发流程和方法论，旨在通过自动化和频繁的代码集成、构建、测试和部署，实现快速、可靠的软件交付。实现的方式有很多比如gitlab、Jenkins、docker、k8s 。本文要手把手带大家实现最简单的方式Github Actions。本文部署的是React的项目，大致思路与是PR触发Github Actions，先安装项目依赖环境，再执行Build，最后使用Rcync同步打包后的文件到服务器指定路径中。

workflows文件创建

在项目根目录下创建./github/workflows/main.yml文件。并将下面的yml内容粘进去。on是监听触发事件，我这里使用的PR触发方式，你可以改成push指定分支触发。jobs是一系列的任务流，可以根据你的需求更改，因为的项目使用了pnpm维护，所以需要执行npm install -g pnpm，没有test程序则可以跳过。

name:
  FileMaster frontend 生产环境部署
# 监听 dev 分支上的 push 事件
# on:
#   push:
#     branches:
#       - dev
# 监听 main 分支上的 pull_request 事件
on:
  pull_request:
    types:
      - closed
# 分支合并后后执行一系列的任务
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install node.js
        # 使用action库  actions/setup-node安装node
        uses: actions/setup-node@main
        with:
          node-version: lts/*

      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install dependencies
        run: pnpm i

      # 暂时没有编写test程序，可跳过
      # - name: Test
      #   run: pnpm test

      - name: Build
        run: pnpm build

      - name: Deploy to server
        # 使用ssh-deploy@v2.2.5版本更加稳定
        uses: easingthemes/ssh-deploy@main
        env:
          # 私钥
          SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
          # SCP参数
          ARGS: '-avzr --delete'
          # 源目录
          SOURCE: 'dist/'
          # 服务器ip
          REMOTE_HOST: ${{ secrets.REMOTE_TXHOST }}
          # 用户
          REMOTE_USER: 'user'
          # 目标地址
          TARGET: '/www/wwwroot/cd.mileschen.cn'

Deploy to server

Deploy to server这步是使用Rcync工具同步打包后的文件到服务器指定路径去。
相关的参数详细解释：

SSH_PRIVATE_KEY：SSH连接的私钥，这里使用secrets的方式传入
ARGS：是Rcync工具的参数
SOURCE：打包后的目录
REMOTE_HOST：服务器IP，这里使用secrets的方式传入
TARGET：上传到服务器存放的路径

`SSH_PRIVATE_KEY`

先在服务器执行ssh-keygen生成 ssh 公钥、私钥对。
查看私钥 cat ~/.ssh/id_rsa 内容，设置到 github secrets 变量 PRIVATE_KEY 中。

一定要注意这里有个换行
查看公钥 cat ~/.ssh/id_rsa.pub 内容，将内容添加到云服务器的 ~/.ssh/authorized_keys 文件中，可以使用vim ~/.ssh/authorized_keys 编辑，然后将公钥粘贴进去。