DIVE INTO CODE

人材紹介会社と連携した本気のカリキュラムと手厚いサポートを提供するプログラミングスクール。
最短わずか6ヶ月でRailsエンジニアとしての独立・転職を支援します。

DIVE10

DIVE10について

DIVE10は、ローカル開発環境構築について学んでいきます。

  • Vagrantを使用してローカル環境開発を作成する
  • VirtualBoxについて学ぶ
  • vagrantについて学ぶ

(注意)この作業は、インストールに時間を有する作業なので時間の余裕がある時に行いましょう。
スムーズに行けば、2時間ほどで終わります。

なぜローカル環境で開発を行う必要があるのか

ここまでCloud9で開発を行ってきましたが、より高速に動作する環境で開発するためローカル(自分のPC)に開発環境を構築する必要があります。
実際の現場でもクラウドIDEでは、なくローカル環境で開発することがスタンダードです。

ローカル環境を構築するためのツール

ローカル開発環境を構築する方法はいくつかありますが、ここからはVirtualBoxとVagrantとgit-bashというツールを使って構築していきます。

  • VirtualBox
  • Vagrant
  • git-bash

VirtualBoxとは

VirtualBoxは、コンピュータ上に仮想マシンを作成するソフトウェアです。
VirtualBoxを使用することで、自分のPCの中に、別のコンピュータを作成できるようになります。

https://diveintocode.gyazo.com/533665339b669ff2c9503aa23f2c1c5c

Vagrantとは

Vagrantは、仮想マシンを管理するツールです。VagrantのVagrantfileによって、仮想マシンの作成・起動・停止などを行います。

<!-- todo 何か図が欲しい -->

git-bashとは

windowsにデフォルトでインストールされているコマンドプロンプト(cloud9でいうターミナル)は、gitなどの開発に必要なコマンドを使用することができません。
そこで、git-bashというCUIを使用します。

VirtualBoxをインストールする

それでは、VirtualBoxをインストールします。

:pencil2: VirtualBoxをインストールするため以下のリンクにアクセスしましょう。

https://www.virtualbox.org/wiki/Downloads

https://diveintocode.gyazo.com/b9fa1b331581bbcb0f1a686c7d0c9419

:pencil2: 自分のOSにあったソフトウェアをダウンロード、インストールしましょう。

https://diveintocode.gyazo.com/977e8c97f54fa2755c1b5edc1375b3ae

設定はデフォルトで大丈夫です。

Vagrantをインストールする

続いて、vagrantをインストールします。

:pencil2: Vagrantをインストールするため以下のリンクにアクセスしましょう。

https://www.vagrantup.com/downloads.html

:pencil2: 自分のOSにあったソフトウェアをダウンロード、インストールしましょう。

https://diveintocode.gyazo.com/8360b7a61328d70d2dd097a8b9c24bbd

※こちらも設定はデフォルトで大丈夫です。

git-bashをインストールする

以下のリンクからgit-bashをインストールしましょう。

https://git-scm.com/download/win

On the desktopにチェックを入れて、Nextを選択します。

https://diveintocode.gyazo.com/9bf3256a4460311ebcb5623de3dfa749

Checkout as-it commit....にチェックを入れます。

https://diveintocode.gyazo.com/06c1a00cb7f23395dace57c4253140eb

Launtch git-bash にチェックをいれて Finishをクリックします。

https://diveintocode.gyazo.com/9bb06a35128b13de77c96c4b81c2b47c

仮想マシンを作成する

vagrant box addコマンドを使用することで、自分のVagrantの中にBoxを作成します。
Boxは、様々なOSの種類のものがありますが、今回はUbuntuというLinuxOSの14versionをインストールします。

:pencil2: git-bashを開いて、以下のコマンドを実行しましょう。

git-bashを開くと以下のような画面が開くので、ここにコマンドを打ち込んでいきます。

https://diveintocode.gyazo.com/10aa160c3e6a2665a660fa84b18a6b9b

git-bash

vagrant box add ubuntu https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/14.04/ubuntu-14.04-amd64.box

(注意)
以下の様なエラーが出る場合

Thanks for wanting to use Vagrant! Unfortunately, this is not the way
to install Vagrant anymore. We now make installers for the various operating
systems Vagrant supports.

Vagrant is no longer distributed as a RubyGem. Please download the latest
version for your operating system from the URL below. If you still wish
to use the RubyGem version, you can manually install version 1.0.7. Note that
the RubyGem version been updated in over a year and will no longer
receive any updates.

Prior to installing Vagrant using the installer, make sure you uninstall
all your Vagrant gems, since they sometimes conflict.

http://www.vagrantup.com

以下を実行してください

gem uninstall vagrant
rbenv rehash

vagrant box addコマンドを実行すると以下のように、表示されるはずです。(コマンド完了まで、しばし時間がかかります。)

$ vagrant box add ubuntu https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/15.04/ubuntu-15.04-amd64.box

==> box: Box file was not detected as metadata. Adding it directly...
==> box: Adding box 'ubuntu' (v0) for provider:
    box: Downloading: https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/14.04/ubuntu-14.04-amd64.box
==> box: Successfully added box 'ubuntu' (v0) for 'virtualbox'!

box: Successfully added box 'ubuntu' (v0) for 'virtualbox'!と表示されれば、成功です。

※以下のようなエラーが発生する場合

An error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.

SSL read: error:00000000:lib(0):func(0):reason(0), errno 10054

ターミナルでrm -rf ~/.vagrant.d/tmp/box*を実行してから、再度$ vagrant box add ubuntu https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/15.04/ubuntu-15.04-amd64.boxを実行してください

Vagrantの初期化を行う

続いて、Vagrantの初期化を行います。

:pencil2: Vagrantの仮想環境設定を管理するフォルダを作成します。

mkdir vagrant
cd vagrant
vagrant init ubuntu

mkdirコマンドでvagrantを使用するためにフォルダを作成し、そのフォルダ上で、vagrant boxの初期化を行います。
vagrant initコマンドで初期化を行うことができます。
またこのコマンドによって、Vagrantfileが生成されます。

エディタをインストールする

これからファイルを編集するため、エディタをインストールしてファイルを編集します。
エディタは、atomをオススメしています。お使いのエディタがあればそちらをお使いください。

以下のURLにアクセスして、して、atomをインストールしましょう。

https://atom.io/

https://diveintocode.gyazo.com/e7568c26714a42de65ca865e1a6a9b69

インストール後、ファイルやフォルダはFileから開くことができます。

https://diveintocode.gyazo.com/fee61a835805771ce8b470362b8960f3

#### :pencil2: VagrantでRuby on Railsを使用するための設定をする

エディタを使用して、Vagrantfileを編集します。
好きなエディタを使用して,作成したVagrandfileを編集しましょう。

config.vm.networkでRailsで使用する3000番ポートのポートフォワーディング設定、
config.vm.synced_folderでローカル上の../vagrant/workspaceと仮想環境上の/home/vagrant/workspace
を共有フォルダにする設定を行っています。

/c/Users/自分のPC名/vagrant/Vagrantfile

Vagrant.configure(2) do |config|
省略
  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # config.vm.network "forwarded_port", guest: 80, host: 8080
  config.vm.network :"forwarded_port", guest: 3000, host: 3000
  config.vm.synced_folder "../vagrant/workspace", "/home/vagrant/workspace", :create => true
  # 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"
省略
end

vagrant用のプラグインをインストールします。

Vagrantfileで行った設定を反映させるためにプラグインをインストールします。
git-bashで以下のコマンドを実行します。

vagrant plugin install vagrant-vbguest

Vagrantを起動する

続いて、Vagrantを起動させましょう。

:pencil2: vagrant upコマンドを使用して、vagrantを起動してください。

コマンド完了まで、しばし時間がかかります。

:pencil2: vagrant sshコマンドして仮想環境上のターミナルに接続しましょう。

$ vagrant ssh
Welcome to Ubuntu 15.04 (GNU/Linux 3.19.0-15-generic x86_64)

 * Documentation:  https://help.ubuntu.com/
vagrant@vagrant-ubuntu-trusty:~$

このように、ターミナルに接続できれば成功です。
vagrant@vagrant-ubuntu-trusty:~$は仮想環境上のターミナルにアクセスしていることを意味しています。

vagrant sshができない場合以下の手順が必要な場合があります。

※vagrant up、vagrant sshができない場合 BIOS仮想環境をONにする

お使いのPCによってはこの手順が必要の可能性があります。

以下の記事を参考にBIOSを以下の通り設定しましょう。

Intel(R) Virtualization Technology: Enabled
Intel(R) VT-d Feature: Enabled

BIOSを起動する方法は、機種によってことなりますので、検索しましょう。 
著者は、windows10のlenovo ideapadで、以下のサイトを参考にしました。

https://support.lenovo.com/jp/ja/documents/ht104064

http://d.hatena.ne.jp/yohei-a/20110124/1295887695

開発環境を構築する

仮想環境を構築することはできたので、Railsを開発するための環境を整えます。
(注意)ここから記載されているコマンドはvagrant sshで仮想環境上のターミナルに接続した状態で行ってください。

:pencil2: ソフトウェアを管理する、apt-getを最新にします。

apt-getはUbuntuで使用されているパッケージ管理システムです。
apt-getを使用して、開発に必要なものをインストールします。

sudo apt-get update
sudo apt-get upgrade

こちらも、しばし時間がかかります。

:pencil2: 開発に必要なソフトをインストールします。

sudo apt-get install git -y
sudo apt-get install curl g++ make vim -y
sudo apt-get install zlib1g-dev libssl-dev libreadline-dev libyaml-dev libxml2-dev libxslt-dev -y
sudo apt-get install sqlite3 libsqlite3-dev nodejs imagemagick libmagickwand-dev -y

:pencil2: git --versionコマンドでgitがインストールされているか確認してください。

git --version
git version 1.9.1

gitのバーション指定は、ありません。

:pencil2: git cloneコマンドでrubyを管理するrbenvをインストールします。

rbenvを使用することで、複数のrubyバージョンを扱えるようになります。

git clone git://github.com/rbenv/rbenv.git ~/.rbenv

:pencil2: rbenvをインストールできたら、初期設定を行います。

echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile

:pencil2: ruby-buildをインストールしましょう。

mkdir -p ~/.rbenv/plugins
cd ~/.rbenv/plugins
git clone git://github.com/rbenv/ruby-build.git

:pencil2: rbenv install -lコマンドでインストール可能な、rubyのバージョンを確認します。

$ cd ~/workspace
$ rbenv install -l
Available versions:
  1.8.6-p383
  1.8.6-p420
  1.8.7-p249
  .....
  省略
  2.3.0-preview2
  2.3.0
  2.3.1
  省略

今回は、ruby 2.3.0 を使用します。

:pencil2: 2.3.0バージョンをインストールします。

rbenv install 2.3.0

:pencil2: インストールしたrubyの2.3.0バージョンをデフォルトで使用するように設定します。

rbenv global 2.3.0
rbenv rehash

:pencil2: rubyのバージョンがインストールされているか確認しましょう。

ruby -v

postgresqlをインストールする

ubuntu14では、デフォルトでpostgresql9.3がインストールされるため、9.4がインストールできるように設定し、9.4をインストールします。

sudo apt-get remove -y postgresql-9.3
sudo sh -c "echo 'deb http://apt.postgresql.org/pub/repos/apt/ trusty-pgdg main' > /etc/apt/sources.list.d/pgdg.list"
wget --quiet -O - https://postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo apt-get update -y
sudo apt-get install -y postgresql-9.4 libpq-dev

インストールが完了したら、以下のコマンドを実行し、postgresqlを起動します。

sudo /etc/init.d/postgresql start

:pencil2: 今まで作成してきたachieveをgit cloneしましょう。

git cloneすることで、Vagrant内にCloud9と同じachieveを作成することができます

git cloneするためには、githubとssh認証する必要があります。
また、SSH認証を行うためには、公開鍵を生成し、GitHub上に置く必要があります。

:pencil2: ssh-keygenコマンドで公開鍵、秘密鍵を作成しましょう。

cd ~/.ssh
ssh-keygen -t rsa -C "GitHubに登録したemail"

ssh-keygenコマンドを実行すると、それぞれこのような文章のところで停止するのでenterを押しましょう。

vagrant@vagrant-ubuntu-trusty:~/.ssh$ ssh-keygen -t rsa -C "GitHubに登録したemail"
Generating public/private rsa key pair.
Enter file in which to save the key (/home/vagrant/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

最終的に、下図のようになれば成功です。

Your identification has been saved in /home/vagrant/.ssh/id_rsa.
Your public key has been saved in /home/vagrant/.ssh/id_rsa.pub.
The key fingerprint is:
cf:52:74:81:b5:ef:9d:34:1d:5e:3a:06:96:b7:91:9d hogehoge@gmail.com
The keys randomart image is:
+--[ RSA 2048]----+
|           oo    |
|          .  + o.|
|          . * +Eo|
|         . o +.++|
|        S .   *+.|
|         +   o.oo|
|        . o   ...|
|         .       |
|                 |
+-----------------+

:pencil2: ls -la コマンドで公開鍵、秘密鍵が生成されたか確認します。

vagrant@vagrant-ubuntu-trusty:~/.ssh$ ls -la
省略
-rw-r--r-- 1 vagrant vagrant  401 May  1 05:00 id_rsa.pub

このように、id_rsa.pubという公開鍵が生成されていれば、成功です。

あとは、Cloud9の公開鍵をGitHubに登録した時と同じようにします。

:pencil2: catコマンドで文字列をCloud9と同様にGitHubに登録しましょう、

cat ~/.ssh/id_rsa.pub

GithubのSetting→SSH and GPG keys より、New Key

https://diveintocode.gyazo.com/dd86a23dde5a848126657f3a7e1cbf87

achieveをGitHubからcloneする。

cloneするために、GitHubからSSH protcol URLをコピーしましょう。

https://diveintocode.gyazo.com/bab0033904aa6826cdad2e542c54a4ec

sshになっていることを確認しコピーします

https://diveintocode.gyazo.com/0a70168afc24afb6ad5b408fa799957a

cd ~/workspace
git clone "コピーしたSSH protcol URL"

cloneすると、github上にあるフォルダやファイルをvagrant上にインストールすることができます。
またyesかnoと聞かれるので、yesと入力し、エンターを押します。

vagrant@vagrant-ubuntu-trusty:~/workspace$ git clone コピーしたSSHprotocolurl
Cloning into 'v2-achieve'...
Warning: Permanently added the RSA host key for IP address '192.30.252.123' to the list of known hosts.
remote: Counting objects: 284, done.
remote: Compressing objects: 100% (10/10), done.
remote: Total 284 (delta 0), reused 0 (delta 0), pack-reused 273
Receiving objects: 100% (284/284), 377.89 KiB | 99.00 KiB/s, done.
Resolving deltas: 100% (104/104), done.
Checking connectivity... done.

アプリをインストールすることができたので、実際にアプリを起動してみましょう。

lsコマンドでアプリが存在しているか確認します。

vagrant@vagrant-ubuntu-trusty:~/workspace$ ls
achieve

cdコマンドを使用して、アプリ起動に移動し起動に必要なコマンドをを実行しましょう。

cd achieve/
gem install bundler
bundle install

データベースの設定を行う

以下のコマンドを実行します。

sudo ln -s /tmp/.s.PGSQL.5432 /var/run/postgresql/.s.PGSQL.5432
sudo vim /etc/postgresql/9.4/main/postgresql.conf

vimエディタが起動するので、

port = 5433port = 5432書き換えます。

vagrantユーザー作成する

vagrant@vagrant-ubuntu-trusty:~/workspace/achieve$ sudo -u postgres psql
psql (9.4.9)
Type "help" for help.

postgres=# CREATE USER vagrant SUPERUSER;
CREATE ROLE

postgres=# \q

データベースとテーブルを作成する

rake db:create db:migrate

railsサーバーを起動して、動作確認する

rails s -b 0.0.0.0

railsサーバーが立ち上がったらhttp://localhost:3000/にアクセスしましょう。

Gitの設定を行う

gitを使用する際は、git configコマンドを使用して、予め自分の情報を登録しておく必要があります。

cd ~/workspace/achieve
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

Herokuへの設定を行う

heroku toolbeltをインストールする必要があります。

cd ~/workspace
wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh

herokuへログインする

heroku login

:pencil2: herokuのremote設定を再度行う

git remote add heroku GitURL

herokuへのGitURLは、HerokuのWebサイトから確認できます。

該当アプリを開いた後に、settingをクリックするとGitUrlを見ることができます。

https://dashboard.heroku.com/apps

https://diveintocode.gyazo.com/a397e26ad02a28d70f840610fc63f921

DIVE10課題

rails s -b 0.0.0.0 実行時のterminal(console)画面のスクリーンショットを提出してください。

(注) 起動しているかどうかを確認するためrails s -b 0.0.0.0前後のコマンドログも見えるようにスクリーンショットを取得してください。

課題に取り組んでみましょう。ご質問等ありましたら無料説明会で承ります。

DIVE INTO CODEの無料説明会を開催中

ハイレベルなプログラミングに入門したい方、フリーランスエンジニアになりたい方、
つくりたいアプリがある方、一歩前へ踏み出すお手伝いいたします。

無料説明会はこちら