vue-cli-plugin-ftp-deploy

vue-cli-plugin for deploying via ftp

Installation

via command line

vue add ftp-deploy

via Vue UI

Click Plugins -> Add plugin
search for ftp-deploy
install it
*** don't forget to click 'Finish installation' to generate config file

the plugin will generate ftpdeploy folder and config.js inside

Before Use

add this to your .env.local

ftpHost = your-ftp-host
ftpPort = your-ftp-port
ftpUsr  = your-ftp-username
ftpPwd  = your-ftp-password

or

VUE_APP_ftpHost = your-ftp-host
VUE_APP_ftpPort = your-ftp-port
VUE_APP_ftpUsr  = your-ftp-username
VUE_APP_ftpPwd  = your-ftp-password

example

VUE_APP_ftpHost = 127.0.0.1
VUE_APP_ftpPort = 21
VUE_APP_ftpUsr  = usr@localhost
VUE_APP_ftpPwd  = pwdpwdpwd

Default Settings

default ftpdeploy/config.js

module.exports = {
  localBasePath: "/",
  remoteBasePath: "/",
  sync: [{ src: "/dist", dest: "/" }]
};

By default, will upload everything in /dist folder to base path of your remote server.

Usage

add more settings in ftpdeploy/config.js

module.exports = {
  localBasePath: "/",
  remoteBasePath: "/test_ftp_deploy/",
  del: ["/folder0/", "/folder1", "folder2", "folder3/folder4"],
  // folder0, folder1, folder2, folder4 on remote server will be deleted
  clear: ["folder5", { dir: "folder6", test: "*.js" }],
  // folder5 will be empty, folder6's all .js files will be deleted
  // `test` use minimatch to match
  create: ["folder7", "folder8/folder9", { dir: "folder10", perm: "777" }],
  // create folder7, folder8, folder8/folder9, folder10 with permission 777 (chmod command)
  sync: [
    { src: { dir: "/dist", ignore: "dist/css/**" }, dest: "/" },
    // `ignore` use glob to match
    { src: "/api", dest: "/api/" },
    { src: "foo/cfg", dest: "/cfg" }
  ]
};

More info about minimatch here. More info about glob pattern here. The plugin will delete, clear, create then upload.

Config.js Setting

Parameters	Detail
localBasePath	local path relative to project path
remoteBasePath	remote path on the server
del	array of directory to delete
clear	array of directory to clear it's content
create	array of directory to create
sync	array of source ==> destination folder to upload

Vue UI Setting

Parameters	Default Value	Detail
config.js location	/ftpdeploy/	setting file
path to write hist.json	/ftpdeploy/	md5 of file content, use for upload changed file only mode
gen file checksum	true	save md5 of uploaded files as hist.json
upload diff file from hist only	true	will upload only changed file only

Command Line Setting

Add command to 'scripts' part of package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/"
  },

Now you can

npm run deploy

or

yarn deploy

Deploy to Multiple Sites

An example for different build configuration and different deploy target i.e. site2

.env.site2.local

NODE_ENV=production
VUE_APP_ftpHost = 127.0.0.2
VUE_APP_ftpPort = 21
VUE_APP_ftpUsr  = usr2@localhost
VUE_APP_ftpPwd  = pwd2pwd2pwd2

Add another build command to 'scripts' part of package.json to build with site2 mode which will use above env file and set /site2 as built destination.

Add another deploy command to 'scripts' part of package.json to deploy with site2 mode and use /ftpdeploy_site2 as configuartion directory.

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "deploy": "vue-cli-service ftpdeploy --genHist --diffFileOnly --ftpCfgPath /ftpdeploy/ --ftpHistPath /ftpdeploy/",
    "build:site2": "vue-cli-service build --mode site2 --dest site2",
    "deploy:site2": "vue-cli-service ftpdeploy --mode site2 --genHist --diffFileOnly --ftpCfgPath /ftpdeploy_site2/ --ftpHistPath /ftpdeploy_site2/"
  },

then duplicate /ftpdeploy or create another folder i.e. /ftpdeploy_site2 and change /ftpdeploy_site2/config.js to

module.exports = {
  localBasePath: "/",
  remoteBasePath: "/",
  sync: [{ src: "/site2", dest: "/" }]
};

Now you can

npm run deploy:site2

or

npm run build:site2 && npm run deploy:site2