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

Github社が実践している、シンプルな開発のフローを指します。前レッスンの開発フローだと、最初に「Fork」を行い自分のGitHub上にリポジトリを複製しました。そして、プルリクエストを行うという流れでしたね。

吉田先生

Github Flowでは、「Fork」をせず、プロジェクトのリモートリポジトリから直接クローンを行います。そして、直接プッシュを行います。

Github Flow とは
テスト/デプロイツール
Github Flowを実践してみる
リモートリポジトリの準備
Herokuの準備とpush
CircleCIの設定
新機能追加
プルリクエスト＆マージ＆pull
テスト
まとめ

Github Flow とは

しかし、このGithub Flowでは、「Fork」をせず、プロジェクトのリモートリポジトリから直接クローンを行います。そして、直接プッシュを行います。

また、GitHubFlowは頻繁にデプロイを行う事を前提としています。デプロイとは、制作したプロジェクトを公開するための作業です。シンプルなワークフローにすることによって、素早く対応する事が出来ます。

テスト/デプロイツール

変更や機能の追加をプッシュした後、コードに問題がないかテストを行い、それからデプロイをしなくてはなりません。その、テストとデプロイを自動で行ってくれるツールが存在します。

素早く制作を行っていくため、このようなツールを活用していきましょう。いくつか種類がありますが、今回は「CircleCI」というツールを使用していきます。

Github Flowを実践してみる

今回は、練習用のリポジトリを作成し、そのリポジトリに複数名がプッシュやプルリクエストを行うという想定で進めて行きます。具体的なフローは以下のようになります。

Railsアプリの準備
リモートリポジトリの準備
Herokuの準備とPush
CircleCIの設定

Railsアプリの準備

今回「CircleCI」というサービスで自動デプロイなどを行います。その為に必要なディレクトリとファイルを作成します。「CircleCI」は、このファイルの記述に従いデプロイなどを行います。まず「.circleci」というディレクトリを作成しましょう。

$ mkdir .circleci

これでディレクトリが作られました。次に、このディレクトリにファイルを作成します。「config.yml」という名前で作成してください。内容は、以下のようにしてください。

config.yml

# 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

次に「Gemfile」を編集します。今回「Heroku」というサービスでデプロイを行います。そのためには、Railsのバージョンなどを指定しないとエラーが発生してしまいます。

ですのでまず、ルートディレクトリの「Gemfile」を開いてください。そして、以下のように書き換えて保存してください。(ハイライト部分が変更箇所です。)

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

書き換えたら、次に「bundle update」というコマンドを実行します。これにより、gemの変更などがGemfileの記述通りに反映されます。

$ bundle update

リモートリポジトリの準備

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

  $ git init
  $ git add .
  $ git commit -m "Initialize repository"

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

Herokuの準備とpush

まず、Heroku上にアプリを作成します。そして、そのアプリを指定してリモートリポジトリの内容をデプロイします。アプリとは、公開されるサイトを指します。では、以下URLにアクセスして、Herokuアカウントを作成してください。

https://jp.heroku.com/home

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

(master) $ heroku login

#メールアドレスとパスワードを求められますので、入力しエンターを押下してください。

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

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

ハイライト部分がサイトURLになります。そして、Herokuにリポジトリの内容をpushします。以下コマンドを実行してください。

(master)$ git push heroku master

CircleCIの設定

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

https://circleci.com/signup/

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

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

CircleCIとHerokuの連携設定

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

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

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

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

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

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

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

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

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

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

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

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

新機能追加

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

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

このように、トピックブランチ作成の時点でGitHubに反映させることで、メンバーにこのような名前のブランチで作業しているという事を知らせることが出来ます。

  (master) $ git checkout -b create-welcome-index
  (create-welcome-index) $ git push -u origin create-welcome-index

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

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

  (create-welcome-index) $ rails g controller welcome index

  Running via Spring preloader in process 15426
  create app/controllers/welcome_controller.rb
  route get 'welcome/index'
  invoke erb
  create app/views/welcome
  create app/views/welcome/index.html.erb
  invoke test_unit
  create test/controllers/welcome_controller_test.rb
  invoke helper
  create app/helpers/welcome_helper.rb
  invoke test_unit
  invoke assets
  invoke coffee
  create app/assets/javascripts/welcome.coffee
  invoke scss
  create app/assets/stylesheets/welcome.scss

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

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

# root 'welcome#index'

では、次に以下コマンドを実行します。このコマンドはローカル環境で、サーバーの立ち上げを実行します。

(create-welcome-index) $ rails s

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

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

  (create-welcome-index) $ git add -A
  (create-welcome-index) $ git commit -m "Create welcome index"
  [create-welcome-index 93746c0] Create welcome index
  7 files changed, 26 insertions(+), 1 deletion(-)

  create mode 100644 app/assets/javascripts/welcome.coffee
  create mode 100644 app/assets/stylesheets/welcome.scss
  create mode 100644 app/controllers/welcome_controller.rb
  create mode 100644 app/helpers/welcome_helper.rb
  create mode 100644 app/views/welcome/index.html.erb
  create mode 100644 test/controllers/welcome_controller_test.rb

  (create-welcome-index) $ git push

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

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

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

プルリクエスト＆マージ＆pull

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

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

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

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

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

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

  (create-welcome-index) $ git checkout -
  (master) $ git pull

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

テスト

テストの方法はいくつかありますが、今回は期待する動作と結果を書きます。そして、サイトがその通りに動く仕様になっているかをテストします。

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

  - run:
      command: bundle exec rake test

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

  (master) $ git add .circleci/config.yml
  (master) $ git commit -m "Add run test to config.yml"
  [master d820585] Add run test to config.yml
  1 file changed, 4 insertions(+), 1 deletion(-)

  (master) $ git push

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

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

  test "should get index" do
    get :index
    assert_response :success
  end

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

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

  (master) $ git checkout -b add-test-welcome-controller

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

  test "should get show" do
    get :show
      assert_response :success
  end

  (add-test-welcome-controller) $ git add -A
  (add-test-welcome-controller) $ git commit -m "Add test get create to welcome_controller_test.rb"
  [add-test-welcome-controller cc27691] Add test get create to welcome_controller_test.rb
  1 file changed, 2 insertions(+), 2 deletions(-)

  (add-test-welcome-controller) $ git push

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

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

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

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

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

  get 'welcome/show'

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

  def show
  end

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

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

  (add-test-welcome-controller) $ git add -A
  (add-test-welcome-controller) $ git commit -m "Create show action to welcome"
  [add-test-welcome-controller 4ca822f] Create show action to welcome
  3 files changed, 6 insertions(+), 2 deletions(-)

  (add-test-welcome-controller) $ git push

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

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

まとめ

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

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

前のレッスン次のレッスンレッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る