Blazor WASM에서 웹페이지의 업데이트를 알리는 방법이 궁금합니다.

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1
  • 무엇을 하고자 하는지

Blazor WASM으로 웹페이지를 만들려고 합니다.
Oracle Free Tier AMD에 ubuntu / nginx로 구성하려 합니다.

현재 기본 Blazor 프로젝트에서 CSS파일만 별도로 만들었습니다.
그리고 각 페이지에 적용하고 테스트를 위해 빌드했습니다.
몇번 변경하면서 수정하다보니 CSS의 변경사항이나 razor파일(html)의 변경사항이 적용이 안되는 상황이 발생했습니다.

파일이 업데이트되면 자동으로 파일을 다운받아 적용 (구성 파일의 자동 업데이트)되게 만들고싶습니다.

검색해보니 캐싱을 안하게 만들면 된다는 내용은 찾았으나 매번 wasm을 다운로드 받아 페이지를 표시하면 트래픽 증가 등 비효율적인것 같아 다른 방법을 찾고 있습니다.

Blazor에서 어떻게 하면 될까요?
(일반 데스크탑앱처럼 버전을 입력하는것도 찾아봤으나 없더군요.)

  • 현재 작성한 코드 중 문제가 되는 부분
    WASM 웹사이트에서 CSS, html 파일 변경시 적용되지 않는 문제
    (Ctrl + F5 하면 변경이 적용되어 잘 표시됩니다. )

  • 기대하는 동작
    Client가 서버에 접속
    → server에서 업데이트 된 파일을 확인
    → 업데이트된 파일을 다운 / 캐싱
    → 업데이트 된 사이트 표시

    Blazor에서 설정하는 방법

2

Blazor WebAssembly는 순수 CSR이므로.
캐싱 관련 처리는 HTTP 서버에서 처리해야 합니다.

HTTP 헤더에 ETag나 Last-Modified를 포함하세요.

그리고 참고로 Blazor WebAssembly만 사용하신다면.
오라클 클라우드 VM보다는 GitHub Pages나 Cloudflare Pages같은 정적 서버를 더 추천드립니다.

참고 링크

4 Likes
3

일반적인 자바스크립트의 클라이언트 렌더링의 경우에는 앞서 설명해주신대로 HTTP 캐싱과 빌드 결과물에 해시를 덧붙여서 파일을 캐싱합니다.

예를 들어 index.html에는 캐시 값을 설정하고 ETag와 Last-Modified로 유효성 검사를 설정합니다.

그리고 이외 다른 리소스(ex. JS, CSS)는 캐시 설정하고 빌드 결과 파일에 해시를 달거나 해시 이름으로 되어있는 폴더로 옮기는 방식으로 업데이트 합니다.
ex. main.js → main.3dva1a.js 혹은 main.js → 3dva1a\main.js

하지만 blazor에서는 따로 파일의 이름을 변경하는 옵션이 없습니다. 리소스를 브라우저의 Cache API를 사용해서 캐시하고 Blazor 실행 리소스에서 blazor.boot.json에 있는 해시 값을 사용해서 유효성 검사를 한다고 하네요. 출처 - Blazor WASM 번들 캐싱

Blazor WASM 호스트 및 배포 - Nginx (한국어 문서)에서 나온것 처럼 따로 캐시 설정이 필요하지 않습니다.

추가로, 트래픽을 최소화 하기 위해 서버 앞에 CDN을 추가하는 것도 검토해보면 좋습니다.

2 Likes