dockerでフロントの開発環境を作ろうとした話

こんにちは、ソウルジェムが日々濁っているゆずです

タイトル通り今回は開発環境をdocker化しようとした話なんだけど結果的に実現できず妥協したので、いい方法知ってる人はtwitterなりで教えていただけると嬉しいです

tl;dr

• ローカルでyarn installして、ビルド自体はdocker上でやるようにした
• ローカルでyarn installしとかないとエディタが型解決したりできない
• ビルドした成果物だけが欲しい時はdockerさえあれば成果物だけ取得できる

動機

本番は使わせてもらえなさそうなので、開発環境ならdocker化しても文句言われないしぼっちプロジェクトチームなのでバレないだろうと思いたち、とりあえず手元にあったフロントのプロジェクトをdocker化にチャレンジしてみた

実現したいこと

docker-compose up -dしたら開発に参加できる*1

やったこと

とりあえずdocker-compose.yml書く

既に1000000煎じくらいなので誰かがやってるだろと、検索したらこれだよみたいなの見つけた

qiita.com

これを参考にdocker-compose.yml書いた

version: "3"
services:
  build:
    image: node:10
    working_dir: /app
    restart: always
    command: yarn run watch:dev # yarn install && webpack -d -w
    volumes:
      - .:/app
      - node_modules:/app/node_modules
volumes:
  node_modules:
    driver: local

これでいいかーという感じだったが、これだとエディタ（例えばVSCodeとか）がimport解決できないし、git cloneした時にnode_modulesがdocker権限でできてしまいyarn installできなくなってしまう

結局

.gitkeepみたいなの置くのは嫌だったので、結局volumesにnode_modules以外のビルドに必要なファイルを個別で指定するようにした

version: "3"
services:
  build:
    image: node:10
    working_dir: /app
    restart: always
    command: yarn run watch:dev # yarn install && webpack -d -w
    volumes:
      - ./public:/app/public
      - ./src:/app/src
      - ./package.json:/app/package.json
      - ./tsconfig.json:/app/tsconfig.json
      - ./webpack.config.js:/app/webpack.config.js
      - ./yarn.lock:/app/yarn.lock
      - node_modules:/app/node_modules
volumes:
  node_modules:
    driver: local

基本的にはsrc以下が増えていくはずなので、volumesを変更することって無いだろうなということで、これで少しの間開発していこうと思ってる

これで一応docker-compose up -dとかして、手元でyarn installすれば開発できる*2

*1:結果的には妥協した

*2:この2度手間感なんとかしたい…