집 > 기사 > 백엔드 개발 > Go의 템플릿 엔진 “templ”이 편리합니다. (TinyGo에서도 작동합니다.)

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

Barbara Streisand원래의: 2024-10-30 20:31:30999검색

개요

일반 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html switch for try Error using function typeof this github vscode visualstudio http https wasm Access

성명：

이전 기사：Go에서 요일 문자열을 time.Weekday 값으로 변환하는 방법은 무엇입니까?다음 기사：Go에서 요일 문자열을 time.Weekday 값으로 변환하는 방법은 무엇입니까?