前端项目一键自动化部署，解放你的双手，一键下班

前端

2024-02-12 19:21:41

前端项目自动化一键部署

作为程序员，我们经常在完成繁忙的开发任务后，兴高采烈地进行测试并准备上线。然而，这时我们却会发现一些需要修改的 bug。每次修改完成后，都需要手动登录服务器并进行部署，不仅麻烦还浪费时间。

为了解决这一问题，前端项目自动化一键部署应运而生。它基于持续集成和持续部署 (CI/CD) 的思想，通过编写脚本，实现代码修改后自动部署到服务器，解放我们的双手，一键下班，享受愉悦轻松的开发时光。

准备工作

选择 CI/CD 平台
推荐使用 GitHub Actions、Jenkins 或 Travis CI 等平台。

安装 Node.js
自动化部署脚本将使用 Node.js 编写。

创建部署脚本
编写一个脚本，用于自动部署代码到服务器。脚本内容可参考示例。

设置 CI/CD 配置
在 CI/CD 平台上设置配置，触发代码修改后自动运行部署脚本。

具体步骤

1. 编写部署脚本
在项目根目录下创建 deploy.js 文件，并输入：

// 导入模块
const fs = require('fs');
const path = require('path');
const childProcess = require('child_process');

// 获取项目根目录
const projectRoot = path.resolve(__dirname, '..');

// 构建项目
childProcess.execSync('npm run build', { cwd: projectRoot });

// 部署项目
childProcess.execSync('rsync -avz ./dist/ user@host:/path/to/deploy/directory', { cwd: projectRoot });

2. 设置 CI/CD 配置
在 CI/CD 平台上，设置配置触发代码修改后自动运行 deploy.js 脚本。以 GitHub Actions 为例：

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Deploy
        run: npm install && npm run deploy