前端项目自动化部署

前言：为了提升开发效率，原计划用 jenkins+git 进行项目自动化部署，但由于公司做的是银行业务，银行的代码只能通过固定的内网ip访问，而银行代码git托管和部署服务器之间又不能相互通信，于是写了两个插件发布到npm和github上，大家可以通过配置方式来实现自动化部署。

webpack或者vue-cli环境实现方式

• 安装插件 # webpack-automatic-deployment

npm install webpack-automatic-deployment --save-dev
# OR
yarn add webpack-automatic-deployment --dev
# OR
pnpm add webpack-automatic-deployment --save-dev

• Usage 使用方法

  webpack使用方法：配置webpack.config.js

  const WebpackAutomaticDeployment = require("webpack-automatic-deployment");
  
  module.exports = {
    plugins: [new WebpackAutomaticDeployment({
        host: 'your server ip',
        username: 'your server users',
        password: 'your server password',
        remotePath: 'your project path on the server '
      })],
  };
  

  vue cli使用方法：配置vue.config.js

  const WebpackAutomaticDeployment = require("webpack-automatic-deployment");
  
  module.exports = {
      configureWebpack: {
          plugins: [
              new WebpackAutomaticDeployment({
                host: 'your server ip',
                username: 'your server users',
                password: 'your server password',
                remotePath: 'your project path on the server '
              })
          ]
      }
  };
  

💪 配置好后，运行 npm run build 命令即可实现代码打包后自动上传部署至服务器

⚠️ 特别注意：

• 1.项目中配置的要有process.env.NODE_ENV为production的值，否则插件不会生效
• 2.服务器上的项目路径要指定到项目文件夹，因为每次上传前会先删除文件夹
  • 如：您项目上传服务器的地址为：/root/www，你的项目文件夹名为 project_demo，那么对应配置的时候remotePath的值应为：/root/www/project_demo

vite环境实现方式

• 安装插件 # vite-plugin-auto-deploy

npm install vite-plugin-auto-deploy --save-dev
# OR
yarn add vite-plugin-auto-deploy --dev
# OR
pnpm add vite-plugin-auto-deploy --save-dev

• Usage 使用方法
  • 配置 vite.config.ts

  import autoDeployPlugin from 'vite-plugin-auto-deploy'
  
  export default defineConfig({
    plugins: [
      autoDeployPlugin({
          host: 'your server ip',
          username: 'your server users',
          password: 'your server password',
          remotePath: 'your project path on the server '
      })
    ]
  })
  

⚠️ 注意事项： 同上

⚠️ 如果您觉得插件用的不错，请在github上点个 start 支持一下