NgSysV.Automated Svelte 사전 렌더링 빌드

이 게시물 시리즈의 색인은 NgateSystems.com에 있습니다. 거기에서 매우 유용한 키워드 검색 기능도 찾을 수 있습니다.

최종 검토일: 2024년 11월

1. 소개

Post 4.2에서는 웹페이지를 사전 렌더링하는 개념이 떠 올랐습니다. 페이지가 전혀 변경되지 않으면(또는 최소한 너무 자주 변경되지 않으면) 프로젝트의 "빌드" 중에 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. 확인 버튼을 클릭하고 컴퓨터의 Microsoft 사용자 이름과 비밀번호를 입력하여 로그인 프롬프트에 응답하여 새 스케줄러 작업을 저장할 권리를 확인하세요.
11. 작업 일정 라이브러리를 열고 여기에서 작업 항목을 마우스 오른쪽 버튼으로 클릭한 후 "실행"을 선택하여 새 작업을 테스트하세요

위 절차를 통해 생성된 Windows 스케줄러 작업을 사용하여 사전 렌더링된 "ngatesystems.com" 키워드 검색 페이지에 대한 야간 빌드를 실행합니다. 이제 새 게시물이 거의 추가되지 않지만 여전히 기존 페이지를 정기적으로 편집하고 있습니다. 야간 실행 배열은 검색 페이지가 실시간 데이터보다 하루 이상 늦어지지 않음을 의미합니다.

위 내용은 NgSysV.Automated Svelte 사전 렌더링 빌드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!