nginx
vagrant
docker
ローカル開発環境

Vagrant-docker-nginx環境でhtmlをローカルで編集できるようにする

Vagrant上のdockerでnginxを立ち上げコンテンツをローカル(Mac)上で編集できる環境を作成します。

環境

MacOS 10.12.6 (Sierra)
Vagrant 1.9.7
CentOS 7.3(VM)
Docker 17.06.0-ce

下準備

下記ページのnginxの準備ができていること。
Vagrant上のdockerでnginxを作成しホストからアクセスする

コンテンツ用のディレクトリを用意

以下のようにローカル(Mac)上のVagrantディレクトリ内にnginxのコンテンツ用のディレクトリを用意します。

.
├── Vagrantfile
└── docker
    └── nginx
        └── html

Vagrantfileの編集

cd /[vagrant用のディレクトリ]
vi Vagrantfile

Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
 ---略----


#dockerのprovision部分を以下のように編集する
  config.vm.provision "docker" do |d|
    d.run "nginx", image: "nginx", args: "-v /vagrant/docker/nginx/html:/usr/share/nginx/html -p 8080:80"
  end
#ホスト上の/vagrant/docker/nginx/htmlをdocker上の/usr/share/nginx/htmlにマウントする


 # config.vm.synced_folder "../data", "/vagrant_data"
↓上記の行をコメントアウトを外し以下のように編集
config.vm.synced_folder ".", "/vagrant"
#ホストの現在のディレクトリをゲストの/vagrantにマウント

 ---略----
  # SHELL
end

ホストでファイルを編集しnginxに反映されることを確認する

1.以下のファイルを編集する
[vagrant用のディレクトリ]/docker/nginx/html/index.html
この時vagrant rsync-autoのログにrsyncするログが表示されます。

2.http://192.168.33.10:8080/
#IPは設定したもの
をブラウザ等で開き、編集した内容が表示されることを確認する。