‫-: Wir sind jetzt fast bereit, unsere Anwendung bereitzustellen.
‫Aber bevor wir das
‫tun, gibt es eigentlich ein paar Dinge,
‫um die wir uns kümmern sollten.
‫Und das machen wir jetzt.
‫Und als erstes möchte
‫ich ein
‫Paket installieren, das alle unsere Antworten komprimiert.
‫Im Grunde also immer dann, wenn wir eine Textantwort an einen Client
‫senden, egal ob es sich um JSON- oder HTML-Code handelt.
‫Mit dem
‫Komprimierungspaket wird dieser Text dann dramatisch komprimiert.
‫Alles klar, also lass uns hier installieren.
‫Npm installieren und einfach Komprimierung.
‫Gut.
‫Also fügen wir das hier ein.
‫Dadurch wird nun eine sehr
‫einfache Mittelschichtfunktion
‫bereitgestellt, die wir einfach
‫in unseren Mittelschichtstapel stecken müssen.
‫Also lass uns das hier irgendwo machen.
‫Kurz vor Schluss, egal.
‫Also App. verwenden,
‫dort Anrufkomprimierung eingeben.
‫Dies hier wird dann eine Funktion in der Mitte links
‫zurückgeben, die dann wieder den gesamten
‫Text komprimiert, der an die Clients gesendet wird.
‫Es wird also nicht für Bilder
‫funktionieren, da diese normalerweise bereits komprimiert sind.
‫So ist beispielsweise ein JPEG-Format bereits komprimiert.
‫Dies wird also nur für Text funktionieren.
‫Sobald unsere Website also tatsächlich bereitgestellt
‫wurde, testen wir, ob diese Komprimierung tatsächlich aktiv ist.
‫Wie auch immer, der nächste Schritt vor der Bereitstellung unserer App besteht darin,
‫den größten Teil der Konsole loszuwerden. Protokolle, die wir noch
‫in unserem Code haben.
‫Und das nur, weil diese Logins in
‫unseren Hosting-Plattform-Logs landen.
‫Und deshalb wollen wir diese Stämme in der Produktion nicht verschmutzen.
‫Okay.
‫Also lass uns hier einfach schnell nach Konsole suchen.
‫Und wie Sie sehen, gibt es viele davon.
‫Dieser ist also bereits auskommentiert.
‫Also werde ich nicht daran arbeiten.
‫Aber dieses hier, lasst uns es tatsächlich loswerden.
‫Und so werden
‫wir uns jetzt nach und nach
‫alle ansehen und diejenigen,
‫die nicht relevant sind, einfach auskommentieren.
‫Gut.
‫Hier im Fehlercontroller haben wir auch eine Menge davon, aber
‫einige sind tatsächlich relevant.
‫Nun, nicht dieser.
‫Lass es uns tatsächlich komplett loswerden.
‫Auch nicht
‫dieser, aber hier haben wir
‫diese drei, die wir tatsächlich
‫mit Absicht erstellt haben, damit sie in unseren Hosting-Plattform-Logs landen.
‫Okay.
‫Denken Sie also daran, dass wir es
‫so eingerichtet haben, dass wir bei einem Fehler auf
‫der Render-Website ein Protokoll
‫des tatsächlich aufgetretenen Fehlers erhalten.
‫Zusammen mit diesem Emoji hier.
‫Und so können wir jedes
‫Mal, wenn wir dies sehen, in unseren Protokollen
‫leicht erkennen, dass auf unserer Seite etwas Schlimmes passiert ist.
‫Okay, und so haben wir hier noch ein paar mehr.
‫Zum Beispiel für andere unbekannte Fehler, bei
‫denen wir die Fehlerdetails nicht an den Client weitergeben möchten.
‫Und so sind diese in Ordnung, sie zu behalten.
‫Diese wollen wir auch behalten,
‫um uns in den Logs mitteilen
‫zu können, dass die Datenbankverbindung erfolgreich war.
‫Auch diese hier.
‫Dieser hier ist tatsächlich in den import-dev-data, also sind
‫sie überhaupt nicht wichtig.
‫Wie auch immer, alle Protokolle hier, behalten wir sie.
‫Dann haben wir hier diese hier, die
‫wir wirklich nur gemacht haben, um diese mittlere Schicht zu verwenden.
‫Lassen Sie uns diese mittlere Ebene also tatsächlich deaktivieren.
‫Was wir wiederum nur
‫zum Testen dieser Mittelschicht verwendet haben.
‫Als nächstes im Benutzermodell.
‫Nun, diese wollen wir auch nicht.
‫Dies war nur noch einmal zu Testzwecken.
‫Dann haben wir das Paket JSON, damit
‫sind diese eigentlich gar nicht in die Logs gekommen.
‫Dann müssen wir
‫bündeln, wo wir nichts ändern werden.
‫Dann haben wir einen Index. js.
‫Das ist also unser clientseitiges JavaScript.
‫Also lass uns diese Konsole loswerden. hier einloggen.
‫Dann haben wir hier auch noch ein paar mehr im Logout, aber
‫dieses hier behalten wir eigentlich bei.
‫Etwas mehr in Streifen.
‫Und die Session interessiert uns hier nicht.
‫Aber dieser hier, wenn ein Fehler auftritt, ist
‫eigentlich in Ordnung.
‫Und dann im Server. js, wir
‫haben diese hier, was
‫wir tatsächlich wieder mit Absicht gemacht haben.
‫Damit sie wirklich in unseren Logfiles auftauchen.
‫Und machen Sie sich keine Sorgen, wenn Sie nicht
‫genau wissen, was ich mit Protokolldateien meine.
‫Sie werden sehen, sobald
‫wir unsere Anwendung tatsächlich auf Heroku gestellt haben.
‫Also zeige ich euch bis dahin mit den Logfiles alles klar.
‫Wie auch immer, all diese Konsolen. Protokolle hier sind mit
‫Absicht.
‫Und so geht
‫es hier um die erfolgreiche Datenbankanbindung.
‫Dieser hier
‫informiert uns auch über den Port, auf dem die App läuft.
‫Und dieser und dieser sind auch wichtig.
‫Gut.
‫Und damit haben wir uns um all
‫die unnötige Konsole gekümmert. Protokolle, dass
‫wir nur unsere Protokollausgaben verschmutzen.
‫Okay, schließen wir alle diese Dateien hier.
‫Gut.
‫Und jetzt,
‫im nächsten Schritt, ändern wir URLs oder
‫API-Codes auf der Clientseite, JavaScript.
‫Also zum Beispiel hier im Login. js, im
‫Moment führen wir diese API-Codes
‫für diese Entwicklungs-API aus.
‫Hier haben wir natürlich unsere Entwicklungs-URL.
‫Auf
‫diese Weise wird es in
‫der Produktion nicht funktionieren, da
‫wir von dort aus offensichtlich nicht auf eine Entwicklungs-URL zugreifen können.
‫Und das gleiche hier oben.
‫Aber zum Glück gibt es eine ganz einfache Lösung.
‫Also alles, was wir tun müssen, ist, diesen Teil wirklich loszuwerden.
‫Wenn wir es also einfach
‫so löschen, erhalten wir diese relative URL.
‫Und da die API
‫und die Website auf demselben
‫Server gehostet werden, funktioniert dies perfekt.
‫Dies ist also ein bisschen
‫so, als würde man den Pfad zu Bildern im HTML angeben.
‫Zum Beispiel hier auf der Übersichtsseite, wo
‫wir diese Bilder
‫haben, sagen wir einfach "/img"
‫und das geht dann zur
‫aktuellen URL und fügt dann diesen Pfad hinzu.
‫Okay.
‫Und so wird hier dasselbe passieren.
‫Okay.
‫Auch das funktioniert nur, weil die API und die
‫Website grundsätzlich dieselbe URL verwenden.
‫Also hosten wir sie am selben Ort.
‫Aber wenn Sie Ihre Website
‫oder Ihr Frontend auf einer URL
‫hosten und dann Ihre API auf einer
‫anderen URL, dann würde das nicht so funktionieren, okay.
‫Aber in dieser einfachen Anwendung können wir es einfach so machen,
‫weil wir diese sehr einfache Einrichtung haben.
‫Also lass es uns hier im Login löschen.
‫Im Index haben wir glaube ich keine URLs.
‫Ja das ist richtig.
‫Auch nicht in den Benachrichtigungen.
‫Ich glaube nicht in Mapbox.
‫Nö.
‫Aber sicherlich in Streifen.
‫Also um unsere Session zu bekommen.
‫Also können wir hier genau dasselbe tun.
‫Und auch in den updateSettings.
‫Okay.
‫Sparen Sie.
‫Und alle.
‫Und damit ist man auch fix.
‫Und nun endlich, und wir arbeiten weiter am
‫clientseitigen JavaScript, müssen
‫wir unser endgültiges Bundle erstellen.
‫Gut.
‫Im Moment ist dies also unsere Bundle-JavaScript-Datei.
‫Aber denken Sie daran, dass dies nur
‫mit der Watch-Funktion erstellt wurde.
‫Also in unserem Paket. json
‫wir haben diese Uhr. js-Skript, das immer dann
‫ein neues Bundle erstellt, wenn wir eine der Dateien ändern.
‫Aber ohne
‫Komprimierung oder ohne Performance-Optimierung.
‫Aber jetzt, da wir mit all unserem JavaScript wirklich
‫fertig sind, sind wir bereit, unser JavaScript tatsächlich
‫zu einem endgültigen Bundle zusammenzufügen.
‫Und hier sollten wir diese Uhr durch Build ersetzen,
‫und so wird
‫dann unser endgültiges komprimiertes JavaScript-Bundle erstellt.
‫Gut.
‫Also probieren wir das jetzt hier aus.
‫Mit npm-Lauf.
‫Und noch einmal mit Tab zum automatischen Vervollständigen.
‫Mal sehen, ob...
‫Und es ist vollbracht.
‫Werfen wir also jetzt einen Blick auf unser Bundle.
‫Und um das jetzt zu sehen, ist es wirklich
‫so schön komprimiert.
‫Gut.
‫Jetzt sehen Sie auch, dass wir eine Menge dieser neuen Dateien hier haben,
‫und das liegt daran, dass Sie sich in unserem Dateibaum befinden.
‫Parcel erstellt tatsächlich diesen Cache-Ordner.
‫Aber wir wollen diesen Ordner nicht in unserem Git-Depot haben.
‫Rechts.
‫Also fügen wir das hier hinzu.
‫Und
‫jetzt sehen Sie, dass es
‫automatisch zu den aktualisierten
‫Originaldateien zurückkehrt, sobald wir es speichern.
‫Okay.
‫Also noch einmal, VS Code ist wirklich
‫schlau in allem, was mit Git zu tun hat.
‫Gut.
‫Okay.
‫Und ich denke, das ist es tatsächlich.
‫Unsere Anwendung ist nun also bereit, wirklich eingesetzt zu werden.
‫Der letzte Schritt besteht nun darin, alle
‫diese geänderten Dateien tatsächlich in unser Repository zu übertragen.
‫Denken Sie also daran, dass der erste Schritt darin besteht, alle Dateien
‫zum Staging-Bereich hinzuzufügen.
‫Also git add, und in diesem Fall alle Dateien.
‫Gut.
‫Und jetzt müssen wir nur noch git
‫commit, dann die Nachricht
‫und sagen wir "App für die Bereitstellung vorbereitet".
‫Groß!
‫Sie sehen also, dass alle unsere Modifikationen weg sind.
‫Auch von hier.
‫Das bedeutet, dass der aktuelle Arbeitszweig
‫so genannt wird sauber.
‫Und ja, wir sind jetzt tatsächlich bereit, unsere App im
‫nächsten Video bereitzustellen.