NgSysV.Automated Svelte Pre-Render Builds

Diese Beitragsserie ist auf NgateSystems.com indiziert. Dort finden Sie auch eine äußerst nützliche Stichwortsuchfunktion.

Letzte Bewertung: 24. November

1. Einführung

Beitrag 4.2 stellte das Konzept des Vor-Renderings einer Webseite vor. Die Idee war, dass, wenn sich eine Seite nie ändert (oder sich zumindest nicht zu oft ändert), sie während der „Erstellung“ des Projekts genauso gut in HTML umgewandelt werden kann.

Das ist in Ordnung, aber wenn sich die zugrunde liegenden Daten zu oft ändern, wird es lästig, Builds auszuführen, um vorgerenderte Seiten manuell auf den neuesten Stand zu bringen. Automatisierung ist sicherlich die Antwort.

Sie können dies auf verschiedene Arten angehen, aber ich empfehle, ein Skript zu verwenden, um die Build-/Bereitstellungssequenz auszuführen, und dann den Windows-Planer zu veranlassen, dies automatisch auszuführen

2. Ein Powershell Build/Deploy-Skript

Hier ist ein PS1-Skript, das Sie verwenden könnten:

$projectId = [myProjectId]
$projectPath = [myProjectPath]

# Define log file path
$logPath = "$projectPath\log.txt"

# Overwrite the log file with a timestamp at the beginning
$timestamp = Get-Date -Format "yyyy-MM-dd HH:mm:ss"
"Log started at $timestamp" | Out-File -FilePath $logPath -Force

# Set the project ID
gcloud config set project $projectId

# Redirect output to log file
try {

    cd $projectPath 2>&1 | Out-File -FilePath $logPath -Append

    npm run build | Out-File -FilePath $logPath -Append

    # Fetch all versions ordered by creation date, excluding the latest 10
    $oldVersions = gcloud app versions list  `
        --sort-by="~version.createTime" `
        --format="value(version.id)" | Select-Object -Skip 10

    # Delete the old versions if there are any
    if ($oldVersions.Count -gt 0) {
        "Deleting old versions..."| Out-File -FilePath $logPath -Force
        $oldVersions | ForEach-Object {
            gcloud app versions delete $_ --quiet 2>&1 | Out-File -FilePath $logPath -Append
        }
    } else {
        "No old versions to delete. The limit of $MaxVersions is not exceeded." | Out-File -FilePath $logPath -Force
    }

    gcloud app deploy build/app.yaml --quiet 2>&1 | Out-File -FilePath $logPath -Append

    } catch {
    "An error occurred: $_" | Out-File -FilePath $logPath -Append
}

In diesem Skript ist [myProjectId} Ihre Google-Projekt-ID – z. B. „svelte-dev-80286“
und [myProjectPath] ist der vollständige Pfadname für Ihr VSCode-Projekt – z. B. „C:UsersmjoycDesktopGitProjectssvelte-dev“. Die Ausgabedatei log.txt landet im Stammverzeichnis Ihres VSCode-Projektordners

Das Skript sieht komplizierter aus, als Sie vielleicht erwartet haben. Hier sind die Gründe dafür:

Da Sie beabsichtigen, das Skript automatisch zu planen, müssen Sie eine Protokolldatei führen, die Ihnen im Falle eines Fehlers mitteilt, was schief gelaufen ist. Dies allein sorgt für viel unvermeidbares „Unordnung“. Es gibt aber auch einen seltsamen Abschnitt zum Löschen der Version. Sie benötigen dies, da Google jedes Mal, wenn Sie einen „Build“ ausführen, eine neue Version im Cloud-Speicher erstellt. Es gibt ein Standardmaximum für die Anzahl der Versionen, die Sie erstellen können. Ich habe diesen Abschnitt hinzugefügt, als mein System einen Fehler machte, als die Versionszahl 200 erreichte.

Im obigen Skript beschränke ich die Anzahl der verwalteten Versionen auf nur 10 (ich bezahle jetzt für mein App-Run-Hosting!).

Die direkteste Möglichkeit, die Skriptdatei in einer VSCode-Terminalsitzung zu testen, besteht darin, ihren Inhalt auszuwählen, ihn in die Sitzung einzufügen und die Eingabetaste zu drücken. Für Produktionszwecke ist jedoch eine gewisse Automatisierung erforderlich.

3. Konfigurieren eines Windows-Zeitplans zum Ausführen des PowerShell-Skripts

Hier ist ein Verfahren zum Registrieren einer Windows-Scheduler-Aufgabe zum Ausführen des Build-Skripts.

1. Geben Sie „Aufgabenplaner“ in die Windows-Suchleiste ein und öffnen Sie die App.
2. Klicken Sie im Menü „Aktionen“ auf „Eine grundlegende Aufgabe erstellen“.
3. Geben Sie einen Namen und eine Beschreibung für die Aufgabe an
4. Wählen Sie auf der Registerkarte „Trigger“ das Intervall aus, in dem das Programm ausgeführt werden soll, z. B. „Täglich“, „Wöchentlich“ usw.
5. Geben Sie das Startdatum/die Startzeit und die Häufigkeit für die Aufgabe an.
6. Wählen Sie die Optionsschaltfläche „Programm starten“.
7. Jetzt im Fenster „Programm starten“: Im Programm/Skript: Verwenden Sie „Durchsuchen“, um den Pfad von Windows PowerShell einzugeben, z. B.: C:WindowsSystem32WindowsPowerShellv1.0powershell.exe Geben Sie unter Argumente den vollständigen Pfad des Skripts ein. Beispiel: [vollständiger Pfad zum Skript][mein Skriptdateiname].ps1 Unter „Start in“: Geben Sie den Ordnerpfad ein, in dem sich das Skript befindet. zB „[vollständiger Pfad zum Skript]“
8. Aktivieren Sie im nächsten Fenster das Kontrollkästchen „Öffnen Sie das Eigenschaftendialogfeld für diese Aufgabe, wenn ich auf Fertig stellen klicke“ und klicken Sie auf die Schaltfläche „Fertig stellen“.
9. Stellen Sie sicher, dass auf der Registerkarte „Allgemein“ des Eigenschaftendialogs die Kontrollkästchen „Ausführen, wenn der Benutzer angemeldet ist oder nicht“ und „Mit höchsten Berechtigungen ausführen“ aktiviert sind. Dadurch wird sichergestellt, dass Sie das Skript mit Administratorrechten ausführen.
10. Klicken Sie auf die Schaltfläche „OK“ und bestätigen Sie Ihr Recht, Ihre neue Planeraufgabe zu speichern, indem Sie auf eine Anmeldeaufforderung mit Ihrem Microsoft-Benutzernamen und Passwort für Ihren Computer antworten.
11. Testen Sie die neue Aufgabe, indem Sie die Aufgabenplanbibliothek öffnen, mit der rechten Maustaste auf den Aufgabeneintrag hier klicken und „Ausführen“ auswählen

Ich verwende eine Windows-Scheduler-Aufgabe, die mit dem oben genannten Verfahren erstellt wurde, um einen nächtlichen Build für die vorgerenderte Schlüsselwortsuchseite „ngatesystems.com“ auszuführen. Obwohl nur noch selten neue Beiträge hinzugefügt werden, bearbeite ich weiterhin regelmäßig bestehende Seiten. Durch die nächtliche Ausführungsanordnung liegt die Suchseite nie mehr als einen Tag hinter den Live-Daten zurück.

Das obige ist der detaillierte Inhalt vonNgSysV.Automated Svelte Pre-Render Builds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!