初学者向け:CI連携やHerokuへの自動デプロイも含めたRails環境構築の手引書

本記事のサマリ

ここでは、RubyOnRailsでWebアプリを作る環境を構築するための手順を紹介したいと思います。
円滑に開発が進められるように、無料でできる範囲で自動テストや自動デプロイみたいもやって見ましょう。

こんな感じでリポジトリ見たときにバッチがつけられると、見栄えも良いですしね。
Kobito.qoYMkm.png

トピックとしては以下の通りです。
* 「GitHub」を使ってバージョン管理
* 「Travis-CI」を使ったテストの実施
* 「codecov」によるカバレッジの収集
* 「codeclimate」による静的解析の実施
* 「heroku」を使って公開

対象読者

  • railsで、そこそこモダンな開発環境(手元の環境というよりGitHubと連携できるサービス連携という意味)を使ってみたいけど、どうやっていいかわからない方
  • Webポートフォリオを作りたいけど、いい感じの環境が手元にない方
  • 補足:ローカルでもそれなりに開発できるようにvagrantで仮想環境を構築していますが、常時ネットワークで接続しているような人は、cloud9 を使うのもオススメです。 ### 前提条件
  • Vagrantがインストールされていること

動作確認バージョン

vagrant --version
-> Vagrant 1.9.3

VirtualBoxのバージョン↓
Kobito.H6xNXY.png

経緯

ITエンジニアの就活や転職活動などで、ポートフォリオとして何か作っている人が多くなってきている一方で、ポートフォリオをどう作っていいかわからなくて困っている人がいたり、プログラムだけで動いているものを見ることができなかったり、色々ともったいない人が多いように感じています。
せめて、作る環境とみせる環境くらいは悩まずに進んで欲しいと思い、まとめて見ました。
また、Githubと簡単に連携できるサービスを使って、より本質的な部分に集中つつ、品質もケアする実用的な部分も加味して見ました。

とりあえずGitHubのアカウントを作る

GitHubのアカウントがない人は、アカウントを作りましょう。これがないと始まらないほど重要なサービスです。
[https://github.com]

こんな感じで、ユーザ名とemailとパスワードを入力して、「Sign up for GitHub」ボタンをクリックする。
Kobito.2CJJti.png

デフォルトで、無料プランが選択されているので、そのまま「Continue」ボタンをクリックする。
Kobito.rZWIFj.png

経験などを問われますが、入力しなくても良いので、とりあえず「skip this step」のリンクをおす。
Kobito.Zdatlu.png

「[GitHub] Please verify your email address.」というタイトルのアクティベーション用のメールが届いていると思いますので、メールの中のアクティベートするためのURLをクリックして、アクティベーションを完了させましょう。

Vagrantを使ってRailsの開発環境を構築

もしあなたが利用している環境にGitがインストールされているなら、適当なディレクトリ(フォルダ)に「vagrant_sandbox」をcloneしてもらった方が早いです。
Gitの環境がない人もいるかもしれないので、必要なコードをペタペタ貼っておきます。

フォルダ構成
rails_env_simple
┗ Vagrantfile
utils
┝ setup_rbenv.sh
┝ make_ready4rails.sh
┗ setup_netrc_skelton.sh

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure('2') do |config|
  config.vm.define :rails_sandbox do |node|
    node.vm.box = 'centos64_6_8'
    node.vm.box_url = 'http://opscode-vm-bento.s3.amazonaws.com/vagrant/virtualbox/opscode_centos-6.8_chef-provisionerless.box'
    node.vm.network 'private_network', ip: '192.168.55.30'
    node.vm.provision :shell, path: '../utils/setup_rbenv.sh'
    node.vm.provision :shell, path: '../utils/make_ready4rails.sh'
    node.vm.provision :shell, path: '../utils/setup_netrc_skelton.sh'
    node.vm.provision :shell, path: '../utils/setup_heroku_cli.sh'
  end
end
utils/setup_rbenv.sh
#!/bin/bash

RBENV_INSTALL_DEST_DIR=/usr/local/rbenv
COMMON_BASH_SETTING_FILE=/etc/profile

echo "install gcc..."
sudo yum -y install gcc

echo "install openssl-devel..."
sudo yum -y install openssl-devel

echo "instal readline-devel..."
yum install -y readline-devel

which git
if [ $? -ne 0 ]
then
  echo "install git..."
  sudo yum -y install git
fi

echo "download rbenv..."
git clone https://github.com/sstephenson/rbenv.git ${RBENV_INSTALL_DEST_DIR}

# add rbenv path To $PATH
echo "append rbenv path info To ${COMMON_BASH_SETTING_FILE}..."
echo "export RBENV_ROOT=\"${RBENV_INSTALL_DEST_DIR}\"" >> ${COMMON_BASH_SETTING_FILE}
echo 'export PATH="${RBENV_ROOT}/bin:$PATH"' >> ${COMMON_BASH_SETTING_FILE}
echo 'eval "$(rbenv init -)"' >> ${COMMON_BASH_SETTING_FILE}

# ${COMMON_BASH_SETTING_FILE} reload
echo "${COMMON_BASH_SETTING_FILE} reload"
source ${COMMON_BASH_SETTING_FILE}

echo "download rbenv plugin(ruby-build)..."
git clone https://github.com/sstephenson/ruby-build.git ${RBENV_INSTALL_DEST_DIR}/plugins/ruby-build

# install ruby
echo "ruby install..."
TARGET_RUBY_VERSION="2.4.2"
rbenv install -v ${TARGET_RUBY_VERSION}

rbenv global ${TARGET_RUBY_VERSION}

rbenv rehash

# set rbenv owner
chown -R vagrant:vagrant ${RBENV_INSTALL_DEST_DIR}
utils/make_ready4rails.sh
#!/bin/bash

GEM_PATH="/usr/local/rbenv/shims/gem"

echo "stop iptables..."
sudo service iptables stop

echo "installing sqlite-devel..."
sudo yum install sqlite-devel -y

echo "installing gcc-c++..."
sudo yum install gcc-c++ -y

echo "${GEM_PATH} install rails..."
su - vagrant -c "${GEM_PATH} install --no-document rails -v '5.1.3' --without bundle"
utils/setup_netrc_skelton.sh
#!/bin/bash

echo "create ~/.netrc skelton for github"

su - vagrant -c "cat <<- EOS >> ~/.netrc
machine github.com
login ~set_your_github_user~
password ~set_your_access_token~
EOS
"
utils/setup_heroku_cli.sh
#!/bin/bash

echo 'wget https://cli-assets.heroku.com/heroku-cli/channels/stable/heroku-cli-linux-x64.tar.gz -O heroku.tar.gz'
wget https://cli-assets.heroku.com/heroku-cli/channels/stable/heroku-cli-linux-x64.tar.gz -O heroku.tar.gz

echo 'tar -xvzf heroku.tar.gz'
tar -xvzf heroku.tar.gz

echo 'mkdir -p /usr/local/lib /usr/local/bin'
mkdir -p /usr/local/lib /usr/local/bin

echo 'mv heroku-cli-v*-linux-x64/ /usr/local/lib/heroku'
mv heroku-cli-v*-linux-x64/ /usr/local/lib/heroku

echo 'ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku'
ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku

これらを配置して、 vagrant up すると、railsアプリの開発できる環境が構築されます。
起動したら、vagrant ssh で構築した環境にsshでログインしましょう。

GitHub上でリポジトリを作る

次に、GitHubのWeb画面から、これから作るwebアプリのリポジトリを作りましょう。
ここでは、sampleという名前のリポジトリにして見ます。(リポジトリ名は、他の人が見ても分かるように、わかりやすい名前をつけましょう)

以下のようにGitHubにログインして、Webの画面上から作ります。

https://github.com/
にアクセスする。

右上のプルダウンから「Your profile」をクリック
Kobito.YdgmWa.png

「Repositories」タブをクリックして、「New」ボタンをクリック
Kobito.q0C8eT.png

リポジトリー名とDescriptioにアプリの説明を記入して、「Create repository」をクリック
Kobito.yVbair.png

これでリポジトリーができました。
Kobito.bb5Hmd.png

→このリポジトリを先ほど作った環境にcloneしてくるので、https://github.com/~ユーザー名~/~リポジトリ名~.git
をコピーしてください。(ログイン周りの設定の都合上、ここではsshではなく、httpsを使いましょう。)

リポジトリをクローンしてくる。

vagrantに接続していなければ、 vagrant ssh で接続してください。
その後 git clone git clone https://github.com/~ユーザー名~/~リポジトリ名~.git
を実行してリポジトリをクローンしてきます。
(ユーザ名とリポジトリ名は、あなたのものに書き換えてください。)

こんな感じになります。
Kobito.AWMHXC.png

テンプレートを使ってRailsアプリを作成

僕がよく使っているGemや、設定ファイルをrailsのtemplate化していて、それを使うとrails consoleを使いやすくしてあったり、rspecとそれの動作確認につかつちょっとしたサンプルコードも生成されて楽なので、それを使います。

git cloneしたのと同じフォルダで以下のコマンドを実行してください。(下記のsampleは、リポジトリ名ですので適宜書き換えてください。cloneしてきたディレクトリを上書きします。)
```

railsのテンプレートを使って、初期状態のリポジトリを上書きする形でrailsアプリを作成

rails new sample -m https://raw.githubusercontent.com/yukimura1227/rails_template/master/template.rb
```

これでrailsアプリの雛形ができました。テンプレートにはちょっとしたscaffoldとテストが組み込まれているので、テストを実行できることを確認しておきましょう。

cd sample

bin/rspec spec/

以下のように、0 failuresになっていればOKです。

〜 中略 〜
Finished in 5.07 seconds (files took 6.28 seconds to load)
32 examples, 0 failures, 24 pending

ここまでをGitHubにPushする

ここまでの作業ファイルをGitHubにPushしましょう。
テストのカバレッジ用のディレクトリ(coverage)は、git管理したくないので、ついでに.gitignoreファイルに追記しておきましょう。同じくvendor/bundle追記しておきます。

〜 中略 〜
/coverage/*
vendor/bundle
# ファイルをstage
git add .

# コミット
git commit -m "generate rails skelton (template = https://raw.githubusercontent.com/yukimura1227/rails_template/master/template.rb)"

Pushするにあたって、認証情報の設定が必要になりますので、
~/.netrc にgithubのユーザ名とパスワードを設定してください。

雛形は作成してあります。

cat ~/.netrc
machine github.com
login ~set_your_github_user~
password ~set_your_access_token~

適切に設定できたら、pushします。
補足:もし二段階認証をしているような場合は、パスワードではなく、GitHubのアカウント設定からPersonal Access Tokenを発行して、そこで生成された文字列を設定します。

git push origin master

後から、気づきましたが、gitの設定が不足していて、コミッターがinvalid mail adressとなってしまっていたので、以下のコマンドを実行して、GitHubアカウントの発行に使ったmail adressを登録しておきましょう。(your_email@example.comは、GitHubに登録したアドレスに書き換えてください。)

git config --global user.email "your_email@example.com"

Travis-CIの準備

このrailsアプリをpushしたら自動的にテストが実行されるようにしましょう。

https://travis-ci.org/
にアクセスして、sign upします。

トップ画面で、「Sign Up」ボタンをクリックします。
Kobito.oMhUB0.png

権限を問われるので、「Authorize travis-ci」ボタンをクリックします。
Kobito.fIbCUm.png

パスワードを問われるのでパスワードを入力してください。(二段階認証をしている場合は、ワンタイムパスワードが聞かれると思いますので、それも適切に入力してください。
Kobito.HT7WZv.png

こんな感じで、リポジトリーが表示されると思いますので、このトグルボタンをクリックして、リポジトリをCI対象にします。
Kobito.wYNQF4.png

Kobito.hJaDGg.png

上記トグルボタンの右側に表示されているリポジトリ名は、リンクになっているので、飛んで見ましょう。
多分、まだ何もテストが実行されていないので、以下のようにになっていると思います。
Kobito.920BsN.png

せっかくなので、この[build unknown]というバッチをREADMEに追加しましょう。
バッチをクリックすると、こんな風にバッチを組み込むためのタグが取得できます。
これをコピーして、README.mdに追記します。
Kobito.FlqC0m.png

追記したら、コミット&pushします。

git add README.md
git commit -m "add Travis-CI build badge"
git push origin master

これでpushしたものは、自動的にTravis-CI側でテストが実行されます。
Kobito.ej34x1.png

毎回、ライブラリのインストールに時間がかかるのも勿体無いので、cacheさせるようにしておきましょう。
「.travis.yml」という、Travis-CI用の設定ファイルを作成して、以下のように編集します。

travis.yml
language: ruby
cache: bundler

作ったら、コミット&pushします。

git add .travis.yml
git commit -m "add travis setting file for using bundler cache"
git push origin master

Codecovの準備

次に、このテスト結果のカバレッジを視覚化しましょう。
https://codecov.io/
を使います。

Kobito.coWgZy.png

Kobito.KYeyYs.png
左側のGitHubをクリックしましょう。

Travis-CIと同じように権限が求められるので応じましょう。
Kobito.whY6dz.png

ログインできました。
Kobito.WBXyFc.png

今回利用した、railsのテンプレートにCodecovの連携コードが仕組まれているので、Travis-CIでテストが実行された時点で、codecov側に既にデータが連携されています。
なので、こんな感じで情報が取得できていればOKです。
Kobito.Zd1T8T.png

こんな風に、どこがテストできているのかわかっていい感じですね!!
Kobito.BxhsUw.png

Settingsタブに、バッヂの情報があるので、バッチのスクリプトをコピーして、README.mdに津行きましょう。
Kobito.Clh2h5.png

追記したら、コミット&pushします。

git add README.md
git commit -m "add Test coverage badge"
git push origin master

CodeClimateの準備

この調子で、静的解析もやって見ましょう。
https://codeclimate.com/
を使います。

Kobito.NYouzf.png

毎度のことですが、権限を問われますので応じてください。
Kobito.v68Pf8.png

Free Planを選択してください。

Kobito.ghXR5p.png

さらに、権限を問われますので応じてください。
Kobito.428lpL.png

リポジトリーの一覧が出てくると思いますので、「Add Repo」ボタンを押下してください。
Kobito.QdCeFB.png

htmlプロジェクトと勘違いされたりしていますが、とりあえず、進みましょう。(Add anyway)
Kobito.KMIR18.png

とりあえず進むと、解析してくれると思います。
Kobito.xxjuvx.png

Kobito.61Apjt.png

バッヂは探しづらいですが、ここにあります。
https://codeclimate.com/github/codeclimate/codeclimate/badges

Kobito.KcpHYB.png

同じようにREADME.mdに追記しましょう。

git add README.md
git commit -m "add code climate badges"
git push origin master

Herokuに自動デプロイするようにしてみる。

最後は、Herokuです。
https://www.heroku.com/
に登録しましょう。
Kobito.BYwFx5.png

このユーザ登録フォームを適宜入力してください。
Kobito.ZXrrcv.png

スクショ撮り忘れてしまいましたが、確認メールが送信されてくるので、それを開いて、アクティベーション用のリンクをクリックして、パスワードを設定したらおしまいです。

次に、Heroku側でデプロイする先となるアプリを登録します。
Kobito.fw1Q6q.png

App nameは適当につけて良いですが、後ほど使います。
Kobito.8eWz0u.png

最後に、.travis.ymlにherokuの連携設定を記述すれば良いのですが、認証情報を生成するのに、以下のコマンドを実行して、gemをインストールします。

gem install travis -v 1.8.8 --no-rdoc --no-ri

また、Vagrant環境には、HerokuにアクセスするためのCLIツールがインストール済みなので、以下のコマンドを実行して、herokuにログインしてください。

heroku login

emailとパスワードを聞かれる思いますが、herokuへの登録時に設定したものを入力してください。

そして、travis->herokuの設定を行います。
-rオプションでは、各自のGitHubアカウント名/作成したリポジトリーのように入力してください。

travis setup heroku -r yukimura1227test/sample

以下は、上記コマンド後の対話形式の部分です。Heroku application mameには、herokuにアプリを登録した際に設定した、名前を設定するようにしてください。

Heroku application name: |sample| yukimura1227test-sample
Deploy only from yukimura1227test/sample? |yes| yes
Encrypt API key? |yes| yes

これで、.travis.ymlに設定が追加されているはずですので、コミット&プッシュしましょう。

git add .travis.yml
git commit -m "add heroku deploy setting"
git push origin master

しばらく待って、Travis-CI側でのビルドが完了すると、heroku側のActivityにdeployが完了したっぽいログが表示されていればOKです。

Kobito.MgGydo.png

このままだと、dbのmigrationが動いていないために動かないので、以下のコマンドでdbに反映しましょう。

heroku run bundle exec rake db:migrate --app yukimura1227test-sample

実際にHerokuにアクセスして見ましょう。
アクセスのURLは、HerokuのSettingsタブ(下記のイメージ参照)にアクセスして、
Kobito.5i2wOH.png

下の方のDomain部分に記載があります。
Kobito.W1ibsf.png

ブラウザでアクセスして、こんな感じになっていれば完了です。
Kobito.QtnNs5.png

これで、
railsアプリを修正→ GitHubにpush → TravisCIでビルド → codeclimateで静的解析しつつ、codecovでカバレッジを取得して、Herokuにデプロイ
という、ちょっとモダン(というか、今時は、最低限これくらいやっておきたい)な開発環境を整えることができました。