フロントエンド開発Blog

オレには鈍器がある

docker , dockerfile , frontend , gulp , webpack

前回、VagrantとAnsibleでフロントエンド開発環境を作るで既に仮想マシン上に開発環境を整えることができました。

今度はDockerで同じようなことができないか試してみました。

参考にさせていただきました

ぱいそんにっきさんの「Docker でフロントエンド開発も楽できるか?」を超参考にさせていただきました。ありがとうございます!とても分かりやすくて助かりました!

Dockerfile

ほぼほぼぱおそんにっきさんのDockerfileまんまです。とりあえず、Ruby2.1が元々入っているimageをcloneして作りました。rubyのバージョンは使いたいバージョンなら何でもOKなはずです。マシンの設定はこざっぱりとDockerfileだけで完結させました。

### Dockerfile

# Pull base image.
FROM ruby:2.1

# Timezone Setting
RUN echo "Asia/Tokyo" > /etc/timezone

# Install Debian
RUN apt-get update
RUN apt-get dist-upgrade -y

# Install Ruby.

# Install Gems
RUN gem install compass

# Install Node.js
RUN \
  cd /tmp && \
  wget http://nodejs.org/dist/v4.4.5/node-v4.4.5.tar.gz && \
  tar xvzf node-v4.4.5.tar.gz && \
  rm -f node-v4.4.5.tar.gz && \
  cd node-v* && \
  ./configure && \
  CXX="g++ -Wno-unused-local-typedefs" make && \
  CXX="g++ -Wno-unused-local-typedefs" make install && \
  cd /tmp && \
  rm -rf /tmp/node-v* && \
  npm install -g npm && \
  echo -e '\n# Node.js\nexport PATH="node_modules/.bin:$PATH"' >> /root/.bashrc

# Install Node modules
RUN \
  npm install -g grunt-cli gulp webpack bower

# Define working directory.
WORKDIR /data

# set up


# Define default command.
CMD ["bash"]

### IMPORTANT !! ###
# you can build image this command
# docker build -t nodejs:v4.4.5 ./

# you can run this
# docker run -itd -v /c/Users/{username}/works/:/data/ nodejs:v4.4.5 /bin/bash

# if you run npm i on docker container on windows host, you must choose option --no-bin-links
# https://docs.npmjs.com/cli/install

vagrant + ansibleのときと比べると、rbenvを使っていないからかもしれませんが随分と短くてすみました。

使ってみた所感としては、Dockerの場合は基本的にhostとの共有フォルダをuserフォルダ以下にしか作れない点が大きな制約になりますね。Dockerは作っては壊す、というルーチンがカンタンで起動や破棄が高速な点が良く、トライアルアンドエラーがvagrantほどしんどくないのが最大の強みかなと思います。

ページトップへ

関連ページ

ページトップへ