シンプルな開発フロー「Github Flow」とは

$ mkdir .circleci

# Ruby CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-ruby/ for more details
#
version: 2
  jobs:
    build:
      docker:

# specify the version you desire here
  - image: circleci/ruby:2.4.1-node-browsers

# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/postgres:9.4
working_directory: ~/github-flow #github-flowの部分を、ローカルのリポジトリ名に変更してください

  steps:
  - checkout

# Download and cache dependencies
  - restore_cache:
      keys:

  - v1-dependencies-{{ checksum "Gemfile.lock" }}

# fallback to using the latest cache if no exact match is found

  - v1-dependencies-
    - run:
        name: install dependencies

  command: |
    bundle install --jobs=4 --retry=3 --path vendor/bundle
    - save_cache:
        key: gem-cache-v1-{{ arch }}-{{ .Branch }}-{{ checksum "Gemfile.lock" }}

  paths:
  - vendor/bundle
    - deploy:
        name: Deploy Master to Heroku

  command: |
    if [ "${CIRCLE_BRANCH}" == "master" ]; then
      git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master

    fi

source 'https://rubygems.org'
  gem 'rails', '4.2.9'
  gem 'puma'
  gem 'sass-rails'
  gem 'uglifier'
  gem 'coffee-rails'
  gem 'jquery-rails'
  gem 'turbolinks'
  gem 'jbuilder'
  group :development, :test do
  gem 'sqlite3'
  gem 'byebug'
end

group :development do
  gem 'web-console''
  gem 'listen'
  gem 'spring'
  gem 'spring-watcher-listen'
end

group :production do
  gem 'pg', '~> 0.11'
end

<h2>リモートリポジトリの準備</h2>

<p>続いて、GitとGithubの設定を行っていきます。まず「git init」コマンドを実行します。そして、コミットまで行っておきましょう。</p>

<p>コミット出来たら、SSHの設定や、リモートリポジトリの作成をします。SSHの設定は既に知っていれば、飛ばしてください。また、リモートリポジトリのレッスンの「Github」～「リモートリポジトリを設定」のセクションを参考に進め、「git push origin master」まで行ってください。</p>

<h2>Herokuの準備とpush</h2>

<p>まず、Heroku上にアプリを作成します。そして、その<strong><span style="background-color:#ffffcc;">アプリを指定してリモートリポジトリの内容をデプロイ</span></strong>します。アプリとは、公開されるサイトを指します。では、以下URLにアクセスして、Herokuアカウントを作成してください。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-6a77f1e6-7fff-f4c5-bdf9-e09c882581e5"><img alt="" class="img-responsive" height="339" src="https://lh4.googleusercontent.com/gHTBi2sXEp61SLB-zcnw3f5ON2vQCiDehQSpGtCVEkl33cD8AG4Lp6HnAsc-qRp09mmKguDg5_v2fWnzlMzeBGN0PBrLNTOacGJYxhEliaK_qzK23ZeWXEyJMtsD26iUfqvrnmGQ" width="602"></b></p>

<p>https://jp.heroku.com/home</p>

<p>作成出来たら、ターミナルに戻ります。そして、以下コマンドを実行しHerokuにログインし、アプリを作成します。</p>

```(master) $ heroku login

  (master) $ heroku create github-flow
  Creating ⬢ github-flow... done

  https://github-flow.herokuapp.com/ | https://git.heroku.com/github-flow.git

<h2>CircleCIの設定</h2>

<p>「CircleCI」という、テスト＆デプロイツールを導入します。デプロイは「Heroku」に行います。まず、以下URLにアクセスし、サインアップを行ってください。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-9ad1ccda-7fff-5557-9144-03abb8755542"><img alt="" class="img-responsive" height="339" src="https://lh6.googleusercontent.com/SMq4J1CiDSIcgUFn_xuKI1gC6KBJwm1VEEofXxOgZAfNlZ69-xTYMhSG40e9o0hRa40ezBbQr-Wc4p5AEK3vIZIF01U7RcVuL_YzuFnBtc27YFZCZJTHjp0LDr-xtkbp9vB4s9Ma" width="602"></b></p>

<p><a href="https://circleci.com/signup/">https://circleci.com/signup/</a></p>

<p>皆さんそれぞれ、設定したリポジトリの名前があると思いますので、その欄の「Set Up Project」というボタンをクリックしてください。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-eab72efc-7fff-6e80-dc38-10715c0cdfc6"><img alt="" class="img-responsive" height="339" src="https://lh3.googleusercontent.com/dL1E7Aw-DzwPDDREjXV4OMbFa_JNdCYw2fM6ZtTjaQYbtPaZEsTimqIBL_QlNCnpODR9GyLDRt2-lVn6ewIuYucMrxnmRluQ0h-IvdaLGpHfoGiXIwapYlvZaeXoBQWyWWItjEd0" width="602"></b></p>

<p>そして「Stary build」を押下してください。すると、ビルドが開始されます。ですが、<strong>このビルドはHerokuとCircleCIの連携設定をまだ行っていないため失敗</strong>するはずです。</p>

<h3>CircleCIとHerokuの連携設定</h3>

<p>CircleCIとHerokuの連携設定をします。まず「config.yml」の「https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master」という部分を見てください。この部分で、デプロイ先のアプリを指定しています。</p>

<p>このコードの中の「HEROKU_API_KEY」と「HEROKU_APP_NAME」には、それぞれご自分のキーとアプリ名が入ります。しかし、直接記述するのではなく環境変数という形で記述しています。</p>

<p>これは、CircleCIのサイト上で「環境変数＝値」という形で登録しなければなりません。では、CircleCIを開きましょう。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-8dee38d2-7fff-8a4d-10e5-30e8235772c7"><img alt="" class="img-responsive" height="225" src="https://lh3.googleusercontent.com/U2cTXvgnnJTtT7h_tJOZYoz9LWT5oMvw5an2xC1fT3Zd4xCil4bH2EZlO5pjffFWiwgkBRm1PmAgQLPCVY6ItlBnGUiQz68FrOBC3C9HfJPQ--u3l-H4QxmH6ECKrG0elLfo0QYj" width="404"></b></p>

<p>上記の赤枠部分をクリックします。すると、画面左にメニューが表示されますので、その中から「Environment Variables」を選択してください。そして、以下赤枠部分の「Add Variable」をクリックします。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-a8785bf5-7fff-991e-a470-dcc3e835b80f"><img alt="" class="img-responsive" height="225" src="https://lh5.googleusercontent.com/Cmarw__GXKVuSUpOR4rVG_Siy3cdVV2KziqA7xSRiMTI7DVnBm7DfMu-UrwIQkxeiWNNDoDTimKeaeuJtV2TBXQKEbdfrunYN16S8CG28K8U5KHNN1wlqkoWWxaDVGy5aFieOTAV" width="400"></b></p>

<p>次に、表示されたフォームの「Name」の欄に「HEROKU_APP_NAME」と入力します。そして「Value」の欄に「heroku create」で作成したアプリ名を入れます。</p>

<p>最後に「Add Variable」をクリックすれば、登録完了です。更に「HEROKU_API_KEY」の値も同じように登録します。この値は、Herokuのサイトから取得します。以下赤枠部分をクリックし、「Account Settings」を選択します。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-943a4a20-7fff-ac20-d8c0-c54041d7f372"><img alt="" class="img-responsive" height="228" src="https://lh4.googleusercontent.com/O4ObgsBirp_uSToOhhoi-20GWIgKlr0PH-MGKIfLpHmm_uKAmOVuC_YpDHPFygGcrudSrxG9z8kNyufiY9My0qYY6tN6aIegUjnzAAaOFEEXOh7V2xvtWJVu-pp8rKslV88tUEQS" width="400"></b></p>

<p>そして、画面下部の「API Key」のセクションの「Reveal」をクリックします。すると、英数のキーが表示されますのでコピーしてください。</p>

<p>そして、先ほどのようにCircleCIのサイトで、登録を行います。「Name」には「HEROKU_API_KEY」、「Value」にはコピーしたキーを貼り付けます。続いて、CircleCIのメニューから「Heroku Deployment」を選択します。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-35444a56-7fff-cdf9-5d63-cd8b9590493a"><img alt="" class="img-responsive" height="225" src="https://lh3.googleusercontent.com/8Cdl8DZl7xrPcY4FaAjXhTmNsNNrAwp8NAU5uMY37n9yfjhUWQLu4UApEoGb1hePy6o4kyhMzGJyKLmdwX8r3LuB65YPwIsiMAIKg_ZeALzKQbVP062RH9DOL6lUcPRYo537RZO4" width="400"></b></p>

<p>そして、「Step 1: Heroku API key」というセクションの中の「user settings.」をクリックしましょう。そして先ほどのHerokuの「API key」を貼り付けて、Saveします。</p>

<p>次に「Step 2: Associate a Heroku SSH key with your account」の「Set user to ～」というボタンをクリックします。これで、CircleCIとHerokuの連携が完了しました。</p>

<p>次に、画面右上の「View リポジトリ名 >>」をクリックします。そして、「master #1」の欄の「rebuild」をクリックしてください。ビルドを再度行う事が出来ます。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-59f42e8b-7fff-ec15-ac8e-1cd7c27a2098"><img alt="" class="img-responsive" height="224" src="https://lh4.googleusercontent.com/AbiddTMtWaw3rym6GEkspPqsdDE5wy-dZUOskZu4ksUjm4rNQtsXH2ieYaPNgnHj6x66u37HEJiuMgHMick2Azv8cTGA5affM6iT_Ep8wtlmfzWkRdotzWPolF8xZWyBMqH6jkIw" width="399"></b></p>

<p>そして、<strong>「RUNNING」となっていたものが「SUCCESS」となればOK</strong>です。</p>

<h2>新機能追加</h2>

<p>ここまでで、ローカルリポジトリとリモートリポジトリの作成、Github・CircleCI・Herokuの設定を行いました。</p>

<p>そして、プッシュすると自動でデプロイできるようになりました。ここからは、Railsに機能の追加を行っていきます。その為の、トピックブランチを作成しましょう。また、この段階でトピックブランチをGitHubに反映させます。</p>

<p>このように、<strong><span style="background-color:#ffffcc;">トピックブランチ作成の時点でGitHubに反映させることで、メンバーにこのような名前のブランチで作業しているという事を知らせることが出来ます。</span></strong></p>

<p>GitHubのリポジトリのページの以下部分で、ブランチが反映されているか確認してみましょう。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-7bd20d31-7fff-07b2-ae59-d6a3fcad3648"><img alt="" class="img-responsive" height="225" src="https://lh6.googleusercontent.com/U3XjvbTH-IYGNJySiGwrONlCJJhMyzxFcdozL1etwVuv8n8t3hSRc5k7vWWllaSi-Js9cwN_gGMGcRbPf6aE0FSVtREmq3S9efJOR9l8fV_tQVyUS7Th4eoXd40V6-U1dlhjwdfg" width="400"></b></p>

<p>無事反映されていれば、機能追加作業に戻ります。まず、以下コマンドを実行して、コントローラを作成します。</p>

<p>「welcome_controller」や「index.html.erb」が作成されました。では、サイトにアクセスした際に最初に表示されるページを「welcome/index.html.erb」に設定します。</p>

<p>「config」ディレクトリの中の「routes.rb」を開いてください。そして、ファイル内８行目の以下コードの「#」を削除しましょう。</p>

```# root 'welcome#index'

<p>そして、ブラウザで「localhost:3000」というURLにアクセスします。すると、現在開発中のサイトを確認する事が出来ます。以下のような画面が表示されればOKです。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-3efe307a-7fff-287d-2965-3135d27cc405"><img alt="" class="img-responsive" height="225" src="https://lh6.googleusercontent.com/2KQrv78NGIlwxoeUu8AI-c5Yf0EmSUJs3TKoKvZcAbXUnRK0ZNO03ARQY9A75JllTuijrstF_lzwnxjsUKbPm8mQ5BQmHGJ9p7hkpRsTclaBY7SqFv5osg4mymxxjqXV9eBouCwt" width="400"></b></p>

<p>この変更をコミット＆プッシュしましょう。以下コマンドを実行してください。</p>

<p>では、CircleCIのサイトを確認してみましょう。以下のリポジトリ名をクリックして、ビルド一覧に戻ります。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-7867c229-7fff-42f1-e6b4-011c491c6ea2"><img alt="" class="img-responsive" height="225" src="https://lh4.googleusercontent.com/fGmrmdw3BIAvZtkqVEpUbCY7MvUoNhDCyh4cxtbNr3a8adYlzHGjxoWZCo8kZRWTRqLmyRJD6lTGnuTcU0uMbcsYVxHj71SlSaccap3jrNw7S70c_bUsqI0x0rLkaZ1MhMJfr-Xw" width="400"></b></p>

<p>「create-welcom-index」をGitHubに反映させるためのプッシュと、先ほどのプッシュの２回分のビルドが追加されていますね。では、「create-welcome-index #4」をクリックして内容を確認します。「Deploy Master to Heroku」をクリックしてください。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-b2cca195-7fff-53ca-7775-8a4313adf57b"><img alt="" class="img-responsive" height="301" src="https://lh6.googleusercontent.com/-SFrZCbwEqm9p6O2uqZLcDWUm3vBsHbPTb-RSbwAAGf0sJDjwEda8mx_vb8p0AE1OYgcOhW7TyWlwhXyyuiUc82Pzpgb5xjXEwAwfvGtFbuFyRSaHaGuqSP6Yhm9kTmtWXgg_keG" width="602"></b></p>

<p>ここに「config.yml」で記述したHerokuへのデプロイの為の記述が表示されています。この記述は、masterブランチでのプッシュであればデプロイするという内容です。今回の変更のプッシュは、トピックブランチでのプッシュでしたので、デプロイはされていません。</p>

<h2>プルリクエスト＆マージ＆pull</h2>

<p>続いて、GitHubのサイトに移動します。以下のように、先ほどのプッシュが確認できるかと思います。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-30db1d31-7fff-6df0-e67c-7073bd6e683c"><img alt="" class="img-responsive" height="301" src="https://lh3.googleusercontent.com/kHX0zJwqNW9Act1OhyYGNo8PucLamLQzjEcy7ZzkQ40t7vtSzKJbX_w7nP3tBJccIAgbmjPlqAsrLfcXnTKDjJHbUYiHU_GJCWJD_-DA1BrWvxz9qYpWliGk-Ztd4q1bEqYjxTEm" width="602"></b></p>

<p>では、上記赤枠内の「Compare &amp; pull request」をクリックし、プルリクエストを送りましょう。そして、GitHub上でマージを行います。以下赤枠部分をクリックしてください。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-2bfb2b11-7fff-7c1e-a23a-a89c082b1b66"><img alt="" class="img-responsive" height="301" src="https://lh6.googleusercontent.com/E8LIXyuf4_lPflOH30Azk8ikouUyUbXxY6LyGpsPhWqK-kGbgVvGS9lUt1GFtgXzdGfYJSytrnpvabA539C0skoAkcSSdtV8TH4L8m9x4daP6WMW7WDkP85vlXYe7FecRiRAMkAh" width="602"></b></p>

<p>これで、リモートリポジトリではマージされた状態になりました。では、CircleCIでビルドを確認します。<strong>ここまででは、プッシュの時にビルドが行われていましたが、CircleCIではプルリクエストがマージされたときにもビルドを行ってくれます。</strong></p>

<p>ビルド一覧から「master #5」をクリックします。そして、「Deploy Master to heroku」をクリックしましょう。今回は、masterブランチへのマージが行われたので、デプロイも行われます。「SUCCESS」となれば成功です。</p>

<p>Herokuアプリにアクセスして確認してみてください。ローカルサーバーでの表示と同じように、表示されているはずです。</p>

<p>では、ローカル環境でmasterブランチに戻ってください。すると、welcomeコントローラ等が反映されていないと思います。ですので、リモートリポジトリでのマージをpullを実行して取り込みましょう。</p>

<p>これで、ローカル・リモート・Herokuが全て同じ状態になりました。</p>

<h2>テスト</h2>

<p>テストの方法はいくつかありますが、今回は<strong><span style="background-color:#ffffcc;">期待する動作と結果を書きます。</span></strong>そして、サイトがその通りに動く仕様になっているかをテストします。</p>

<p>では、CircleCIでRailsテストを行えるように設定をしていきます。まず「config.yml」に変更を加えます。以下コードを39・40行目に追加してください。</p>

<p>そして、変更をコミット＆プッシュしてください。</p>

<p>これでCircleCIでテストが行えるようになりました。では、テストを確認します。Railsでは、コントローラを作成すると、コントローラのテストの為のファイルを自動生成してくれます。</p>

<p>「test」→「controllers」→「welcome_controller_test.rb」を開いてください。ここに、自動で生成されたテストが書かれています。このファイルには、自分でテストを追加する事も出来ます。自動生成されたテストを見てみましょう。</p>

<p>これは、welcomeの「indexアクション」を呼び出す→成功というような事が書かれています。このテストは、先ほどの「Add run test to config.yml」コミットのプッシュの時には既に存在していました。CircleCIの最新ビルドを確認するとテストが成功していることがわかります。</p>

<p>では、<strong>トピックブランチを作成して、失敗するテストを書き、その場合にどのような結果になるか確認</strong>してみましょう。</p>

<p>「welcome_controller_test.rb」に以下テストを追加します。そして、コミット＆プッシュを行いましょう。</p>

<p>welcomeコントローラには、showアクションは作成していないので、このテストは失敗するはずです。GitHubを開いて、プルリクエスト送信画面に移動してみましょう。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-e27c39b0-7fff-d8a1-ad7e-294ff97cffea"><img alt="" class="img-responsive" height="301" src="https://lh5.googleusercontent.com/dGrkszKdkIYD34NX0N9_mt54ezFQMJ6QW0IsZJVRxn63vlGs2Hmit-wyhmB0jrOvYH-g-jodBj6mUJSDsHnjKWMMc9j8HPCleOn4oFXhJw8uNyuUL2hP5g5yh_4QUtfkzcmsleHq" width="602"></b></p>

<p>すると、CircleCIでエラーが発生していることが分かります。では、CircleCIでエラーの詳細を確認します。「bundle exec rake test」というセクションがテスト実行の部分です。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-594211ae-7fff-eaa5-bad6-0480bebce838"><img alt="" class="img-responsive" height="339" src="https://lh4.googleusercontent.com/OXzHwk0IixVIDCmgXxqmi8VCR9cLAPXEK6bmxuA82yYkNiW5k4DKiGNUbLhcCSIiWpWT1ymO-AniI0f3ooZeD48276T-LK2whR47FZwHiqQQhMlvadz4piy-6w9-YY4r_QeNsmoz" width="602"></b></p>

<p>エラーが発生していることが分かります。下から２行目の「2 runs, 1 assertions～」という部分を見ると、２つのテストを実行したこと、その内の１つのテストでエラーが発生したと書いてあります。</p>

<p>そして、その上の部分にエラー内容があります。「showアクション」がない為、テストが失敗した事が分かります。そして、この「bundle exec rake test」のセクションでエラーが出るとデプロイがされないことも分かるかと思います。</p>

<p>では、テストが通るように「showアクション」を作成してみましょう。まず「routes.rb」に以下コードを追加します。</p>

<p>そして、「welcome_controller.rb」に「showアクション」を追加します。</p>

<p>そして、「views」の「welcome」に「show.html.erb」を作成します。</p>

<p>では、この変更をコミット＆プッシュします。</p>

<p>そして、もう１度GitHubのプルリクエスト画面に戻り画面を更新してください。</p>

<p><meta charset="utf-8"><b id="docs-internal-guid-4702e911-7fff-212c-43ed-480ef333d984"><img alt="" class="img-responsive" height="339" src="https://lh4.googleusercontent.com/sezV8fqSDgBUPNqcaQ5zVNkVXXhehzpWgc0gBA5898-8MCSpwmziNSlvaYL1kDofqmqFlbM6o6DXKUkQ4yr3Usyl2Vm_L_0_NJyNoWgrhPMpjvSlgdHnvuvPlCe10Wvh-F7Lv1NU" width="602"></b></p>

<p>マージが行えるようになっています。CircleCIでテストの結果を確認すると、通っていることが分かります。</p>

<h2>まとめ</h2>

<p>GitHubFlowとはシンプルな開発フローのことです。テスト/デプロイツールを導入して、テスト/デプロイをこまめに行いましょう。</p>

<p>トピックブランチを作成して機能の追加や修正を行います。Github上でマージした場合はpullを行い、ローカルにもマージを反映します。</p>