Yeomanのgenerator-angularで作ったプロジェクトをVagrant環境で開発する場合の設定

JavaScript

Yeomanで作ったプロジェクト関係なくて、単にVagrant環境で開発する時にホスト側のブラウザとかで確認したい時の話。

こういう場合にgrunt-contrib-connectの設定で、こういうのを見かける↓

#Gruntfile.coffee
     connect: 
       options: 
         port: 9000
         livereload: 35729
         # change this to '0.0.0.0' to access the server from outside
         # hostname: 'localhost'
         hostname: '192.168.x.x'

これだと、ゲスト側のIPアドレスを覚えていないといけない。

ので、こうした。

#Vagrantfile

Vagrant.configure("2") do |config|
  config.vm.hostname = "hostname"
  config.vm.box = "some/box"
  config.vm.network :private_network, ip: "192.168.x.x"
  config.vm.network "forwarded_port", guest: 3000, host: 3000
  config.vm.network "forwarded_port", guest: 9000, host: 9000
  config.vm.network "forwarded_port", guest: 35729, host: 35729
  # ........

#Gruntfile.coffee
   connect:
      options:
        port: 9000
      # Change this to '0.0.0.0' to access the server from outside.
        hostname: "0.0.0.0"
        livereload: 35729

これでホスト側でlocalhost:9000にアクセスすればOK。
192.168.x.x:9000でもアクセス出来る。
ライブリロードも効く。NFS使ってるとライブリロードがちょっと遅いのが難点。そこだけどうにかしたい。

後、Gruntfileでhostをlocalhostと設定していたところは127.0.0.1に修正しといた。 ちなみにUbuntuのイメージ使ってる。