dockerでSPAなgin + vue + mysqlの環境をさくっと作った話

最初に結論

結論からいうと、できた物はhttps://github.com/Diwamoto/yource/blob/main/docker/docker-compose.ymlにあげてます。
dockerはhttps://github.com/Diwamoto/vagrant-lampの環境で動かしています。
docker on macが遅いみたいなのでこちらをおすすめ。
僕は新しくmacを買ってからdocker on macは利用していないので速度の比較はしてません笑

何をやったかを知りたい人は以下をみてください。

やりたかったこと

golangフロントエンドフレームワーク（今回はvue）の勉強をしたかったので２時間くらいでdockerの環境を作りました。

イメージはこんな感じで

上記イメージ図から、作るべきdockerのコンテナは
・ データベース(mysql5.7)
・ バックエンド(gin)
・ フロントエンド(vue.js)
の三つです。

それでは一つずつ行きます。

DBコンテナ

DBコンテナを自分で作る必要はありません。
dockerの公式イメージであるmysql:5.7を利用しましょう。
また、今回のDBコンテナの役割として、
・ データの永続化
・ configがいじれる
は満たすように作りました。
前作ったdocker-lampのDBをそのまま持ってきて問題なさそうなのでそのまま使いました。

バックエンドコンテナ

バックエンドコンテナはgoの永続化コンテナで、起動時にginを実行するコマンドを実行するだけです。
イメージはgolang:1.16-rc-alpine3.12を利用しました。
とりあえずできたので次はリモートデバッグの手順を整えようとおもいます。
参考:
Docker + Go + Gin の開発環境を準備する - Qiita
GitHub - gin-gonic/gin: Gin is a HTTP web framework written in Go (Golang). It features a Martini-like API with much better performance — up to 40 times faster. If you need smashing performance, get yourself some Gin.

フロントエンドコンテナ

フロントエンドコンテナのvueの環境構築はほぼチュートリアルをそのまま利用しています。
nodeの公式コンテナをたてて、その中でvue-cliからnpm run devしてるだけです。

参考：
Docker上にvue.jsの開発環境を構築する方法。docker-composeで簡単に作成する手順。 - Qiita
【Vue.js】爆速でSPAを作る - Qiita

今後

なぜこの環境を作ったかというと、自分が書く為のslackやdiscordなどの良い感じなところをとったブログサービスを作りたいと思ったからです。
気になる方がいれば上のgithubのリンクから進捗をうかがってくださると助かります。
とりあえずvueでspaの動きは見ることができたので、あとはswaggerで簡単なAPIを作って、それに合わせてgin側でDBアクセスのAPIを作って、フロントを整えて行こうと思います。
ginのvagrant + dockerコンテナのリモートデバッグ環境も整えなきゃ。。。