Angular(TypeScript)をフロントでサーバサイドをGoで実装する方法

Question

サーバサイドをGoで実装し、フロントをTypeScriptで実装したい

TypeScriptをフロントで使用し、Goをサーバサイドで実装したい場合にどのように実装するかがわかりません。

ディレクトリの構造は以下のようになっています。

Go側でサーバを立てるコードは以下のようになっています。

Serve.go

package main

import (
	"fmt"
	"log"
	"net/http"
	"os"
)

func main() {
	Serve()
}

func AddHandler() {

}

func Serve() {
	dir, _ := os.Getwd()
	httpdir := http.Dir(dir + "/../app/")
	fmt.Println(string(httpdir))
	fileserver := http.FileServer(httpdir)
	stripprefix := http.StripPrefix("/test/", fileserver)
	http.Handle("/test/", stripprefix)
	log.Fatal(http.ListenAndServe(":8080", nil))
}

ng serve --openで行うとフロント側は動くのですが、Go側が動かず、go run Serve.goをするとフロント側が動かないです。

TypeScriptはJavaScriptと違いコンパイルを行うからコンパイルの必要がある事が原因だと思うのですが、その場合にどのように実装すれば良いかご教授お願いします。

Answer 1

ng serveとgo run Serve.goを両方起動した状態で連携を取る必要があります。
それぞれ違うポートで起動すると言うのがまずは必要です。
その上で以下のどちらかが必要です。

• フロントからバックエンドAPIをクロスオリジンで呼び出す
• どちらかのhttpサーバーが他方のサーバーへリバースプロキシする

ng側でプロキシするなら https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md ここを参考に。

go側でプロキシするなら https://golang.org/pkg/net/http/httputil/#example_ReverseProxy こちらを参考に。

Comments

[lkeix_]

ありがとうございます！
だいたい実装の仕方は分かりました。
これをDockerで実装する場合も上のような実装の仕方になるんでしょうか？

[nobonobo]

最終的な成果物としてng側は静的ファイル群になるかと思いますのでそれをGo側のサーバーでサービスするのが良いのではないでしょうか。（実運用時はプロキシは不要）

[lkeix_]

ありがとうございます
色々調べたのですが、angular-cli でフロント側を実装しているので、リバースプロキシで実装してみようかなと思います！