TWSNMP FC ：シングルページWEBアプリの雛形を作る

TWSNMP FCの開発３日目は、nuxt.jsでシングルページWEBアプリの雛形を作ってGO言語のWEBサーバー(echo)で表示させるまで作りました。猫もちゃんと５時前に起こしてくれました。

go modでパッケージ管理

昨日のやったことで書き忘れたことがあります。

$go mod init github.com/twsnmp/twsnmpfc

コマンドを実行してgo.modファイルを作成しました。こでで、GO言語のパッケージはgo modで管理できるようになっています。

nuxt.js でシングルページアプリ（SPA)の雛形作成

SPAの雛形は、

インストール

を参考にして、

＄npm init nuxt-app　spa

で作成しました。選択したオプションは、

のようにしました。ポイントは、

・プログラム言語:JavaScript
・パッケージマネージャ:npm
・UIフレームワーク:Vuetify.js
・Nuxt．jsモジュール：Axios（サーバーと通信用）
・Lintツール：ESLiny,Prettier
・テストツール：Jest
・レンダーモード：Single Page App
・配布ターゲット：Static
・ソースコード管理：なし（全体をgitで管理するので）

という感じです。

spa/dist/index.html:
	cd spa && npm run generate

というコマンドをMakefileに追加して配布用のファイルを作成できるようにしました。

SPAをstatikでGO言語の実行ファイルに組み込む

SPAの配布ファイルをstatik

rakyll/statik

を使ってGO言語の実行ファイルに組み込むようにしました。

statik/statik.go: spa/dist/index.html
	statik -src spa/dist

のようにMakefileに追加しました。

main.goをWEBサーバーにする

main.goを修正してGO言語のWebサーバーEcho

High performance, extensible, minimalist Go web framework | Echo

を使ってSPAを表示できるようにしました。

package main

import (
	"log"
	"net/http"

	"github.com/labstack/echo/v4"
	"github.com/labstack/echo/v4/middleware"
	"github.com/rakyll/statik/fs"
	_ "github.com/twsnmp/twsnmpfc/statik"
)

func main() {
	statikFS, err := fs.New()
	if err != nil {
		log.Fatalln(err)
	}
	e := echo.New()

	e.Use(middleware.Logger())
	e.Use(middleware.Recover())

	h := http.FileServer(statikFS)
	e.GET("/*", echo.WrapHandler(http.StripPrefix("/", h)))

	e.Logger.Fatal(e.Start(":8080"))
}

echoとstatikの組み合わせでSPAを作るのは

A single binary SPA using Go

を参考にしました。

結果、

のようにSPAの雛形が表示できました。

今日の主な作業

nuxt.jsの雛形は自動生成なので記載しません。今日作成、修正したコードは

spa部分をstatikを利用してGO言語のアプリに組み込む · twsnmp/twsnmpfc@609bd57

と

SPAをGO言語のEchoサーバーで表示できるようにした。 · twsnmp/twsnmpfc@24473e2

です。

今日は、ここまで、続きは明日。