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 & 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 "main" entry in bower.json
bower invalid-meta modernizr is missing "ignore" 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にアクセスすると以下のデフォルトページが表示されます。
Vagrantのプロビジョニングの設定は必要が出てきたらまとめてみたいと思います。