前言

虽随着前端工程技术的不断进步，什么工程化、自动化已经是老生常谈，这里就不多说，简单总结分享一下我接触的代码自动化部署流程，欢迎讨论，欢迎指导

涉及知识点

gitlab CI/CD NodeJS

基本流程

前提是你的项目使用gitlab管理，且使用了CI/CD

在.gitlab-ci.yml文件上添加部署流程

deploy-job:
  stage: deploy
  cache:
    key: 'xx_node_modules'
    paths:
      - node_modules/
  #执行部署脚本   
  script:
    - bash ./deploy.sh
    
  #只对master分支生效
  only:
    - master
    
  #这里选择了上库之后，手工部署，因为不是每次上库都需要部署
  when: manual

添加部署的deploy.sh脚本，用来执行node命令

#!/bin/bash

echo "current dir: $(pwd)";
echo "----install node_modules start at $(date '+%F %T')----";

#安装依赖
time yarn install

if [ $? != 0 ]; then
    echo "install node_modules fail";
    exit 1;
fi

echo "----building start at $(date '+%F %T')----";

#项目的build指令，构建项目
time yarn build

if [ $? != 0 ]; then
    echo "build fail";
    exit 1;
fi

echo "----copy files start at $(date '+%F %T')----";

#拷贝构建好的的代码到服务器
time yarn copy

if [ $? != 0 ]; then
    echo "copy fail";
    exit 1;
fi

在package.json那里添加copy命令，用来将代码拷贝到指定的服务器

"scripts": {
    "build": "vite build",
    "copy": "node ./scripts/copy.js"
  },

copy.js脚本，负责拷贝到服务器

const client = require('scp2');
const path = require('path');
// node.js 命令行环境的 loading效果和显示各种状态的图标
const ora = require('ora');
// nodejs 终端样式库
const chalk = require('chalk');
// 终端提示语，process.env：当前进程环境
const spinner = ora('正在部署到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试') + '服务器...');

spinner.start();

// 前端代码
client.scp(
    // 需要部署的代码目录，也就是构建出来后
    path.join(__dirname, '../dist'),
    {
        // 服务器地址
        host: '192.163.0.0',
        port: 22,
        // 服务器用户名
        username: 'root',
        // 服务器密码，这里可以是明文，一般是在CD/CD上设置一个加密变量，我这里设置为DEPLOY_PASSWORD，这样在CI/CD上可以直接拿到
        password: process.env.DEPLOY_PASSWORD,
        // 服务器部署路径
        path: '/var/usr/client/ui',
    },
    function (err) {
        spinner.stop();

        if (err) {
            console.log(chalk.red('部署前端代码失败.\n'));
        } else {
            console.log(
                chalk.green('Success! 成功前端代码部署到' + (process.env.NODE_ENV === 'prod' ? '生产' : '测试') + '服务器! \n'),
            );
        }
    },
);

通过以上步骤，代码合并之后，点击部署就可以了

你是如何部署你的代码的？

前言

涉及知识点

基本流程

前提是你的项目使用gitlab管理，且使用了CI/CD

相关知识