初心者がGo+Vue.jsで作ったSPAをHerokuへデプロイする

プログラミングの練習のため
1.サーバサイドを Go+postgresで作り(APIサーバー)、
2.そのデータをVueJSで描画するアプリ
3.を、Herokuへデプロイしました。

Javaをちょっとだけ書いたことがあるだけで、初めてGoとVueを触ったので、めちゃめちゃハマった…
ハマったところメモです。

作ったもの
https://biz-plus.herokuapp.com/

#GO

まず、こちらのサイトでGo言語の作法とローカルでの動作確認方法を確認しました。書いてある通りにやったら動きます。

【はじめてのGo言語】Go言語でアプリケーションを作ってみよう 〜Webサーバー編〜
https://liginc.co.jp/333868

##1.httpリクエストを投げたら、エラー
その後、これを参考にしながら、Webサーバーを立てて、改めてlocalhostへリクエストを送ったところ、以下のエラー。。
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

こちらを参考に、以下の2行を追加しました。

// ヘッダーをセット
w.Header().Set("Content-type", "application/json")
w.Header().Set("Access-Control-Allow-Origin", "*")

##2.herokuのポスグレに接続できない
最初、以下のように書いていたのですが、ヘロクのポスグレの場合はURLを取得すればよかったのでした。

【間違えたほう】
Db, err = sql.Open("postgres", "port=5432 user=postgres dbname=postgres password=XXXX sslmode=disable")
【正しくは】
Db, err = sql.Open("postgres", os.Getenv("DATABASE_URL"))

##3.パラメーターの渡し方がわからない
この記事を参考に以下のように設定した。
https://blog.ryskit.com/entry/2018/07/08/175749

func apiDbHandler(w http.ResponseWriter, r *http.Request) {
v := r.URL.Query().Get("key")
// JSONにする構造体
type ResponseBody struct {
	Infos []search.Infos `json:"info"`
}
readInfo, _ := search.GetInfos(v)
rb := &ResponseBody{
	readPost,
}

#Vue
Vueのお作法はこれを読んだのち、ニューヨークタイムズのAPIを利用したチュートリアルをやった。その後、CDNしかキャッチアップしていないことに気づき、1ページだけのアプリなのでその必要はなかったが、自分のサービスはCLIで作成した。

##1.Herokuにうまくデプロイできない
ググるとexpressを使った例が多かったので、以下のサイトを真似したらできた。
https://taroken.org/deploying-vue-cli-3-project-to-heroku/

##2.APIうまくコールできない

結論としては、

axios.get(url).then((res) => {})

と書くだけだったのだが、はまってしまった。
メソッドを分割するとうまくいかなかったので、結局同じ処理を3か所に書いており、これはたぶん解決方法があるがたどり着けず。

##3.V-forうまく使えない
CLI版だと :keyを表示してあげる必要があった。
参考: https://kntmr.hatenablog.com/entry/2018/08/15/032619

##4.うまく画像表示できない

<div v-for="info in infoList" :key="info">
          <img :src="info.Img">
 </div>

上記のように描画しようとしており、画像のパスも変数にしていて、DBに格納したパス情報をGoでJson形式のデータにして渡していたのだが、そのままだと文字列としてバインドされてしまい、画像がすべて表示されなかった。
requireする必要があったのだが、Goから受け取った値をrequireして返す方法がわからず。。。画像のパスは変数にするのはやめてJS上でロジックを組んで場合によって異なるファイルが表示されるようにした。

// Json取得
  var url = buildUrl(this.birthYear);
  axios.get(url).then((res) => {
      if (res.status === 200) {
        for (var i = 0; i < res.data.infoList.length; i++) {
          //Imgの設定
          if (res.data.infoList[i].Age <= 3) {
            res.data.infoList[i].Img = require("../../assets/age0-3.png");
          } else if (res.data.infoList[i].Age <= 8) {
            res.data.history[i].Img = require("../../assets/age4-8.png");

#Postgres
新人の時に勉強したOracleのおかげで特に困らなかった。
ローカル環境のデータをエクスポートして、Heroku環境にインポートする際に
COPY　だと権限エラーが出たので、\COPYとしたら解消した。