Go(golang) echoとVue-cliをつなげる #Vue.js

Vue-cliでフロントを作ってgo(echo)でホスティングするまでの手順。

Vue-cliでフロントを作る

Vue-cliで作るフロントエンド適当に作ってみます。

vue create frontend
  :

Vue-cliを使ったフロントエンド開発はこちら含め様々な記事があるのでご参考にしていただくとして細かいところは省略。

Go echoでバックエンドサーバを作る

次に本編であるバックエンドを作ります。

mkdir backend
cd backend
go get -u github.com/labstack/echo

-u オプションは依存関係の解決です
proxyが必要な方は http_proxy と https_proxy を環境変数で設定してください

これでgo echoの環境ができたので簡単なサーバを書きます。

main.go

package main

import (
    "net/http"
    "github.com/labstack/echo")

func main() {
    e := echo.New()
    e.GET("/", func(c echo.Context) error {
        return c.String(http.StatusOK, "Hello,World!")
    })
    e.Logger.Fatal(e.Start(":8080"))
}

動かしてみます。

$ go run main.go

ブラウザで http://localhost:8080 でアクセスして Hello,World! と出ることを確認してみましょう。

今回はフロントエンドにはVue-cliを使いたいので静的ファイルを返すようにサーバーのコードを書き換えます。
/ に来たアクセスに対して public フォルダを見るようにルーティングを追加します。

とりあえずpublicフォルダを作っておいて、

cd backend
mkdir public

コードでは e.Static("/","public/") のように静的ファイルのルーティングを追加。

main.go

package main

import (
    "net/http"
    "github.com/labstack/echo")

func main() {
    e := echo.New()
    e.Static("/","public/")
    e.GET("/hello", func(c echo.Context) error {
        return c.String(http.StatusOK, "Hello,World!")
    })
    e.Logger.Fatal(e.Start(":8080"))
}

ここまででバックエンド側の準備はいったんおしまい。

次に、準備ができたところでVue-cliで作ったフロントエンドとつなげます。
つまりはVue-cliのビルド結果（通常はdistフォルダ）を先ほど作ったbackendの public に出力するように変更していきます。

configの2か所のパスを書き換えます。

frontend/config/index.js

    :
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../backend/public/index.html'),  ← ここ

    // Paths
    assetsRoot: path.resolve(__dirname, '../../backend/public'),  ← ここ
    :

そしてVueのビルドを行います。

cd ../frontend
npm run build

これで元々はdistに出ていたファイル一式が ../backend/public にできるはずです。

../backend/public/index.html や ../backend/public/static/ が出来上がっていることを確認してください

ということで改めてgoのサーバを起動します。

go run main.go

http://localhost:8080/ ではVue-cliで作ったフロントエンドが表示されて、
http://localhost:8080/hello ではGoで作ったAPIで Hello.World! が表示されたと思います。

まとめ

ということでGo EchoでVue-cliのフロントのホスティングができて、ついでに、Go Echo のAPIも動かせました。

APIといっても Hello,World! 返してるだけですが、jsonとか返すようにすれば立派なAPIになります

フロントはVueで組んでちょっとしたAPIはGoで作る環境が整ったということで、モダンなWebサービスの環境が構築することができました。

おしまい