![見出し画像](https://assets.st-note.com/production/uploads/images/42255775/rectangle_large_type_2_69b35499b2a812e61e957e968f89a351.jpg?width=1200)
TWSNMP FC :シングルページWEBアプリの雛形を作る
TWSNMP FCの開発3日目は、nuxt.jsでシングルページWEBアプリの雛形を作ってGO言語のWEBサーバー(echo)で表示させるまで作りました。猫もちゃんと5時前に起こしてくれました。
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
を使ってGO言語の実行ファイルに組み込むようにしました。
statik/statik.go: spa/dist/index.html
statik -src spa/dist
のようにMakefileに追加しました。
main.goをWEBサーバーにする
main.goを修正してGO言語のWebサーバー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を作るのは
を参考にしました。
結果、
のようにSPAの雛形が表示できました。
今日の主な作業
nuxt.jsの雛形は自動生成なので記載しません。今日作成、修正したコードは
と
です。
今日は、ここまで、続きは明日。
開発のための諸経費(機材、Appleの開発者、サーバー運用)に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。