Möchte man bspw. ein VueJS/JS Projekt auf einem Webserver veröffentlichen, hat man in der Regel ein NPM-Script um die Distribution zu erzeugen, in meinem Fall npm run build. In meinem VueJS-Projekt steht in der package.json:
„build“: „vue-cli-service build“,
Nach dem Build-Prozess möchte ich nun die erzeugte Distribution, die im Verzeichnis ‚/dist/‘ erstellt wurde via SFTP auf einen Webserver hochladen.
Die Vue CLI Service benutzt intern Webpack. Möchte man die Webpack-Konfiguration erweitern kann man dazu, falls nicht schon vorhanden, im Root-Verzeichnis eine Datei vue.config.js erstellen mit folgendem Code:
module.exports = {
configureWebpack: {
plugins:
[
]
}
}; Jetzt installiere ich das Webpack Plugin https://github.com/ferpinan/webpack-sftp-upload-plugin mit:
npm i -D webpack-ftp-upload-plugin
Anschließend ergänze ich den Code im Plugins-Block der vue.config.js um folgende Zeilen:
new WebpackFtpUpload({
host: 'host (z.B. example.com)',
port: '22', // default: 22
username: 'MyUser',
password: 'MyPassword',
local: '/var/www/html/my-project/dist',
path: '/var/www/html/my-project/dist',
}) Nach dem der Build-Prozess mit npm run build abgeschlossen ist, wird das Verzeichnis ‚/var/www/html/my-project/dist‘ auf dem Remote Server erzeugt und die Dateien kopiert. Deployment abgeschlossen.
Ergänzung: Das Plugin wird so auch bei npm start verwendet und die Dateien werden via SFTP kopiert. In der Regel möchte man das Plugin aber nur bei build nutzen. Dazu ändert man die vue.config.js, wie folgt:
process.env.NODE_ENV==='production' ? new WebpackFtpUpload({
host: 'host (z.B. example.com)',
port: '22', // default: 22
username: 'MyUser',
password: 'MyPassword',
local: '/var/www/html/my-project/dist',
path: '/var/www/html/my-project/dist',
}): trueJetzt werden die Dateien nur bei npm start build kopiert.