Sie haben hart gearbeitet, um schnell zu arbeiten. Sorgen Sie jetzt dafür, dass Sie schnell bleiben. Dazu automatisieren Sie Leistungstests mit Lighthouse Bot.
Lighthouse klassifiziert Ihre App in fünf Kategorien. Eine davon ist die Leistung. Sie können versuchen, Leistungsänderungen mit den DevTools oder der Lighthouse CLI bei jeder Bearbeitung des Codes im Blick zu behalten. Dies ist jedoch nicht erforderlich. Tools können Ihnen die mühsame Arbeit machen. Travis CI ist ein hervorragender Dienst, der jedes Mal, wenn Sie neuen Code per Push-Funktion übertragen, automatisch Tests für Ihre Anwendung in der Cloud ausführt.
Lighthouse Bot lässt sich in Travis CI einbinden. Durch die Budgetfunktion wird dafür gesorgt, dass Sie nicht versehentlich die Leistung herabstufen. Sie können Ihr Repository so konfigurieren, dass es keine Zusammenführung von Pull-Anfragen zulässt, wenn die Lighthouse-Werte unter den von Ihnen festgelegten Grenzwert fallen (z.B. < 96/100).
Obwohl Sie die Leistung auf localhost testen können, schneidet Ihre Website auf Live-Servern häufig unterschiedlich ab. Für ein realistischeres Bild empfiehlt es sich, die Website auf einem Staging-Server bereitzustellen. Sie können jeden beliebigen Hostingdienst verwenden. Mit dieser Anleitung können Sie Firebase Hosting ausprobieren.
1. Einrichtung
Mit dieser einfachen App kannst du drei Zahlen sortieren.
Klonen Sie das Beispiel aus GitHub und fügen Sie es Ihrem GitHub-Konto als Repository hinzu.
2. In Firebase bereitstellen
Sie benötigen ein Firebase-Konto. Anschließend erstellen Sie ein neues Projekt in der Firebase Console, indem Sie auf „Projekt hinzufügen“ klicken:
In Firebase bereitstellen
Sie benötigen Firebase CLI, um die Anwendung bereitzustellen. Auch wenn Sie die Anwendung bereits installiert haben, empfiehlt es sich, die Befehlszeile mit diesem Befehl regelmäßig auf die neueste Version zu aktualisieren:
npm install -g firebase-tools
Führen Sie folgenden Befehl aus, um die Firebase CLI zu autorisieren:
firebase login
Initialisieren Sie nun das Projekt:
firebase init
Während der Einrichtung werden Ihnen in der Konsole einige Fragen gestellt:
- Wenn Sie zur Auswahl von Funktionen aufgefordert werden, wählen Sie "Hosting" aus.
- Wählen Sie für das Firebase-Standardprojekt das Projekt aus, das Sie in der Firebase Console erstellt haben.
- Geben Sie "public" als öffentliches Verzeichnis ein.
- Geben Sie „N“ (no) ein, um die App als Single-Page-App zu konfigurieren.
Bei diesem Vorgang wird eine firebase.json-Konfigurationsdatei im Stammverzeichnis Ihres Projektverzeichnisses erstellt.
Herzlichen Glückwunsch, Sie können jetzt mit der Bereitstellung beginnen. Führen Sie den folgenden Befehl aus:
firebase deploy
In Sekundenschnelle haben Sie eine Live-App.
3. Travis einrichten
Sie müssen ein Konto bei Travis registrieren und dann die GitHub-Apps-Integration im Bereich „Settings“ (Einstellungen) Ihres Profils aktivieren.
Sobald Sie ein Konto haben,
Rufen Sie unter Ihrem Profil die Einstellungen auf, klicken Sie auf die Schaltfläche „Konto synchronisieren“ und prüfen Sie, ob Ihr Projekt-Repository in Travis aufgeführt ist.
Für den Start der kontinuierlichen Integration benötigen Sie zwei Dinge:
- Um eine
.travis.yml-Datei im Stammverzeichnis zu haben - So lösen Sie einen Build durch Ausführung eines regulären alten Git-Push-Befehls aus:
Das Repository lighthouse-bot-starter hat bereits eine YAML-Datei vom Typ .travis.yml:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
Die YAML-Datei weist Travis an, alle Abhängigkeiten zu installieren und Ihre App zu erstellen. Jetzt sind Sie an der Reihe, die Beispiel-App in Ihr eigenes GitHub-Repository zu übertragen. Führen Sie, falls noch nicht geschehen, den folgenden Befehl aus:
git push origin main
Klicken Sie in Travis unter Settings (Einstellungen) auf Ihr Repository, um das Travis-Dashboard Ihres Projekts anzuzeigen. Wenn alles in Ordnung ist, ändert sich der Build innerhalb weniger Minuten von gelb zu grün. 🎉
4. Firebase-Bereitstellung mit Travis automatisieren
In Schritt 2 haben Sie sich in Ihrem Firebase-Konto angemeldet und die App mit firebase deploy über die Befehlszeile bereitgestellt. Damit Travis Ihre Anwendung in Firebase bereitstellen kann, müssen Sie sie autorisieren. Wie machen Sie das? Mit einem Firebase-Token.
🗝️🔥
Firebase autorisieren
Führen Sie den folgenden Befehl aus, um das Token zu generieren:
firebase login:ci
Daraufhin wird ein neuer Tab in einem Browserfenster geöffnet, damit Firebase Ihre Identität bestätigen kann. Wenn Sie sich danach die Konsole noch einmal ansehen, sehen Sie Ihr neu erstelltes Token. Kopieren Sie sie und gehen Sie zurück zu Travis.
Klicken Sie im Travis-Dashboard Ihres Projekts auf Weitere Optionen > Einstellungen > Umgebungsvariablen.
Fügen Sie das Token in das Wertfeld ein, nennen Sie die Variable FIREBASE_TOKEN und fügen Sie sie hinzu.
Bereitstellung zur Travis-Einrichtung hinzufügen
Sie benötigen die folgenden Zeilen, um Travis anzuweisen, die App nach jedem erfolgreichen Build bereitzustellen.
Fügen Sie sie am Ende der Datei .travis.yml ein. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Übertragen Sie diese Änderung per Push an GitHub und warten Sie auf Ihre erste automatisierte Bereitstellung. Wenn du dir dein Travis-Protokoll ansiehst, sollte dort schon ✔️ Bereitstellen abgeschlossen sein!
Wenn Sie jetzt Änderungen an Ihrer App vornehmen, werden diese automatisch in Firebase bereitgestellt.
5. Lighthouse-Bot wird eingerichtet
Ein freundlicher Lighthouse-Bot informiert dich über die Lighthouse-Werte deiner App. Es ist nur eine Einladung zu Ihrem Repository erforderlich.
Gehen Sie auf GitHub zu den Einstellungen Ihres Projekts und fügen Sie „lighthousebot“ als Mitbearbeiter hinzu (Einstellungen > Mitbearbeiter):
Die Genehmigung dieser Anfragen ist ein manueller Prozess. Sie erfolgen also nicht immer sofort. Prüfen Sie vor dem Testen, ob Lighthouse den Status „Mitbearbeiter“ genehmigt hat. In der Zwischenzeit müssen Sie den Umgebungsvariablen Ihres Projekts auf Travis einen weiteren Schlüssel hinzufügen. Belassen Sie Ihre E-Mail-Adresse hier, dann erhalten Sie einen Lighthouse Bot-Schlüssel in Ihrem Posteingang. 📬
Fügen Sie diesen Schlüssel in Travis als Umgebungsvariable hinzu und nennen Sie ihn LIGHTHOUSE_API_KEY:
Lighthouse Bot zu Projekt hinzufügen
Als Nächstes fügen Sie Ihrem Projekt Lighthouse Bot hinzu, indem Sie folgenden Befehl ausführen:
npm i --save-dev https://github.com/ebidel/lighthousebot
Fügen Sie dieses Bit zu package.json hinzu:
"scripts": {
"lh": "lighthousebot"
}
Lighthouse Bot zur Travis-Konfiguration hinzufügen
Als letzten Trick testen Sie die Leistung der Anwendung nach jeder Pull-Anfrage.
Fügen Sie in .travis.yml einen weiteren Schritt in „after_success“ hinzu:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Es wird eine Lighthouse-Prüfung für die angegebene URL durchgeführt. Ersetzen Sie daher https://staging.example.com durch die URL Ihrer App (your-app-123.firebaseapp.com).
Legen Sie hohe Standards fest und passen Sie die Einrichtung so an, dass Sie keine Änderungen an der Anwendung akzeptieren, die den Leistungswert unter 95 % bringen:
- npm run lh -- --perf=95 https://staging.example.com
Pull-Anfrage senden, um Lighthouse Bot-Test auf Travis auszulösen
Lighthouse Bot testet nur Pull-Anfragen. Wenn du also jetzt einen Push an den Hauptzweig sendest, wird in deinem Travis-Log einfach die Meldung „Dieses Skript kann nur bei Travis PR-Anfragen ausgeführt werden“ angezeigt.
So lösen Sie den Lighthouse Bot-Test aus:
- In einer neuen Filiale bezahlen
- Per Push auf GitHub übertragen
- Pull-Anfrage stellen
Bleib auf der Seite für Pull-Anfragen und warte, bis der Lighthouse Bot singt. 🎤
Die Leistungsbewertung ist hervorragend, die App liegt unter dem Budget und die Prüfung wurde bestanden.
Weitere Lighthouse-Optionen
Erinnern Sie sich daran, wie Lighthouse fünf verschiedene Kategorien testet? Sie können Punktzahlen für alle mit Lighthouse-Bot-Flags erzwingen:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Beispiel:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Dies gilt nicht für die PR, wenn der Leistungswert unter 93 fällt oder der SEO-Wert unter 100 fällt.
Du kannst auch festlegen, dass du die Kommentare von Lighthouse Bot nicht erhalten möchtest. Verwende dazu die Option --no-comment.