Docker-composeでNuxtとRailsの環境を作った

はじめに

github.com

できたものに関してはgithubで公開しています。 正直これ以上どうすれば良くなるかがわからないのでもっとこうしたほうがいいよとかあれば教えてほしいです。

RailsのPJにwebpackerでVuejsを入れてerbだったりでごりごりフロント書いてみたのですが、

• backend、frontendでの責務をきちんと分けたい。
• 拡張性を考えたmicro service的な環境を用意しておきたい。
• Nuxtjs触ってみたい。

ここを意識して作りました。

工夫

dev側

• Gemfileやpackage.json書き換え(yarn addコマンドなど)の際、docker-compose buildのする必要が無いように

Dockerfileの書き方によっては、build後、Gemfileの書き換えなどが起こるたびにbuildし直す必要があると知って、開発にとって工数を取るなと感じました。そんな構成にはしたくない、dokcer-compose.dev.ymlに関してはvolumesを使ってlocalのファイルをマウントすることで、適宜コンテナ内のファイルを変更、以下コマンドを実行することでbuildし直すことはありません。

# Nuxtの側でpackage.jsonに変更が
docker-compose run --rm frontend yarn install

# Rails側でGemfileに変更が
docker-compose run --rm backend bundle install

prod側

• なるべくコンテナのsizeを軽くする(multi-stage build)

Docker ver.17以降、Dockerfileに複数のFROM句を書けるようになりましたが、これが大変便利。 利点として、複数のイメージから必要なファイルだけをコピーしてきて、新たなイメージを作成することが出来る、これに尽きると思います。

NuxtjsのDockerfileを見てみるとわかります。

https://github.com/fussy113/NuxtRails/blob/master/frontend/Dockerfile

見るべきは、

FROM node:8.12-alpine as builder

FROM node:8.12-alpine

似たようなFROM句が２つ書いてあります。

• (builder) ADD ./ ./ で必要なファイルを追加して、RUN yarn buildを実行している

• 実行イメージには、以下コマンドで必要最低限のファイルのみ加えている。

ADD package.json ./
ADD nuxt.config.js ./

COPY --from=builder /var/www/node_modules ./node_modules/
COPY --from=builder /var/www/.nuxt ./.nuxt/
COPY --from=builder /var/www/static ./static/

これと同様のこともRails側で行い、それぞれ2/3程度のコンテナサイズにまで縮小できました。

変更前のコンテナサイズ

dbコンテナが一番大きくなるという結果に...

終わりに

docker-compose、dockerの勉強も兼ねて良いものができたと思っています。 dbサイズの縮小であったりとかdocker-sync使ってmount部分をもっと早めるとかはできそうですね

大晦日に会社の同期とハッカソン的にものづくりしようかなと思っているので、これ使ってなにか作ろうかなと思います。 わくわく