Go의 템플릿 엔진 'templ”이 편리합니다. (TinyGo에서도 작동합니다.)

개요

일반 HTML을 반환하는 애플리케이션을 Go에서 실행하고 싶었습니다.
Wasm으로 변환하여 배포할 수 있는 Cloudflare Workers를 사용하기로 결정했습니다.

Cloudflare Workers에 Go 애플리케이션을 배포하려면 syumai/workers 템플릿을 추천합니다.

syumai/workers: Cloudflare Workers에서 HTTP 서버를 실행하기 위한 Go 패키지.

텍스트/템플릿 이동

먼저 텍스트/템플릿을 사용하여 간단한 방식으로 구축해 보겠습니다.

❯ ls -lh . /build
   total 15656
   -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm
   -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs
   -rw-r--r-- 1 ergofriend staff 16K 8 8 20:12 wasm_exec.js
   -rw-r--r-- 1 ergofriend staff 160B 8 8 20:12 worker.mjs

약 8MB 정도였습니다.

https://developers.cloudflare.com/workers/platform/limits/#account-plan-limits

Cloudflare Workers에는 계획에 따라 작업자 규모 제한이 있습니다.

무료 슬롯은 1MB, 유료 슬롯($5~)은 10MB입니다.

압축 후 크기에 따른 최종 제한을 적용하더라도 8MB부터 시작하는 무료 할당량을 맞추기 어려울 것입니다.

TinyGo 텍스트/템플릿

그래서 WebAssembly(Wasm)용으로 나온 TinyGo로 전환하기로 결정했습니다.

빌드 후 크기는 0.75MB 정도인데 프리프레임에 딱 맞는 것 같습니다.

❯ ls -lh . /build
total 1160
-rwxr-xr-x 1 ergofriend staff 556K 8 8 20:23 app.wasm
-rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:23 shim.mjs
-rw-r--r-- 1 ergofriend staff 15K 8 8 20:23 wasm_exec.js
-rw-r--r-- 1 ergofriend staff 160B 8 8 20:23 worker.mjs

이런!

그런데 여기서 비극이 닥친다.

빌드된 애플리케이션에 접근하려고 하면 오류가 납니다.

[wrangler:inf] GET / 200 OK (35ms)
✘ [ERROR] Uncaught (in response) RuntimeError: unreachable

      at main.runtime._panic (wasm://wasm/main-0022bc46:wasm-function[35]:0x2b4a)
      at main.(*text/template.state).evalField
  (wasm://wasm/main-0022bc46:wasm-function[540]:0x6c5f4)
      at main.(*text/template.state).evalFieldChain
  (wasm://wasm/main-0022bc46:wasm-function[531]:0x697fe)
      at main.(*text/template.state).evalFieldNode
  (wasm://wasm/main-0022bc46:wasm-function[530]:0x6959a)
      at main.(*text/template.state).evalPipeline
  (wasm://wasm/main-0022bc46:wasm-function[535]:0x6a1d2)
      at main.(*text/template.state).walk (wasm://wasm/main-0022bc46:wasm-function[569]:0x72cdd)
      at main.(*text/template.state).walk (wasm://wasm/main-0022bc46:wasm-function[569]:0x730b0)
      at main.main (wasm://wasm/main-0022bc46:wasm-function[261]:0x2ac52)
      at main.(net/http.HandlerFunc).ServeHTTP
  (wasm://wasm/main-0022bc46:wasm-function[463]:0x5973a)
      at
  main.interface:{ServeHTTP:func:{named:net/http.ResponseWriter,pointer:named:net/http.Request}{}}.ServeHTTP$invoke
  (wasm://wasm/main-0022bc46:wasm-function[459]:0x56f72)

panic: unimplemented: (reflect.Value).MethodByName()

template.ExecuteTemplate()에 템플릿 변수를 전달할 때 호출되는 MethodByName 메소드는 아직 구현되지 않은 것 같습니다.

TinyGo는 원본의 하위 집합이므로 지원되지 않는 기능이 많이 있습니다.
텍스트/템플릿이 지원되지 않는 메서드를 호출하고 있는 것을 발견했습니다.

https://github.com/tinygo-org/tinygo/blob/1154212c15e6e97048e122068730dab5a1a9427f/src/reflect/type.go#L1086-L1088

이제 TinyGo에 대해 멋있게 p-r을 하고 싶지만 이번에는 빠른 대안을 찾아보겠습니다.

템플

그래서 텍스트/템플릿을 대체할 다른 템플릿 엔진을 찾다가 templ을 발견했습니다.

아-아 / 임시 직원

Go에서 HTML 사용자 인터페이스를 작성하기 위한 언어입니다.

훌륭한 개발자 도구를 갖춘 Go용 HTML 템플릿 언어

문서화

https://templ.guide에서 사용자 문서를 참조하세요

과제

빌드

로컬 버전을 구축하세요.

❯ ls -lh . /build
   total 15656
   -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm
   -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs
   -rw-r--r-- 1 ergofriend staff 16K 8 8 20:12 wasm_exec.js
   -rw-r--r-- 1 ergofriend staff 160B 8 8 20:12 worker.mjs

nix-update-gomod2nix

❯ ls -lh . /build
   total 15656
   -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm
   -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs
   -rw-r--r-- 1 ergofriend staff 16K 8 8 20:12 wasm_exec.js
   -rw-r--r-- 1 ergofriend staff 160B 8 8 20:12 worker.mjs

설치-스냅샷

현재 버전을 빌드하고 설치하세요.

❯ ls -lh . /build
total 1160
-rwxr-xr-x 1 ergofriend staff 556K 8 8 20:23 app.wasm
-rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:23 shim.mjs
-rw-r--r-- 1 ergofriend staff 15K 8 8 20:23 wasm_exec.js
-rw-r--r-- 1 ergofriend staff 160B 8 8 20:23 worker.mjs

빌드-스냅샷

goreleaser를 사용하여 명령줄 바이너리를 빌드하려면 goreleaser를 사용하세요.

❯ ls -lh . /build
   total 15656
   -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm
   -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs
   -rw-r--r-- 1 ergofriend staff 16K 8 8 20:12 wasm_exec.js
   -rw-r--r-- 1 ergofriend staff 160B 8 8 20:12 worker.mjs

생성

로컬 버전을 사용하여 임시 생성을 실행하세요.

❯ ls -lh . /build
total 1160
-rwxr-xr-x 1 ergofriend staff 556K 8 8 20:23 app.wasm
-rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:23 shim.mjs
-rw-r--r-- 1 ergofriend staff 15K 8 8 20:23 wasm_exec.js
-rw-r--r-- 1 ergofriend staff 160B 8 8 20:23 worker.mjs

테스트

Go 테스트를 실행하세요.

❯ ls -lh . /build
   total 15656
   -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm
   -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs
   -rw-r--r-- 1 ergofriend staff 16K 8 8 20:12 wasm_exec.js
   -rw-r--r-- 1 ergofriend staff 160B 8 8 20:12 worker.mjs

단기 테스트

Go 테스트를 실행하세요.

❯ ls -lh . /build
total 1160
-rwxr-xr-x 1 ergofriend staff 556K 8 8 20:23 app.wasm
-rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:23 shim.mjs
-rw-r--r-- 1 ergofriend staff 15K 8 8 20:23 wasm_exec.js
-rw-r--r-- 1 ergofriend staff 160B 8 8 20:23 worker.mjs

테스트 표지

달려라…

GitHub에서 보기

특징

TEMPL의 개요는 다음과 같습니다.

자신의 DSL

고유한 프로그램을 작성하는 것은 어렵지 않지만 templ ≒ Go JSX처럼 작성할 수 있습니다.

❯ ls -lh . /build
   total 15656
   -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm
   -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs
   -rw-r--r-- 1 ergofriend staff 16K 8 8 20:12 wasm_exec.js
   -rw-r--r-- 1 ergofriend staff 160B 8 8 20:12 worker.mjs

아주 익숙한 글쓰기 스타일인 것 같아요.

❯ ls -lh . /build
total 1160
-rwxr-xr-x 1 ergofriend staff 556K 8 8 20:23 app.wasm
-rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:23 shim.mjs
-rw-r--r-- 1 ergofriend staff 15K 8 8 20:23 wasm_exec.js
-rw-r--r-- 1 ergofriend staff 160B 8 8 20:23 worker.mjs

사용하면 구성요소별로 templ generate로 DSL에서 생성된 Go 함수를 호출하게 됩니다.

[wrangler:inf] GET / 200 OK (35ms)
✘ [ERROR] Uncaught (in response) RuntimeError: unreachable

      at main.runtime._panic (wasm://wasm/main-0022bc46:wasm-function[35]:0x2b4a)
      at main.(*text/template.state).evalField
  (wasm://wasm/main-0022bc46:wasm-function[540]:0x6c5f4)
      at main.(*text/template.state).evalFieldChain
  (wasm://wasm/main-0022bc46:wasm-function[531]:0x697fe)
      at main.(*text/template.state).evalFieldNode
  (wasm://wasm/main-0022bc46:wasm-function[530]:0x6959a)
      at main.(*text/template.state).evalPipeline
  (wasm://wasm/main-0022bc46:wasm-function[535]:0x6a1d2)
      at main.(*text/template.state).walk (wasm://wasm/main-0022bc46:wasm-function[569]:0x72cdd)
      at main.(*text/template.state).walk (wasm://wasm/main-0022bc46:wasm-function[569]:0x730b0)
      at main.main (wasm://wasm/main-0022bc46:wasm-function[261]:0x2ac52)
      at main.(net/http.HandlerFunc).ServeHTTP
  (wasm://wasm/main-0022bc46:wasm-function[463]:0x5973a)
      at
  main.interface:{ServeHTTP:func:{named:net/http.ResponseWriter,pointer:named:net/http.Request}{}}.ServeHTTP$invoke
  (wasm://wasm/main-0022bc46:wasm-function[459]:0x56f72)

panic: unimplemented: (reflect.Value).MethodByName()

go run ./get-version > .version
cd cmd/templ
go build

생성된 컴포넌트의 함수는 템플릿에 정의된 인수 유형을 상속하므로 안전하게 호출할 수 있습니다.
일부 ExecuteTemplate과 달리 안전합니다.

VSCode 확장

https://marketplace.visualstudio.com/items?itemName=a-h.templ

구문 강조 및 LSP 완성 기능은 매우 유용합니다.

TinyGo 템플릿

확인해 보니 이미 TinyGo에 구현되어 있는 Reflect의 TypeOf에만 의존하는 것으로 나타났습니다.

https://github.com/tinygo-org/tinygo/blob/1154212c15e6e97048e122068730dab5a1a9427f/src/reflect/type.go#L494-L500

이제 templ을 사용해 보겠습니다.
빌드 공간은 충분해 보였습니다.

gomod2nix

실제 적용 사례는 다음과 같습니다.

goworkers-demo.ergofriend.workers.dev

액세스 시 HTML이 오류 없이 반환될 수 있습니다.

<span class="pl-c"># Remove templ from the non-standard ~/bin/templ path</span>
<span class="pl-c"># that this command previously used.</span>
rm -f ~/bin/templ
<span class="pl-c"># Clear LSP logs.</span>
rm -f cmd/templ/lspcmd/*.txt
<span class="pl-c"># Update version.</span>
go run ./get-version > .version
<span class="pl-c"># Install to $GOPATH/bin or $HOME/go/bin</span>
cd cmd/templ && go install

최종 배포 크기도 187.91KiB이므로 애플리케이션을 확장할 여지는 충분합니다.

이 검증은 이 저장소에 남아 있습니다.
ergofriend/goworkers-데모

---

이 글은 일본어를 번역한 것입니다.
https://ergofriend.hatenablog.com/entry/2024/08/08/230603

위 내용은 Go의 템플릿 엔진 'templ”이 편리합니다. (TinyGo에서도 작동합니다.)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!