프로그래밍 연습을 위해
1. 서버 사이드를 Go+postgres로 만들(API 서버),
2. 그 데이터를 VueJS로 그리는 앱
3.을 Heroku에 배포했습니다.

자바를 조금 쓴 적이 있는 것만으로, 처음으로 Go와 Vue를 만졌으므로, 엄청 빠졌다…
빠진 곳에 메모입니다.

만든 것
h tps : // 비 ~ pぅs. 어리석은 p. 코m/

5

우선, 이 사이트에서 Go 언어의 작법과 로컬에서의 동작 확인 방법을 확인했습니다. 쓰여진 거리에 하면 움직입니다.

【처음의 Go언어】Go언어로 어플리케이션을 만들어 보자 ~웹서버편~
htps : // ㎃진 c. 이. jp/333868

1.http 요청을 던지면 오류

그 후, 이 를 참고로 하면서, 웹 서버를 세우고, 재차 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. 파라미터의 전달 방법을 모른다

이 기사를 참고로 다음과 같이 설정했다.
htps : // bg. rys t. 코m/엔트리/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를 사용한 예가 많았으므로, 아래의 사이트를 흉내내면 할 수 있었다. htps : // 타로켄. rg /에서 p ぉ y 님 g ゔ 에 ぃ ー 3 ー p 로지 ぇ ct - 헤로 쿠 /

2.API 잘 호출할 수 없음

결론으로서는

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

라고 쓸 뿐이었지만, 빠져 버렸다.
메소드를 분할하면 잘 되지 않았기 때문에, 결국 같은 처리를 3개소에 써 있어, 이것은 아마 해결 방법이 있지만 도착하지 않고.

3.V-for 잘 사용할 수 없다

CLI판이라고 :key를 표시해 줄 필요가 있었다.
참고 : htps : // kn tmr. 하테나 bぉg. 코m/엔트리/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

신인 때 공부한 오라클 덕분에 특별히 곤란하지 않았다.
로컬 환경의 데이터를 내보내 Heroku 환경으로 가져올 때
COPY라고 권한 에러가 나왔으므로,\COPY라고 하면 해소했다.