Next.js+TypeScriptで作ったWebUIをGoのバイナリに組み込んで動かしてみる3

Mar 27, 2022 10:00 · 1115 words · 3 minute read Next.js TypeScript Go

先日投稿したブログ記事で、次の調査課題として

  • Goの「net/http」でjsとcssを返す場合に「content-type」をいい感じに設定する

を挙げていました。

自分で実装しようとしたのですが、「まてよ。この機能であれば著名なWebのFWで既に実装されているはずでは？」ということで、まずは調査。
Ginに実装されていたので使ってみました。

Gin Web Framework (gin-gonic.com)

というわけで、Ginを使って静的ビルドしたNext.jsのコンテンツを動かしたときのメモ書きです。

目次

環境

$ go version
go version go1.18 linux/amd64

Ginのインストール

$ go install github.com/gin-gonic/gin@latest
$ go mod init nextjs-gin-sample
$ go mod tidy

いつも通り「go get」したら警告がでました。
Go 1.17以降は、バージョンを指定して「go install」を使うとのこと。

Go1.17における go get の変更点 | フューチャー技術ブログ (future-architect.github.io)

動かしてみる

$ go run sample.go

js、cssともに読み込まれ、Next.jsで作成したコンテンツが正常に動くことが確認できました。ReactのLinkも機能しています。

Ginを使ったコードです。静的コンテンツはr.Static()の部分で指定しています。

package main

import (
	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	r.LoadHTMLFiles("html/public/index.html") //html
	r.Static("/_next", "html/public/_next")   //_next

	r.GET("/", func(c *gin.Context) {
		c.HTML(200, "index.html", gin.H{})
	})
	r.Run()
}

ソースコード全体はこちら

kapiecii/nextjs-gin-sample (github.com)

「embedを使ってGoのバイナリにWebコンテンツを埋め込めていないじゃないか！」というところが次の課題です。このあたりを見ながら検証すれば解決しそうかな。

Embed (release go 1.16) implementation · Issue #19 · gin-contrib/static (github.com)

とはいえ、

  • ツールを使ってくれる人がNode.js環境を作る必要がなく、ツール提供側もWebサーバを運用しなくてすむ
  • Goでビルドした実行ファイルデータを配布することで、Next.jsで作ったWeb画面をツールのUIとして使える

という目的は達成できました。

あとはNext.jsとGoのそれぞれにツールで実現したい機能を作り込めばOK。
Goはバックエンドとしても使えるので、この構成でデータ保存以外の機能は実現できるのではないでしょうか。

最後に

空き時間に検証していたので時間がかかってしまいましたが、実現したいことは達成できそうです。

Next.jsをGoの機能の分担はこのあたりを参考にしながら実装しようと思います。

Amazon.co.jp: NuxtとGoではじめるWebアプリ開発 (技術の泉シリーズ（NextPublishing）) eBook : 寺田 晃大: 本

これまでの一連の検証はこちら。

tweet Share