低成本实现前端项目自动部署：从0到1摸索webhook的使用

前端

2023-11-13 23:00:40

前言

对于前端开发者来说，项目部署是一项繁琐且耗时的任务。随着项目的不断迭代，手动部署变得越来越不可行。自动部署可以帮助我们摆脱繁琐的手工操作，让项目在每次代码更新时自动发布到指定平台。

入门准备

在开始之前，你需要确保已经拥有以下资源：

GitHub 账户
Git 客户端（如 Git Bash 或 GitHub Desktop）
Node.js 和 npm（Node.js包管理器）
一个可供项目部署的服务器或平台

搭建自动部署流程

1. 创建 GitHub Webhook

登录 GitHub，进入你的项目仓库。点击“Settings” -> “Webhooks” -> “Add webhook”。在“Payload URL”字段中，输入你部署脚本的 URL。在“Content type”字段中，选择“application/json”。点击“Add webhook”完成创建。

2. 编写部署脚本

使用你喜欢的文本编辑器创建一个新的文件，命名为“deploy.js”。在文件中，编写如下代码：

const { exec } = require('child_process');

// 获取代码库的最新代码
exec('git pull', (err, stdout, stderr) => {
  if (err) {
    console.error(err);
    return;
  }

  // 安装依赖项
  exec('npm install', (err, stdout, stderr) => {
    if (err) {
      console.error(err);
      return;
    }

    // 构建项目
    exec('npm run build', (err, stdout, stderr) => {
      if (err) {
        console.error(err);
        return;
      }

      // 部署项目
      exec('npm run deploy', (err, stdout, stderr) => {
        if (err) {
          console.error(err);
          return;
        }

        console.log('项目已成功部署！');
      });
    });
  });
});