专为前端开发者准备的自动化部署

一、GitHub(gitee没试过应该也是同理)仓库管理项目
二、购买云服务器(我使用的是阿里云)
三、搭建服务器环境(使用rsync)
四、配置git Actions（重点）

---

一、GitHub(gitee没试过应该也是同理)仓库管理项目

1. 可以根据自己的项目来起仓库名字,这地方不重要

二、购买云服务器(我使用的是阿里云)

因为这个真的真的很简单 所以我就不演示了(毕竟让人花钱的事情 ,谁不会呢[嘿嘿])

系统记得选择Debian 11 

三、搭建服务器环境(使用rsync)

在服务器上需要安装一个工具 叫rsync 这个直接用sudo安装就行 , 如果不安装的话 后面出现这种错误 

四、配置git Actions（重点）

1. 找到 actions 点击 set up a workflow yourself

2. 编写工作流文件

这个配置文件是可以直接用的 

name: Deploy  to Server
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 1. 检出代码（含子模块）
      - name: Checkout with Submodules
        uses: actions/checkout@v4
        with:
          submodules: recursive

      # 2. 设置 Node.js
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      # 3. 设置依赖缓存
      - name: Cache dependencies
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${
  
  { runner.os }}-npm-${
  
  { hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${
  
  { runner.os }}-npm-

      # 4. 安装依赖
      - name: Install Dependencies
        run: npm install
        env:
          CI: true

      # 5. 构建项目
      - name: Build Project
        run: npm run build
        env:
          NODE_OPTIONS: "--max_old_space_size=4096"  # 防止内存不足

      # 6. 部署到服务器
      - name: Deploy with rsync
        uses: easingthemes/ssh-deploy@v2.2.0
        env:
          SSH_PRIVATE_KEY: ${
  
  { secrets.SSH_PRIVATE_KEY }}
          REMOTE_HOST: ${
  
  { secrets.REMOTE_HOST }}
          REMOTE_USER: ${
  
  { secrets.REMOTE_USER }}
          REMOTE_PORT: ${
  
  { secrets.REMOTE_PORT }}
          SOURCE: "/dist/"
          TARGET: ${
  
  { secrets.REMOTE_TARGET }}
          ARGS: "-rltgoDzvO --delete"

      # 7. 清理旧构建产物（可选）
      - name: Cleanup
        run: |
          rm -rf node_modules/
          rm -rf dist/

 上面有多个从github环境变量中取值的, 我们只需要看secrets,runmeros不需要管,

结尾 

配置完后 就可以看到 自己每一次push到main分支的资源会自动化打包部署到服务器你指定的路径