Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

ホストOS-Vagrant-Dockerのソースコードをつなぐひとつなぎの秘宝を求めて

Vagrant Docker

f:id:tbpg:20150930223936j:plain

ホストOS-Vagrant-Dockerのソースコードをつなぐひとつなぎの秘宝,
つまり、ローカル環境のソースコードを編集するとVagrantで作成した仮想環境
およびその上に載っているコンテナまで反映する設定を追い求めてラブーン(Docker)にのってVMの海にでます。

構成

プログラムの仕様

現在時刻をランダムなWebフォントで表示するアプリケーションをsinatraで作成します。

プログラムの構成

$ tree
.
├── config.ru
├── Gemfile
├── Gemfile.lock
├── Procfile
├── timer.rb
└── vagrant
    └── Vagrantfile

Local PC - VM - コンテナの構成

f:id:tbpg:20150930224034p:plain

手順

Vagrantfileの初期化

$ vagrant init AntonioMeireles/coreos-stable -m
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.
% cat Vagrantfile
Vagrant.configure(2) do |config|
  config.vm.box = "AntonioMeireles/coreos-stable"
end

Vagrantfileの編集

Vagrant.configure(2) do |config|
  config.vm.provider :virtualbox do |vb|
    vb.name = "timer"
  end
  config.vm.network :private_network, ip: "172.16.33.126"
  config.vm.network :forwarded_port, guest: 4567, host: 4567
  config.vm.box = "AntonioMeireles/coreos-stable"
  config.vm.synced_folder "../", "/home/core/timer", type: "rsync", create: true, owner: "core", group: "core", rsync__exclude: [".git/", "vagrant/"]
  config.vm.provision "shell", inline: <<-EOS
cat <<EOF>Dockerfile
FROM ruby:2.2.3
RUN gem install bundler
RUN gem install foreman
WORKDIR /app
EXPOSE 4567
ADD ./timer/Gemfile /app/Gemfile
RUN bundle install
CMD ["foreman", "start", "-d", "/app", "-f", "/app/Procfile", "-p", "4567"]
EOF
docker build -t tbpgr/timer:latest .
docker run -v /home/core/timer:/app -p 4567:4567 -d tbpgr/timer
  EOS
end

VMを起動

$ vagrant up --provider virtualbox

※cygwinの場合は事前に以下の設定を行う

$ cd /
$ ln -s /cygdrive/c c
$ ln -s /cygdrive/d d

理由は下記記事を参照。
Vagrant - rsyncでファイルを同期する(Windows)

sinatraの起動確認

f:id:tbpg:20150930224004p:plain

HTMLを変更する

  • timer.rbのHTML部分を変更する
<!--変更前 -->
  <div style="font-size:64px;font-family: '$font-family$', sans-serif;">$font-family$</div>
<!--変更後 -->
  <div style="font-size:64px;font-family: '$font-family$', sans-serif;">Web Font $font-family$</div>

$ vagrant rsync
==> default: Rsyncing folder: /path/to/app/timer/ => /home/core/timer
==> default:   - Exclude: [".vagrant/", ".git/", "vagrant/"]
  • VMにssh接続し、コンテナを再起動する
$ vagrant ssh
CoreOS stable (766.3.0)
core@localhost ~ $ docker --version
Docker version 1.7.1, build 2c2c52b-dirty

# 起動中のコンテナの確認
core@localhost ~ $ docker ps
CONTAINER ID        IMAGE               COMMAND                CREATED             STATUS              PORTS                    NAMES
dde837856faa        tbpgr/timer         "foreman start -d /a   3 minutes ago       Up 3 minutes        0.0.0.0:4567->4567/tcp   gloomy_bohr

# コンテナの再起動
core@localhost ~ $ docker restart gloomy_bohr
gloomy_bohr

変更後のsinatraの確認

f:id:tbpg:20150930223949p:plain