自己紹介
Twitter @mochizukikotaro
普段の仕事は、
- Rails、CakePHP がメイン
- Laravel はこれから入門
- Vue.js、AWS、GCP、k8s、Go は少し触ります
プライベートで、
- SPA の Webアプリケーションを作り中
- 英語勉強中。2019年中に TOEIC 900点をとりたい（615点/2018年）
構成
今
Vue.js + TypeScript + Go + GAE/Go 1.11
1年前
Vue.js + Vuex + Go + heroku
変更の理由
- わりと勉強がてらのプロジェクトなので、深い理由はなく。
- TS はみんなが良いっていうから。
- GAE/Go は Go の runtime を動かすだけなら 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 使うので、オブジェクトがどんなものか分かるし、エディタの補完も気持ちいい。
<script lang="ts">
export interface IUser {
ID: number;
ScreenName: string;
TwitterID: number;
ProfileImage: string;
}
</script>
interface に対して I prefix を使う使わない問題みたいのもあるようですが、ぼくは結論 I をつけています。
GAE/Go へのデプロイが楽
runtime: go111
$ gcloud app deploy
これだけで、GAE にデプロイができる。
開発環境の CORS について
開発環境は docker-compose でやっていますので、node(frontend) と go(backend) のコンテナがあります。
version: '3'
services:
golang:
ports:
- "8081:8080"
...
note:
ports:
- "8080:8080"
...
node は loalhost:8080 で server は localhost:8081 で動かしているので、フロントからサーバーへのリクエストで CORS 問題がおきます。
以前はサーバー側でなんとかしてました 🙄
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
AllowOrigins: []string{"http://localhost:8080"},
AllowCredentials: true,
}))
今は vue の proxy で対応 😀
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 しておかないと、本当に無駄な時間をすごくことになるとおもいます。（泣きそうでした 😣
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