今からはじめるReact.js〜仮想環境を作成する〜

前回→今からはじめるReact.js〜サーバーサイド〜

#仮想環境を作成する

##仮想環境の基本
当然ですが、様々な人が利用するWEBサービスを実際に構築する場合、開発用の端末とは異なる場所に、自分が作成していたソースを配置する必要があります。

VagrantとVirtualBoxはそういった外部の環境を仮想的に自端末内に構築するためのツールです。それが無料でできちゃうっていうのは時代の進歩を感じます。

今回は仮想環境の中にCentOS、DB(postgreSQL)のインストールと、前回まで作成したサービスが動くところまでを準備します。

##各種インストール

###VirtualBoxインストール
https://www.virtualbox.org/wiki/Downloads
VirtualBoxは仮想環境そのものを管理するツールです。

###Vagrantインストール
https://www.vagrantup.com/downloads.html
Vagrant仮想環境の中身を管理するツールです。

###Vagrant Boxダウンロード
コマンドプロンプト、ターミナルで以下のコマンドを実行し、今回はCentOS6.5があらかじめインストールされた環境を自端末にダウンロードします。
vagrant box add centos65 https://github.com/2creatives/vagrant-centos/releases/download/v6.5.3/centos65-x86_64-20140116.box
vagrant box add に続く「centos65」の部分は自端末でBoxを管理する際の名前になります。
仮想環境の初期化の際に必要になります。また、複数の環境を同じBoxを使って作成することができます。

###仮想環境定義ファイルの作成
作業フォルダに移動し、
仮想環境の定義ファイルを以下のコマンドを実行することで作成します。

cd {作業フォルダ}
vagrant init centos65

「centos65」の部分はBoxダウンロード時につけた名前です。

作業フォルダ直下にVagrantfileというファイルが作成されているはずです。
エディタで内容を編集します。

今回、編集したいのは２箇所です。

Vagrantfile

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  # config.vm.network "private_network", ip: "192.168.33.10"

の最後の行をコメントアウトします。

Vagrantfile

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  config.vm.network "private_network", ip: "192.168.33.10"

これで、ブラウザ上から192.168.33.10で仮想環境にアクセスできます（あくまでも自端末→仮想環境のみ）。

２箇所目は、

Vagrantfile

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  # config.vm.synced_folder "../data", "/vagrant_data"

の最後の行を書き換えます。

Vagrantfile

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  config.vm.synced_folder "src", "/home/vagrant/src", create: true, owner: "vagrant", group: "vagrant"

作業フォルダ直下のsrcフォルダを仮想環境の/home/vagrant/srcと同期する、という意味です（仮想環境にログインする場合、vagrantというユーザーでログインします）。

###仮想環境セットアップ
####vagrant ssh
以上が完了したら、以下のコマンドを実行して仮想環境を稼働させます。
vagrant up

稼働できたら、以下のコマンドで仮想環境に接続します。
vagrant ssh
windows端末の場合、残念ながらそのままだとvagrant sshができません。
TeraTermなどのターミナルを使うか、MinGWでsshとrsyncのインストールして、色々する必要があります。

MinGWで〜の場合は、以下のとおりです。

mingw-getをインストール。
http://sourceforge.net/projects/mingw/files/Installer/
mingw-get-setup.exe

mingw-getを実行し、
msys-openssl
msys-openssh
msys-rsync
のbinをインストール。

環境変数のpathに、「C:\MinGW\msys\1.0\bin」を登録。

下記コマンドを実行
cd {作業フォルダ}
vagrant ssh-config --host ホスト名(任意) >> %HOME%/.ssh/config

新しいコマンドプロンプトを起動し、vagrant sshを実行。

####ruby、heroku、postgreSQLのインストール
vagrant sshしたら、仮想環境にいろいろインストールしてきます。

rubyインストール

$ sudo yum install wget
$ sudo yum -y install gcc zlib-devel openssl-devel readline-devel libffi-devel
$ cd /usr/local/src
$ sudo wget https://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.3.tar.gz
$ sudo tar zxvf ruby-2.2.3.tar.gz
$ cd ruby-2.2.3
$ sudo ./configure
$ sudo make
$ sudo make install

postgreSQLインストール

$ sudo vi /etc/yum.repos.d/CentOS-Base.repo
（編集状態にするには「i」キーを押下してください）
CentOS-Base.repoの [base] と [updates] の箇所に、
  exclude=postgresql*
の一行を追記します。
（保存してファイルを閉じるには、escキーを押下して、「:wq」と打ってenter）
（保存せずファイルを閉じるには、escキーを押下して、「:q!」と打ってenter）
$ sudo yum localinstall http://yum.postgresql.org/9.4/redhat/rhel-6-x86_64/pgdg-centos94-9.4-1.noarch.rpm
$ sudo yum install postgresql94-server postgresql94-contrib

ユーザー：postgresのパスワードを設定してください（忘れないでください）。
$ sudo passwd postgres

postgreSQLを起動します。
$ sudo service postgresql-9.4 initdb
$ sudo service postgresql-9.4 start

postgresのconfigファイルを編集して自端末からアクセスできるようにします.
$ sudo vi /var/lib/pgsql/9.4/data/pg_hba.conf
の最後らへんにある、
 local  all  all  peer
と記述されている箇所を
 local  all  all  trust
とする。
IPv4のMETHOD を
 ident 
から
 trust
に変更。
次の一行を追記。
 host    all         all         192.168.33.1/32      trust
保存して閉じます。

$ sudo vi /var/lib/pgsql/9.4/data/postgresql.conf
 # listen_addresses = 'localhost' 
の「#」を消して、「localhost」を「*」に変更します。
 listen_addresses = '*'

postgreSQLを再起動します。
$ sudo service postgresql-9.4 restart

次回仮想環境を再起動しても、自動的にpostgreSQLが起動されるようにします。
$ sudo chkconfig postgresql-9.4 on

サービスのデプロイ先であるherokuのツール(herokutoolbelt)をインストールします。
herokuはjavaやPHPなど複数の言語についてサポートしており、環境のセットアップをすることなく、利用できるcloud環境です。DBについてもアドオンという形で即座に利用することができます。個人的なサービスを作成する場合は無料版で十分使えます。

herokuのアカウントがない場合はまずはアカウントを作成します。
https://signup.heroku.com/

herokuインストール

$ sudo wget -qO- https://toolbelt.heroku.com/install.sh | sh

$ sudo vi ~/.bash_profile
以下の２行を最下部に追記します。
PATH="/usr/local/heroku/bin:$PATH"
export PATH

ここまできたら、一旦、設定を有効化させるため、仮想環境を再起動させます。
$ exit
で仮想環境から離脱して、
vagrant reload
で仮想環境を再起動します。
ちなみに仮想環境をシャットダウンしたい場合は、
vagrant halt
です。

再起動が完了したら、vagrant sshします。

やることを理解してる前提でここまでのBoxがあれば作業はめっちゃ楽ですね。

####自分が作ったサービスを実行できるようにする。
srcというディレクトリを自端末と仮想環境とで同期する設定にしましたので、
下記の最低限必要なものをインストールしてsrcの中に作ったソースを全ておけば、仮想環境でサービスを起動することができます。
私の場合、下記のようにしました(.DS_Storeは無視してください)。

仮想環境にnpmをインストールします。
$ sudo yum install npm
続いてgulpをインストールします。
$ sudo npm install -g gulp

以降、srcの中に作ったソースを全ておいた前提で話をすすめます。
サービスを起動してみましょう。

$ cd ~/src
$ node server/server.js

server listening on port :5000
とでたら、
Vagrantfileで指定した、192.168.33.10のポート：5000にブラウザからアクセスしてみます。
http://192.168.33.10:5000
ですね。
うまくリストのページが表示されればOKです。

次回→今からはじめるReact.js〜サーバーとの通信〜