YEOMAN開発環境をVagrant Ubuntu 14.04にセットアップ


YOEMANの開発環境をVagrantのUbuntu 14.04環境にセットアップする手順をまとめてみました。
改めてUbuntuへNodeをクリーンにインストールしてみると、なかなかベストプラクティスっぽいものが見つからず悩ましかったです。Vagrant使うのにnvm使うのも微妙な感じもしますしどうしたものか。

開発環境のセットアップ

新しい環境Ubuntu 14.04へのセットアップしてみます。

Vagrantで新しいUbuntuを用意
ポート9000をホストにフォワードするように設定を追加しています。

$ vagrant init ubuntu/trusty64
$ vim Vagrantfile
  config.vm.network "forwarded_port", guest: 9000, host: 9000
$ vagrant up
$ vagrant ssh

Ubuntuへのパッケージインストールについての公式ドキュメント Installing Node.js via package manager · joyent/node Wiki

$ curl -sL https://deb.nodesource.com/setup | sudo bash -
$ sudo apt-get install nodejs
$ node -v
v0.10.33
$ npm -v
1.4.28

注意: 普通に”apt-get update & apt-get install nodejs”とやるとnodeにパスが通らないので、公式のsetupシェルを利用する方が簡単です。

gitもbowerで使うので必要です。

$ sudo apt-get install git

YEOMAN Grunt Bowerをインストールします。

$ sudo npm install -g yo grunt-cli bower
$ sudo npm install -g generator-webapp

グローバルインストールなのでsudoが必要
しかし、後でyo generatorを実行するとエラーになるので~/.npmのオーナーをvagrantに変更しておく
node.js – NPM throws error without sudo – Stack Overflow

$ sudo chown -R vagrant:vagrant ~/.npm

プロジェクトの生成

Getting started with Yeoman | Yeomanの通りにweb appプロジェクトを作ってみます。

$ cd /vagrant
$ yo webapp

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
? What more would you like? (Press <space> to select)
❯◉ Bootstrap
 ◯ Sass
 ◯ Modernizr

---
? What more would you like? Bootstrap, Sass, Modernizr
? Would you like to use libsass? Read up more at 
https://github.com/andrew/node-sass#node-sass: (y/N) 

---
https://github.com/andrew/node-sass#node-sass: Yes
   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create .bowerrc
   create bower.json
   create .jshintrc
   create .editorconfig
   create app/styles/main.scss
   create app/favicon.ico
   create app/robots.txt
   create app/index.html
   create app/scripts/main.js
   invoke   mocha


I'm all done. Running bower install &amp; npm install for you to install the required dependencies. If this fails, try running the command yourself.


   create     test/bower.json
   create     test/.bowerrc
   create     test/spec/test.js
   create     test/index.html
[?] May bower anonymously report usage statistics to improve the tool over time? Yes
bower not-cached    git://github.com/chaijs/chai.git#~1.8.0? (Y/n) y
bower resolve       git://github.com/chaijs/chai.git#~1.8.0
bower not-cached    git://github.com/mochajs/mocha.git#~1.14.0
bower resolve       git://github.com/mochajs/mocha.git#~1.14.0
bower download      https://github.com/chaijs/chai/archive/1.8.1.tar.gz
bower download      https://github.com/mochajs/mocha/archive/1.14.0.tar.gz
bower extract       chai#~1.8.0 archive.tar.gz
bower extract       mocha#~1.14.0 archive.tar.gz
bower resolved      git://github.com/chaijs/chai.git#1.8.1
bower mismatch      Version declared in the json (1.12.0) is different than the resolved one (1.14.0)
bower resolved      git://github.com/mochajs/mocha.git#1.14.0
bower install       chai#1.8.1
bower install       mocha#1.14.0

chai#1.8.1 bower_components/chai

mocha#1.14.0 bower_components/mocha
[?] May bower anonymously report usage statistics to improve the tool over time? Yes
bower not-cached    git://github.com/twbs/bootstrap-sass.git#~3.2.0
bower resolve       git://github.com/twbs/bootstrap-sass.git#~3.2.0
bower not-cached    git://github.com/Modernizr/Modernizr.git#~2.8.2
bower resolve       git://github.com/Modernizr/Modernizr.git#~2.8.2
bower download      https://github.com/twbs/bootstrap-sass/archive/v3.2.0+2.tar.gz
bower download      https://github.com/Modernizr/Modernizr/archive/v2.8.3.tar.gz
bower extract       bootstrap-sass-official#~3.2.0 archive.tar.gz
bower resolved      git://github.com/twbs/bootstrap-sass.git#3.2.0+2
bower extract       modernizr#~2.8.2 archive.tar.gz
bower invalid-meta  modernizr is missing &quot;main&quot; entry in bower.json
bower invalid-meta  modernizr is missing &quot;ignore&quot; entry in bower.json
bower resolved      git://github.com/Modernizr/Modernizr.git#2.8.3
bower not-cached    git://github.com/jquery/jquery.git#>= 1.9.0
bower resolve       git://github.com/jquery/jquery.git#>= 1.9.0
bower download      https://github.com/jquery/jquery/archive/2.1.1.tar.gz
bower extract       jquery#>= 1.9.0 archive.tar.gz
bower resolved      git://github.com/jquery/jquery.git#2.1.1
bower install       bootstrap-sass-official#3.2.0+2
bower install       modernizr#2.8.3
bower install       jquery#2.1.1

bootstrap-sass-official#3.2.0+2 bower_components/bootstrap-sass-official
└── jquery#2.1.1

modernizr#2.8.3 bower_components/modernizr

jquery#2.1.1 bower_components/jquery
npm WARN package.json my-yo-webapp@ No description
npm WARN package.json my-yo-webapp@ No repository field.
npm WARN package.json my-yo-webapp@ No README data

> phantomjs@1.9.12 install /home/vagrant/my-yo-webapp/node_modules/grunt-mocha/node_modules/grunt-lib-phantomjs/node_modules/phantomjs
> node install.js

Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2
Saving to /tmp/phantomjs/phantomjs-1.9.8-linux-x86_64.tar.bz2
Receiving...
  [=======================================-] 98% 0.0s
Received 12854K total.

...

grunt-sass@0.14.2 ../node_modules/grunt-sass
├── object-assign@1.0.0
├── each-async@1.1.0 (onetime@1.0.0, setimmediate@1.0.2)
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
└── node-sass@0.9.3 (object-assign@0.3.1, node-watch@0.3.4, mkdirp@0.3.5, nan@1.0.0, chalk@0.4.0, shelljs@0.2.6, optimist@0.6.1, node-sass-middleware@0.2.0, mocha@1.18.2, sinon@1.9.1)

初回は、bowerコンポーネントのインストールとgrunt関連のモジュールのインストールで時間がかかります。

プロジェクトのディレクトリ構成は以下のようになります。

$ tree -L 2
.
├── Gruntfile.js
├── Vagrantfile
├── app
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   └── main.js
│   └── styles
│       └── main.scss
├── bower.json
├── bower_components
│   ├── bootstrap-sass-official
│   ├── jquery
│   └── modernizr
├── node_modules
│   ├── apache-server-configs
│   ├── grunt
│   ├── grunt-autoprefixer
│   ├── grunt-concurrent
│   ├── grunt-contrib-clean
│   ├── grunt-contrib-concat
│   ├── grunt-contrib-connect
│   ├── grunt-contrib-copy
│   ├── grunt-contrib-cssmin
│   ├── grunt-contrib-htmlmin
│   ├── grunt-contrib-imagemin
│   ├── grunt-contrib-jshint
│   ├── grunt-contrib-uglify
│   ├── grunt-contrib-watch
│   ├── grunt-mocha
│   ├── grunt-modernizr
│   ├── grunt-newer
│   ├── grunt-rev
│   ├── grunt-sass
│   ├── grunt-svgmin
│   ├── grunt-usemin
│   ├── grunt-wiredep
│   ├── jshint-stylish
│   ├── load-grunt-tasks
│   └── time-grunt
├── package.json
└── test
    ├── bower.json
    ├── bower_components
    ├── index.html
    └── spec

37 directories, 9 files

ホストマシンから見れるようにするために、バインドするホストを修正します。

// Gruntfile.js
    connect: {
      options: {
        port: 9000,
        open: true,
        livereload: 35729,
        // Change this to '0.0.0.0' to access the server from outside
        hostname: '0.0.0.0'
      },
    }

テストサーバーを起動します。

$ grunt serve

http://localhost:9000にアクセスすると以下のデフォルトページが表示されます。

hello-yeoman-webapp

Vagrantのプロビジョニングの設定は必要が出てきたらまとめてみたいと思います。

,