初心者がWindows上でRails5の開発環境を整え、Herokuへのデプロイを目指す(enPiT 2017用)

# 1. はじめに
[enPiT](http://www.enpit.jp/)に向けて，今までWebアプリケーション開発に触れたことの無い自分が，Rails開発環境の構築にチャレンジし，やり方をまとめてみました。
目標は以下の通りです。

**Windows上で、**
- VirtualBoxとVagrantで仮想マシンを構築する
- Rails5の環境を構築する
- Github上にpushできるようにする
- HerokuにRailsアプリケーションをデプロイできるようにする

# 2. 構築する環境
windows8.1上で，以下の環境を立てました。

| 種類 | バージョン |
|:-----|:-----|
|VirtualBox|5.1.22|
|Vagrant|1.9.6|
|Ubuntu|16.04.2 xenial|
|Rails|5.1.2|
|Ruby|2.4.1|
|rbenv|1.1.1|
|Node.js|8.0.0|

# 3. 仮想マシンを構築する
## 3.1 VirtualBoxのインストール
下記のURLから，"windows hosts"を選んでダウンロードし，VirtualBoxをインストールしましょう。
<https://www.virtualbox.org/wiki/Downloads>
## 3.2 Vagrantのインストール
下記のURLから，Windows64bitもしくは32bitを選んでダウンロードし，Vagrantをインストールしましょう。
（再起動が求められます）
<https://www.vagrantup.com/downloads.html>

## 3.3 Vagrantのセットアップ
VirtualBoxとVagrantのインストールが終わったら，いよいよ仮想マシンを作ります。
まずは，適当にプロジェクト用のディレクトリを作成し，Vagrantfileを作成しましょう。

```bash:Vagrantfile
$ cd 作業用ディレクトリ
$ vagrant init
```
作業用ディレクトリに'Vagrantfile'ができるので，エディタでVagrantfileを以下のように書き替えます。

``` aa:Vagrantfile
Vagrant.configure("2") do |config|
  config.vm.box = "bento/ubuntu-16.04"
  config.ssh.insert_key = false
  config.vm.network "private_network", ip: "192.168.33.10"
  config.vm.network "forwarded_port", guest: 3000, host: 3000
  config.vm.synced_folder "./workspace", "/home/vagrant/workspace"
end
```

synced_folder(ホスト側のOSとゲスト側のOSの共有ディレクトリworkspace)を作成します。

```bash:共有ディレクトリの作成
$ mkdir workspace
```

以下の2つのディレクトリの中身が共有されます
- ホスト側 Windows  : (作業用ディレクトリ/workspace)
- ゲスト側 仮想マシン(Ubuntu) : (/home/vagrant/workspace) 

以上の設定が終わったら，VMを立ち上げましょう。

```bash:VMの立ち上げ
    $ vagrant up
```

VMが立ち上がったら，接続しましょう。

```bash:VMに接続
    $ vagrant ssh
```

>もし，通常のSSH接続をしたい場合は，以下のコマンドを入力して設定を書き替える必要があります。

>```bash:SSH接続の設定
>    $ vagrant ssh-config --host 192.168.33.10
>```

>設定を書き替えたら，SSHコマンドでも接続できるようになります。

>```bash:SSH接続
>    $ ssh 192.168.33.10
>```

## 3.4 Ubuntuのセットアップ
VMが立ち上がったら，パッケージのアップデートと必要なパッケージをインストールします。

```bash:
    $ sudo apt-get -y update
    $ sudo apt-get -y install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev
```

以上で，仮想マシンの構築は終わりです。

# 4. Railsアプリケーション開発環境を構築する
## 4.1 rubyのインストール
rbenvでRubyのインストールを行います。併せて，ruby-build のインストールも行います。
まずは，rbenvのインストール。

```bash:rbenvのインストール
$ git clone git://github.com/sstephenson/rbenv.git .rbenv
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
$ exec $SHELL
```

続いて，ruby-build のインストール

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

最後に，ruby 2.4.1のインストール

```bash:
rbenv install 2.4.1
```

環境でruby2.4.1を使うようにします

```bash:
rbenv global 2.4.1
```

インストールと設定がうまくいっているか確認しましょう。

```bash:
ruby -v
```

`ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]`みたいなのが表示されれば，rubyのインストールは完了です。

## 4.2 Railsのインストール
以下のコマンドで，Rails5.1.2 をインストールします。

```bash:
$ gem install rails --version="~> 5.1.2"
$ rbenv rehash
```

インストールできているかを確認しましょう。

```bash:
$ rails -v
```

`Rails 5.1.2`と出力されれば，Railsのインストールは完了です。

## 4.3 Node.jsのインストール
以下のコマンドで，Node.jsを入れておきましょう。

```bash:Node.jsのインストール
$ sudo apt-get install -y nodejs npm
$ sudo npm cache clean
$ sudo npm install n -g
$ sudo n stable
$ sudo ln -sf /usr/local/bin/node /usr/bin/node
```

インストールできているか確認

```bash
$ node -v
```

`v.8.0.0`が出力されれば（7/15日時点）Node.jsのインストールは完了です。

## 4.4 Railsアプリケーションの起動
これまでのセットアップが終わったら，実際にRailsアプリケーションを作ってみましょう。  
作業用ディレクトリ(workspace)に移動します。

```bash
$ cd /home/vagrant/workspace
```

Railsアプリケーションを作成します。

```bash:railsアプリケーションの作成
$ rails new hoge
```

作成したアプリケーションのディレクトリに移動し，Railsサーバを起動します。

```bash
$ cd hoge
```

```bash:railsサーバの起動
$ rails server
```

ブラウザ上で，`localhost:3000`を入力すると，下図のようなページが表示されます。
![rails.PNG](https://qiita-image-store.s3.amazonaws.com/0/184017/d098d61d-9914-ecca-5e72-e3bc339a5880.png)

ちなみに，windows上の作業用ディレクトリ（Vagrantfileとかがあるところ）内の，workspaceフォルダには，作成したrailsアプリケーションが共有された状態で入っています。
なので，Windows上の使い慣れたエディタでコーディングしたいときは，このフォルダ内にあるファイルを編集すると，仮想マシン上の作業用ディレクトリ(/home/vagrant/workspace)の中身も自動的に書き替わります。

# 5. Githubの設定とPUSH
## 5.1 gitの設定
[Github](https://github.com/)のアカウントをあらかじめ作っておきましょう。
gitのインストール

```bash:gitのインストール
$ sudo apt-get install git
```

gitに，Githubアカウントのユーザ名とメールアドレスを設定しましょう。

```bash:
$ git config --global user.name "ユーザ名"
$ git config --global user.email "メールアドレス"
```

設定できているか確認します。

```bash:
$ git config --list
```

## 5.2 sshの設定
Githubにssh接続するためには，鍵の登録が必要です。
まずは，SSH鍵を生成します。

```bash:鍵の生成
$ cd ~/.ssh
$ ssh-keygen -t rsa     (何も入力せずに，3回エンターを押します)
```

`id_rsa.pub`というファイルがディレクトリ内に生成されるので，その中身の文字列すべてをコピーしておきましょう。

次に，コピーした鍵をGithubに設定します。
Githubのページの，Settings -> SSH and GPG keys を選んでいき，画面右上の緑色のボタン「New SSH Key」を押します。以下のようなページが出てくるので，Keyの中に先ほどコピーした`id_rsa.pub`の中身をペーストします。その後，「Add SSH Key」を押すと，GithubにSSH鍵が追加されます。
![ssh.PNG](https://qiita-image-store.s3.amazonaws.com/0/184017/4797e1e9-a2e4-f892-2515-2c4cd063861c.png)


GithubにSSH鍵を設定したら，接続できるか確認します。

```bash:接続の確認
$ ssh -T git@github.com
```

接続してもいいかどうかを聞いてくるので，yesを入力します。
Hi ユーザー名～ みたいなのが出力されれば設定完了です。

## 5.3 gitによるバージョン管理とGithubへのPUSH
4.4で作成したRailsアプリケーションのバージョン管理と，Github上のリモートリポジトリへのPUSHを行います。
1. gitリポジトリをローカルに作成し，commitします。

```bash:
$ cd /home/vagrant/workspace/hoge
$ git init
$ git add .
$ git commit -m "Initialize repository"
```

2. github上で，"hoge"リポジトリを作成しましょう
3. リモートリポジトリを追加して，pushします

```bash:
$ git remote add origin git@github.com:(アカウント名)/hoge.git
$ git push -u origin master
```

Github上に作成したhogeリポジトリに，ローカルリポジトリがpushできていることを確認しましょう。

# 6. Herokuへのデプロイ
最後に，作成したRailsアプリケーションをHerokuにデプロイします。
## 6.1 Railsアプリケーションの書き替え
4.4で作成したアプリケーションの内容を少し書き替えます。
まずは，app>controllers内のapplication_controller.rbを書き替えます。

```rb:application_controller.rb変更前 
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
end
```

```rb:application_controller.rb変更後
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  def hello
    render html: "hello, world!"
  end
end
```

次に，Config内のroutes.rbを書き替えます。

```rb:routes.rb変更前
Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
```

```rb:routes.rb変更後
Rails.application.routes.draw do
  root 'application#hello'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
```

最後に，本番環境用の設定を加えるために，Gemfileを以下のように書き替えます。

```rb:Gemfile
source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.2'
# Use sqlite3 as the database for Active Record
#gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :production do
  gem 'pg', '0.20.0'
end
```

Gemfileの内容を変更したので，新しくインストールします。
また，内容を書き替えたので，commitしておきます。

```bash:
$ bundle install --without production
$ git add .
$ git commit -m "add hello"
```

## 6.2 Heroku Toolbeltのインストールと設定
herokuへデプロイするためのアプリケーション「Heroku Toolbelt」を以下の手順でインストールし，設定します。
1. [heroku](https://www.heroku.com/)のアカウントを作成しておきましょう
2. 以下のコマンドで，Heroku Toolbeltをインストールします

```bash:HerokuToolbeltのインストール 
$ wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh
```

3.Herokuアカウントを設定

```bash:HerokuToolbeltの設定 
$ heroku login
$ heroku keys:add
```

メールアドレスとパスワードを入力します
SSH鍵のアップロードを求められるので，yesを選択します

## 6.3 Herokuへのデプロイ
heroku toolbeltの設定が終わったら，ついにHerokuへのデプロイができます。
Railsアプリケーションのディレクトリ内に移動し，Heroku上にリポジトリを作成します。
無事にリポジトリが作成できたら，ローカルリポジトリをpushします。

```bash:
$ cd /home/vagrant/workspace/hoge
$ heroku create
$ git push heroku master
```

最後に，heroku create時に表示されたURL(～herokuapp.com)にアクセスし，ページ上に"hello, world!"と
表示されれば，デプロイ完了です。

# 参考記事
1. [Ruby on Railsの開発環境をVagrantで構築する](http://qiita.com/uu64/items/eb5f64e45a0e39f2dafb)
2. [VagrantインスタンスにSSHでログインする](http://qiita.com/y_arakawa/items/7bb292c999873032e6a4)
3. [【Vagrantドキュメント意訳】11.同期フォルダ](http://qiita.com/ringo0321/items/aec4c543cce63e60a529)
4. [gitHubでssh接続する手順~公開鍵・秘密鍵の生成から~](http://qiita.com/shizuma/items/2b2f873a0034839e47ce)
5. [Ruby on Rails チュートリアル](https://railstutorial.jp/)
5. [ 14.04 から heroku toolbelt で rails アプリをデプロイする](http://loumo.jp/wp/archive/20141114231213/Ubuntu)