5메가짜리 크로스플랫폼 데스크톱 웹앱 만들기

단일실행파일과 이미설치된 브라우저에 대한 의존성만으로 작동합니다.

최근 NativeAot 관련글이 많이보이길래 공유해바요

9개의 좋아요

코드 공유 감사드립니다.

스벨트에 익숙하지 않아서 그런가, 실행 구조가 명확하게 이해되지 않는 부분이 있어 질문 드립니다.

제가 파악하기로는, Server 앱이 실행되면,

  1. WebApplication (미니멀 API) 이 localhost 의 모든 포트에 대해 리스닝하고,
  2. 시스템의 웹UI 윈도우 를 열어 localhost/webui.js 를 fetch하면
  3. 웹UI 윈도우에서 Svelte 가 실행된다.

고 보여집니다.

질문.

  1. 우선 제가 예측한 실행 구조가 맞는 지, 혹은 추가적으로 어떻게 실행되는 지 개략적으로라도 알려주시면 소스 코드를 이해하는데 많은 도움이 될 것 같습니다. (특히 /webui.js 가 어떻게 맵핑되는 지)
  2. 잘은 모르지만, node 가 설치되어야 실행이 가능하다면 실제 구동에 필요한 앱의 사이즈는 상당히 클 것 같고, node 에 종속된다면 스탠드얼론이라고 하기에는 무리가 있지 않은지요?

코드에 비평이 아니고, 좀 더 잘 이해하기 위해 드리는 질문이라, 답변해주시면 감사하겠습니다.

2개의 좋아요

재밌네요. 초소형 서버에 프론트엔드까지 있으니 활용 방안이 더 있을 것 같습니다.
저는 근데 퍼블리시하면 14메가로 나오네요.

2개의 좋아요

제가 이해하기로는 진행이 다음과 같습니다.

  1. Client에서 SvelteKit이라는 프레임워크로 HTML/CSS/JS(정적 페이지, Static Site Generation과 같음)를 wwwroot폴더에 생성합니다.
  2. WebUI 실행 후 JS는 직접 가상 파일로 연결해주어야 해서 직접 연결
  3. 이후 WebUI에서 index.html 실행. JS가 해석되서 Svelte가 그 위에서 실행

그래서 개발할 경우에는 NodeJS가 필요하지만, 실행할 때는 필요없는 것 같네요.

4개의 좋아요

질문1: 네, 적당히 해설드리자면

  • 서버기술이지만 응용프로그램의 역할을 하기위해, 할당되지 않은 임의의 포트에 루프백 서버를 구동하고([::1]:0), 해당포트로 접속하는 웹UI를 노출합니다.
  • 이때 화면에 나오는 웹UI 윈도우는 별도로 작성된 레이아웃이 없는 이미 데스크톱환경에 인스톨되있던 브라우저 그자체입니다.
  • 내부적으로 MinimalAPI서버 뿐만 아니라 WebUI 라이브러리의 자체적인 서버도 구동되며 프론트엔드와 연결되있어야 합니다. webui.jsWebUI서버에서 제너레이션되는 스크립트이며 이를 <head>에 추가하는것만으로 연동이 성사되는구조입니다. Program.cs상의 매핑은 스벨트로 생성한 정적페이지에서 임의포트를 명시하지 않고 webui.js 에 접근하기위한 편의적 리다이렉트 입니다.

질문2: @hjnn 님 해석이 맞습니다.

스벨트 자체는 이 Minimal Desktop WebApp 을 구성하는데 있어 필수불가결한 요소는 아니나, 아직 블레이저서버가 NativeAot 빌드를 지원하지 못하는관계로 배포 용량을 극단적으로 낮추면서도 최대한 Razor문법과 비슷한 웹프레임워크를 도입한것입니다. 저도 잘 몰라서 인제 써보려고 합니다 :sweat_smile:

가장 주목하셔야할 부분은 이 템플릿이 런타임에서 실행되기위해서 내장 웹 엔진은 커녕 webveiw2 조차 요구하지 않는다는점입니다. 대부분의 사용자가 이미 설치해뒀을 모던 브라우저만 있으면 충분합니다.

5개의 좋아요

제가 빌드한 경우는 publish후 실행파일을 UPX 로 압축시킴으로써 5메가대 까지 끌어내린것인데요, 이 부분을 따로 적용하는것은 특별히 어렵지 않을것이며. 상황에따라, 혹은 개발자가 깎아내기에 따라 여러가지 다른 용량최적화가 도입될 여지가 있기때문에 템플릿상의 배포 흐름에 통합되있지는 않습니다.

3개의 좋아요