NgSysV.Automated Svelte プリレンダー ビルド

この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機能もあります。

最終レビュー日: 2024 年 11 月

1. はじめに

Post 4.2 では、Web ページのプリレンダリングの概念が浮上しました。ページが決して変更されない (または、少なくともあまり頻繁に変更されない) 場合は、プロジェクトの「ビルド」中にそのページを HTMl に変換してもよいのではないかという考えでした。

これは問題ありませんが、基になるデータが頻繁に変更される場合、事前にレンダリングされたページを最新の状態にするために手動でビルドを実行するのは面倒になります。 自動化は確かにその答えです。

これにはいくつかの方法で対処できますが、スクリプトを使用してビルド/デプロイ シーケンスを実行し、Windows スケジューラでこれを自動的に実行することをお勧めします

2. Powershell ビルド/デプロイ スクリプト

使用できる ps1 スクリプトは次のとおりです:

$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
}

このスクリプトでは、[myProjectId] は Google プロジェクト ID です - 例: "svelte-dev-80286"
[myProjectPath] は VSCode プロジェクトの絶対パス名です (例: "C:UsersmjoycDesktopGitProjectssvelte-dev")。出力された log.txt ファイルは、VSCode プロジェクト フォルダーのルートに置かれます

スクリプトは予想よりも複雑に見えます。その理由は次のとおりです:

スクリプトを自動的にスケジュールする予定であるため、エラーが発生した場合に何が問題だったかを示すためにログ ファイルを維持する必要があります。これだけでも、避けられない「乱雑さ」がさらに増します。しかし、奇妙な「バージョン削除」セクションもあります。 「ビルド」を実行するたびに、Google がクラウド ストレージに新しいバージョンを作成するため、これが必要になります。作成できるバージョンの数にはデフォルトの最大値があります。バージョン数が 200 に達したときにシステム エラーが発生したときに、このセクションを追加しました。

上記のスクリプトでは、維持されるバージョンの数を 10 に制限しています (アプリ実行ホスティングの料金は今払っています!)。

VSCode ターミナル セッションでスクリプト ファイルをテストする最も直接的な方法は、その内容を選択し、セッションに貼り付けて Return キーを押すことです。ただし、運用目的では、ある程度の自動化が必要です。

3. PowerShell スクリプトを実行するための Windows スケジュールの構成

ビルド スクリプトを実行する Windows スケジューラ タスクを登録する手順は次のとおりです。

1. Windows の検索バーに「タスク スケジューラ」と入力し、アプリを開きます。
2. [アクション] メニューで、[基本タスクの作成] をクリックします。
3. タスクの名前と説明を入力します
4. 「トリガー」タブで、「毎日」、「毎週」など、プログラムを実行する間隔を選択します。
5. タスクの開始日時と頻度を指定します。
6. 「プログラムの開始」オプション ボタンを選択します。
7. 次に、「プログラムの開始」ウィンドウで次の操作を行います。 プログラム/スクリプト: 「参照」を使用して Windows PowerShell のパスを入力します (例: C:WindowsSystem32WindowsPowerShellv1.0powershell.exe)。 引数: スクリプトのフルパスを入力します。例: [スクリプトへのフルパス][スクリプトファイル名].ps1 「開始場所」に、スクリプトが配置されているフォルダーのパスを入力します。例：「[スクリプトへのフルパス]」
8. 次のウィンドウで、[完了をクリックしたときにこのタスクのプロパティ ダイアログを開く] チェックボックスを選択し、[完了] ボタンをクリックします。
9. プロパティダイアログの「全般」タブで、「ユーザーがログオンしているかどうかにかかわらず実行する」および「最高の特権で実行する」チェックボックスが選択されていることを確認します。これにより、管理者権限でスクリプトを実行していることが保証されます。
10. 「OK」ボタンをクリックし、マシンの Microsoft ユーザー名とパスワードを入力してログイン プロンプトに応答し、新しいスケジューラ タスクを保存する権利を確認します。
11. タスク スケジュール ライブラリを開き、ここでタスクのエントリを右クリックして [実行] を選択して、新しいタスクをテストします

上記の手順で作成した Windows スケジューラ タスクを使用して、事前レンダリングされた「ngatesystems.com」キーワード検索ページの夜間ビルドを実行します。新しい投稿が追加されることはめったにありませんが、既存のページを定期的に編集しています。夜間実行の設定により、検索ページがライブ データより 1 日以上遅れることはありません。

以上がNgSysV.Automated Svelte プリレンダー ビルドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。