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

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

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

8 Likes

코드 공유 감사드립니다.

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

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

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

고 보여집니다.

질문.

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

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

2 Likes

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

2 Likes

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

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

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

4 Likes

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

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

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

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

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

5 Likes

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

3 Likes