Vue-CLIで作ったページをGo/GINで表示する最短手順

Vue-CLIで作ったフロントエンドをGinのバックエンドで配信する方法が意外と見つからなかったため、記事を書くことにしました。

全体的なディレクトリ構成

root
┝ client #フロントエンド、Vue-cliがここに
    ┝ public
    ┝ src
    (その他)
└ server #バックエンド、Goがここに
    ┝ main.go
    (その他)

フロントエンドのセットアップ

普通にVue-cliを作るだけ。

###rootディレクトリにて

# clientフォルダ直下にvue-cliプロジェクトを作成
$  vue create client

フロントエンドのビルド

フロントエンドが書けたら（特に何もしなくともデフォルトでページがあります）、バックエンド側で表示するために下記のコマンドでビルドする必要があります。

フロントエンドを更新したものを反映するには、その度にビルドする必要があります。

$ npm rum build

バックエンドのセットアップ

こちらも普通にgo、ginのプロジェクトを作る要領で。gin/staticもインストールしていることに注意。

### serverディレクトリにて

#モジュールのセットアップ
$ go mod init main

#ginの取得
go get github.com/gin-gonic/gin

#gin/staticの取得
go get github.com/gin-contrib/static

バックエンドの記述

フロントエンドを表示する最小コードを。

main.go

package main

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

func main() {
	router := gin.Default()

	router.Use(static.Serve("/", static.LocalFile("../client/dist", false)))

	router.Run()
}

上記コードで、ルートURLからフロントエンドを閲覧することができます。

確認するには、

$ go run main.go

からの
localhost:8080
へのアクセスで見ることができます。