Javascriptでの開発
Javascriptの開発が当たり前になり、複数のライブラリを取り扱うようになり、管理やインストール、環境の維持などが結構大変になってきていると思います。
そこでパッケージ管理ツールの導入
Javascriptのパッケージ管理ツールである、bowerを使いたい。最近、いじっているAngularJSのライブラリを見ても、インストールにbower install xxx と書いてありるので、やはりという感じです。
でも開発はWindows？
Macを利用できればそれでいいのですが、Macでない開発環境もある。Windowsで動作させられないかと試行錯誤したのですが、できそうですが面倒で、環境もかなり汚染される感じで、仕事で開発を行う時には使いにくい。
こういうときこそ、Vagrantがいいね！
こういう時こそ、Vagrantを利用するのが良いだろうということで、VagrantとCentOS(これはお好きなディストでどうぞ。インストール等は読み替えてください。）だと環境を作りました。
Vagrantでの実行
以下はCentOSのboxをcentos64等と名前を付けていますので、boxの登録が必要な場合は別途実行してください。
mkdir dev
cd dev
vagrant init centos64
vagrant up
もし、Apache等を入れたうえでその環境を利用したい場合は、
config.vm.network "forwarded_port", guest: 80, host: 10080
等として、ポートをフォワードしておくと便利かもしれません。
仮想マシン上でのnpm/bowerのインストール
作成した仮想マシンにvagarnt sshしておいて、以下のようなコマンドで、パッケージ管理ツールをいれて確認します。
sudo su -
rpm -ivh http://ftp.riken.jp/Linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm
yum install nodejs npm --enablerepo=epel
npm install -g bower
bower -v
yum install git
exit
これでbowerが動く環境が作成できました。
次のポイントはVagrantの特徴であるフォルダ共有を利用します。
/vagrantディレクトリに開発用のライブラリを構築する。
Linuxの/vagrantフォルダは、共有ディレクトリとなっていて、自分のWindows機のVagrantFileを作成したフォルダが/vagrantになっています。（デフォルト機能ですがｗ）
mkdir /vagrant/test
cd /vagrant/test
bower install angularjs
これで利用できるようになります。
Windowsでの開発
WebStorm等で、対象フォルダをプロジェクトフォルダとして開発することで、Javascriptライブラリの管理をbowerで利用できるようになります。
Apacheを利用したい場合は、
sudo su -
yum install httpd
した上で、以下のファイルを作成し、httpdを起動させます。
<Directory /vagrant/test>
Options Indexes FollowSymLinks
</Directory>
Alias /vagrant "/vagrant/test"
対象ディレクトリが http://localhost:10080/vagrant/ で参照できるようになります。（上述した、foward_port設定が必要です）