Screenshot Erfolgreiches Deployment mit BitBucket Pipelines und gulp mit Bower
Automatisches Deployment auf S3-Buckets mit BitBucket Pipelines Zurück zur Startseite
3 Minuten 17.03.2017thomaskekeisen.de
Aus dem Leben eines Bildschirmarbyters
Achtung: Diese Seite enthält Partner- und Werbe-Links. Daher ist diese Seite im Gesamten als Werbeanzeige zu verstehen!
Mehr Zeit für Softwareentwicklung dank smarter Workflows
Atlassian hat mit BitBucket schon länger eine sehr brauchbare Alternative zum Git-Repository-Hoster GitHub am Markt, die sich dank kostenloser, privater Repositories auch für kommerzielle nicht-Open-Source-Projekte eignet. Seit einigen Monaten bietet Atlassian mit BitBucket Pipelines außerdem einen Dienst an, um Code automatisch in der Cloud zu testen und anschließend zu deployen respektive zu veröffentlichen und steht damit in direkter Konkurrenz zu vergleichbaren Diensten wie beispielsweise Codeship.
Das heißt, ich muss nicht mehr manuell und aktiv ein Update der Server von meinem Computer aus starten sondern BitBucket Pipelines erstellt mit Docker eine sehr kompakte, virtuelle Laufzeitumgebung in der Cloud, die alle benötigten Programme und Bibliotheken enthält, um das komplette Softwareprojekt zu testen und anschließend zu veröffentlichen. Hierbei spielt es keine Rolle, wie und wo die Server konfiguriert sind. Ich muss dann lediglich meinen Code in den richtigen Git-Branch pushen und es werden automatisch alle betroffen Produktiv- oder Test-Systeme aktualisiert.
In diesem Blog-Artikel beschreibe ich das automatische Deployen einer statischen Webseite auf einen S3-Bucket von Amazon, die zuvor mit gulp generiert wurde.
Die funktionierende bitbucket-pipelines.yml
Nach einigen Versuchen war ich mit dem Docker-Image kubasek/nodejs-bower-gulp erfolgreich. Das Image kommt bereits mit vorinstalliertem node.js, gulp und dem Package-Manager Bower. Das untenstehende Script läuft immer, wenn ein Commit auf den develop -Branch gepusht wurde. Im Anschluss werden alle für das Deployment benötigten Pakete installiert, dann alle Abhängigkeiten an Web-Bibliotheken aufgelöst und die Veröffentlichung über von mir selbst implementierte gulp-Scripte angestoßen.
bitbucket-pipelines.yml
image: kubasek/nodejs-bower-gulp
pipelines:
branches:
develop:
- step:
script:
- node --version
- npm --version
- npm install --unsafe-perm
- bower -V --allow-root install
- gulp build
- gulp deployStagingS3
- echo "Frontend has been successfully deployed on staging!"
Abschließendes Deployment mit gulp
Das eigentliche Deployment läuft über das gulp-Plugin gulp-awspublish. Außerdem verwende ich noch das Modul concurrent-transform um mehrere Dateien gleichzeitig auf den S3-Bucket hochzuladen. Dank eingebautem Cache-Feature dauert ein Deployment so nur wenige Sekunden. Das Deployment-Script ( gulp deployStagingS3 ) basiert darauf, dass zuvor bereits ein dist -Ordner generiert wurde, der die fertige Webseite enthält. In meinem Fall geschieht dies durch gulp build .
var config = require('./config/config');
var parallel = require('concurrent-transform');
gulp.task('deployStagingS3', function() {
var publisher = plugins.awspublish.create(
{
region: config.s3.staging.region,
accessKeyId: config.s3.staging.accessKeyId,
secretAccessKey: config.s3.staging.secretAccessKey,
params: {
Bucket: config.s3.staging.bucket
}
}, {
cacheFileName: config.s3.staging.cacheFile
}
);
return gulp.src('dist/**/*')
.pipe(parallel(publisher.publish(), 10))
.pipe(publisher.cache())
.pipe(publisher.sync())
.pipe(plugins.awspublish.reporter())
;
});
Ich habe meine Konfigurationen zur besseren Übersicht in eine separate Datei ausgelagert:
./config/config.js
module.exports = {
s3: {
staging: {
accessKeyId: 'foo',
bucket: 'bucket-name',
cacheFile: './.s3_cache_staging',
region: 'eu-central-1',
secretAccessKey: 'bar'
}
}
};