Angular/cliでビルドしたdistファイルをGAE/GOで描画する方法

Question

Angular/cliでビルドしたdistファイルをGAE/GOで描画したいのですが、うまく行きません。

やっていることは、

func init() {
  http.Handle("/", &templateHandler{filename: "index.html"})
  http.HandleFunc("/api/", restHandler)
}

type templateHandler struct {
  once     sync.Once
  filename string
  tpl      *template.Template
}

func (t *templateHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {

	t.once.Do(func() {
		t.tpl = template.Must(template.ParseFiles(filepath.Join("templates", t.filename)))
	})
	t.tpl.Execute(w, nil)
}

templatesフォルダーにdistのファイルを入れてindex.htmlを描画できると思ったのですが下記のエラーにつまずいてしまいます。

Uncaught SyntaxError: Unexpected token

フロントサイドはAngularでサーバーサイドはGAE/GOでやっている方いらっしゃったらどのような感じでやっているのか教えてください。

Answer 1

おそらくですが、index.htmlの配信には成功していてもそこから要求されるmain.bundle.jsなどのリソースが正しく配信されていないのだと思います。
Chromeの開発者ツールのNetworkタブなどで、JavaScriptファイルのリクエストとレスポンスを確認してみてください。

推測では静的ファイルに対するすべてのリクエストがindex.htmlと同じHTMLファイルとして返却されていると思いますので、AngularではなくGoのhttp.Handle周りのほうの問題でしょう

Comments

[kaoru3151]

コメントありがとうございます。
Goのhttp.Handle周りのhttp.FileServerでJavascriptファイルは解決しました。

ただ、無理やりGAE/GOにフロントのコードを載せた感が強いですね。。
サーバー側GAE/GOで、フロント側Angularでときっちり分けてやり取りをしたほうがいいんでしょうか？

[laco]

GAE/Goですとhttp.Handle("/", )でファイル配信するのはよくある一般的なものだと思いますが、仰る通りGAEはAPIに専念して、フロントエンドは別のホスティングサービスなどで配信するのもアリだとは思います。
もちろんその際はCORSの設定など必要になります。

[kaoru3151]

回答、ありがとうございます。
Httpアクセス制御も必要になりますけど、別のホスティングサービスを利用して、GEO/GOはREST APIに専念したほうが、作業を分けやすい感じがするので、そちらでやっていこうと思います。
ありがとうございました。