Sebelumnya untuk deploy via FTP, saya biasa menggunakan git-ftp. Untuk proyek-proyek backend, git-ftp sangat pas untuk kebutuhan saya biar nggak perlu pilih file 1-1 yang perlu diunggah. Ini karena git-ftp memanfaatkan commit git untuk menentukan file mana saja yang akan diunggah.
Tapi ketika saya mengerjakan proyek frontend, maka semua file source juga akan terunggah karena masuk di commit. Sedangkan yang saya inginkan hanya file-file di dalam folder dist hasil compile webpack. Dari situ saya coba buat cari package FTP di NodeJS dan menemukan ftp-deploy.
Saya hanya butuh file-file saya terunggah dengan baik dan tampilan yang cantik di terminal. Konfigurasi lain-lain tidak terlalu butuh sih. Jadi saya coba explore package chalk dan ora. Chalk ini sangat useful untuk membuat terminal jadi warna-warni. Dan ora memberikan loading spinner cantik seperti yang dipakai Yarn.
Dan ini adalah deploy script yang saya buat:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const FtpDeploy = require('ftp-deploy'); | |
| const chalk = require('chalk'); | |
| const ora = require('ora'); | |
| const logSymbols = require('log-symbols'); | |
| const deployer = new FtpDeploy(); | |
| const config = { | |
| username: 'your-ftp-username', | |
| password: 'your-ftp-password', | |
| host: 'your-server.com', | |
| port: 21, | |
| localRoot: __dirname + '/dist', | |
| remoteRoot: '/', | |
| exclude: ['.DS_Store'] | |
| } | |
| console.log(chalk.blue('Launching deploy ship…')); | |
| console.log(chalk.blue('========================')); | |
| const connectSpinner = ora('Contacting server').start(); | |
| const progressSpinner = ora('Uploading'); | |
| const fileSpinner = ora(); | |
| deployer.deploy(config, function(err) { | |
| if (err) { | |
| connectSpinner.fail(chalk.red('ERROR') + ' ' + err.message); | |
| process.exit(1); | |
| } else { | |
| console.log(chalk.green(logSymbols.success + ' DEPLOY SUCCESS')); | |
| process.exit(); | |
| } | |
| }); | |
| deployer.on('error', function(err) { | |
| connectSpinner.fail(chalk.red('ERROR') + ' ' + err.message); | |
| }); | |
| const progress = {}; | |
| deployer.on('uploading', function(data) { | |
| if (data.transferredFileCount < 1) connectSpinner.succeed('Start uploading process'); | |
| progress[data.filename] = ora('[ ' + (data.transferredFileCount + 1) + '/' + data.totalFileCount + ' ] ' + data.filename).start(); | |
| }); | |
| deployer.on('uploaded', function(data) { | |
| progress[data.filename].succeed(); | |
| }); |
Outputnya seperti di screenshot di atas. Ohya, tinggal tambahkan "deploy": "node deploy.js" di bagian scripts di package.json dan jalankan dengan yarn run deploy biar dapat bonus running time dari Yarn.