자기소개

Twitter @ Mochizuki Kotaro

평소의 일은

Rails, CakePHP 메인

Laravel은 앞으로 입문

Vue.js, AWS, GCP, k8s, Go는 조금 만집니다.

비공개로,

SPA 웹 응용 프로그램 만들기 중

영어 공부 중. 2019 년 동안 TOEIC 900 점을 취하고 싶다 (615 점/2018 년)

구성

지금
Vue.js + TypeScript + Go + GAE/Go 1.11

1년 전
Vue.js + Vuex + Go + heroku

변경 이유

비교적 공부가 엄청난 프로젝트이므로, 깊은 이유는 없어.

TS는 모두가 좋다고 하기 때문에.

GAE/Go는 Go의 런타임을 움직일 뿐이라면 heroku보다 간단한 이미지이기 때문에.

Vuex 는 전 힘들고, 지금은 재작성중에 거기까지 크지 않기 때문에. 그래서 앞으로 도입할 가능성은 높다.

Vue.js + TypeScirpt + Vuex 사용하고 있다면 느낌을 말해주세요.

좋은 점, 배운 점

TS 기분 좋음

GAE/Go에 배포하기 쉽습니다

개발 환경의 CORS는 vue 의 proxy 로 대응

곤란한 점

TS의 declaration file이 없는 문제

GAE/Go 의 표준 환경이라면 인스턴스에 ssh 할 수 없다 (그런 곤란하지 않다)

GAE/Go에 배포 gcloud app deploy 느린

좋은 점, 배운 점

TS 기분 좋은

너무 열심히하지 않습니다. 사용할 수있는 곳은 사용하는 느낌입니다.
예를 들어 interface 사용하므로, 객체가 어떤 것인지 알고, 에디터의 보완도 기분 좋다.

IUser.vue

<script lang="ts">
export interface IUser {
  ID: number;
  ScreenName: string;
  TwitterID: number;
  ProfileImage: string;
}
</script>

interface 에 대해 I prefix 를 사용하는 사용하지 않는 문제인 것도 있는 것 같습니다만, 저는 결론 I 를 붙이고 있습니다.

GAE / Go에 배포하기 쉽습니다.

app.yaml

runtime: go111

$ gcloud app deploy

이것만으로 GAE에 배포할 수 있습니다.

개발 환경의 CORS 정보

개발 환경은 docker-compose 로 하고 있으므로, node(frontend) 와 go(backend) 의 컨테이너가 있습니다.

docker-compose.yml

version: '3'
services:
  golang:
    ports: 
      - "8081:8080"
      ...
  note:
    ports:
      - "8080:8080" 
      ...

node 는 loalhost:8080 이고 server 는 localhost:8081 로 이동하고 있으므로 프런트에서 서버로의 요청에 CORS 문제가 있습니다.

이전에는 서버 측에서 어떻게 든 했습니다 🙄

server.go

e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
    AllowOrigins:     []string{"http://localhost:8080"},
    AllowCredentials: true,
}))

지금은 vue의 proxy로 대응 😀

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://golang:8080'
      }
    }
  }
}

이제 AllowOrigins 라든지 쓰지 않아도 되었습니다.

Vue CLI 3 Configuration Reference: devServer.proxy

곤란한 점

TS declaration file이 없는 문제

무언가의 패키지를 사용하고 있는 상태로 yarn build 등하면 나타나는 에러.

import Prism from "vue-prism-component";

$ yarn build
...
Could not find a declaration file for module '...'.

PullRequest를 살펴보면

제대로 하고 있습니다. 하지만 병합되지 않았습니다.



병합되기를 기도합니다 ... 🙏

결국 무슨 일이야

이번에 사용하고 싶었던 것은, vue-prism-component 라고 하는 코드 하이라이터의 Prismjs 를 vue 로 사용하기 쉽게 하는 패키지였습니다.



그래서, vue-prism-component 를 사용하지 않고 직접 Prismjs 를 사용해 조금씩 먹으려고 했습니다만....

뭔가 잘 움직이지 않았기 때문에 프런트에서 하는 것을 그만두고, 서버 측에서 대응하기로했습니다 😳

chroma : A general purpose syntax highlighter in pure Go

결과, 프런트의 컴퍼넌트 구성등이 깨끗이 해 좋았습니다....

GAE/Go 1.11 문제

스탠다드 환경이라면 ssh 할 수 없지만 유연한 환경이라고 할 수 있을 것 같아요.

gcloud app deploy 는 보통 느리다고 생각합니다만, .gcloudignore 로 적절하게 ignore 해 두지 않으면, 정말로 쓸데없는 시간을 굉장하게 된다고 생각합니다. (우는 것 같았다 😣

.gcloudignore

frontend/node_modules/
frontend/public/
frontend/src/
vendor/

이상 감사합니다!

보충(전체 파일 구성)

$ tree . -L 2
.
├── Gopkg.lock
├── Gopkg.toml
├── README.md
├── app.yaml
├── containers
│   ├── golang
│   └── node
├── db
│   └── db.go
├── docker-compose.yml
├── frontend
│   ├── README.md
│   ├── babel.config.js
│   ├── dist
│   ├── node_modules
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── vue.config.js
│   ├── yarn-error.log
│   └── yarn.lock
├── handler
│   ├── about.go
│   ├── auth.go
│   ├── note.go
│   └── user.go
├── highlight
│   ├── transform.go
│   ├── transformNote.go
│   ├── transformNote_test.go
│   └── transform_test.go
├── migrations
│   ├── 1812151700_add_users_table.down.sql
│   ├── 1812151700_add_users_table.up.sql
│   ├── 1812160000_add_notes_table.down.sql
│   └── 1812160000_add_notes_table.up.sql
├── model
│   ├── note.go
│   └── user.go
├── repository
│   └── note.go
├── server.go
├── templates
│   └── index.html
└── vendor
    ├── github.com
    └── google.golang.org