進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Heroku パイプラインの作成とレビューアプリケーションの実行

学習の目的

この単元を完了すると、次のことができるようになります。

  • Heroku パイプラインを作成し、アプリケーションを追加する。
  • レビューアプリケーションを実行する。

Heroku Flow の機能とその背景にある概念に慣れたところで、それを利用して Heroku パイプラインのインスタンスを作成し、レビューアプリケーションを実行し、実際にどのように機能するのか確認してみましょう。

Heroku パイプラインを作成するには、Heroku アカウントが必要です。アカウントがない場合は https://www.heroku.com/ で無料アカウントに登録します。このモジュールでは、GitHub アカウントも必要です。無料のアカウントを https://github.com/ で作成します。  

パイプラインの作成

最初のパイプラインを作成する準備ができました。

  1. GitHub アカウントにログインして、右上の [Fork (フォーク)] をクリックして、こちらのリポジトリのコピーを作成します。フォーク flow-demo リポジトリ
  2. Heroku に戻り、[Login (ログイン)] をクリックします。ログインして、[New (新規)][Create new pipeline (新しいパイプラインを作成)] の順にクリックします。新しいパイプラインの作成
  3. 新しいパイプラインに名前を付けて (たとえば flow-demo-pipeline)、[Pipeline owner (パイプライン所有者)] 項目に名前を入力し、ステップ 1 で処理したリポジトリに関連付けて、[Create Pipeline (パイプラインを作成)] をクリックします。パイプラインの名前付け

レビューアプリケーションの実行

これでパイプラインができました。アプリケーションを作成して、レビューアプリケーションを実行できるようにしましょう (レビューアプリケーションは、パイプラインに少なくとも 1 つのアプリケーションがないと動作しません)。

  1. 新しいアプリケーションを作成するには、[STAGING (ステージング)] で [Add app... (アプリケーションを追加...)][Create new app (新しいアプリケーションを作成)] の順にクリックします。アプリケーションに名前を付けて (たとえば flow-staging-demoapp)、[Create app (アプリケーションを作成)] を選択します。新しいアプリケーションの作成
  2. 次に、同様のステップで本番アプリケーションを作成します。[PRODUCTION (本番)] で [Create new app (新しいアプリケーションを作成)] をクリックして、名前を付けます (たとえば flow-production-demoapp)。
  3. ステージングアプリケーションを作成すると、[Enable Review Apps (レビューアプリケーションを有効化)] オプションが使用できるようになります。[REVIEW APPS (レビューアプリケーション)] 列の [Enable Review Apps (レビューアプリケーションを有効化)] をクリックして、[Create new review apps for new pull requests automatically (新しいプル要求で新しいレビューアプリケーションを自動的に作成)] を選択します。これにより、関連付けた GitHub リポジトリのプル要求ごとに、レビューアプリケーションが作成されます。このモジュールで扱うパイプラインをテスト目的でのみ使用する場合、[Destroy state review apps automatically (古いレビューアプリケーションを自動的に廃棄)] を選択し、[Enable (有効化)] をクリックします。
    レビューアプリケーションの有効化
  4. ステージングアプリケーションの横の小さい矢印をクリックして、[Configure automatic deploys (自動リリースを設定)] をクリックします。[master (マスタ)] のブランチのまま、[Enable Automatic Deploys (自動リリースを有効化)] をクリックします。
    自動リリースの設定
  5. 次に、GitHub リポジトリにいくつか変更を加えて、それが Heroku パイプラインでどのように反映されるか確認します。
  6. GitHub で、前のステップで処理した flow-demo リポジトリに移動します。Public フォルダをクリックして開き、index.html ファイルをクリックします。
  7. 右上の小さい鉛筆アイコンをクリックして、index.html を編集します。
  8. テキストとフォントの色を少し変更します。Heroku Flow について学習中であることを踏まえて、簡単にしましょう。h2 の色を blue から green に変更し、p クラステキストを Running with Heroku Flow から Built with Heroku に変更します。
    GitHub でのコードの変更
  9. スクロールダウンして、コミットの短いタイトルと説明を入力します。[Create a new branch for this commit and start a pull request. (このコミットの新しいブランチを作成し、プル要求を開始します。)] を選択し、ブランチ名をデフォルトのままにして、[Propose file change (ファイル変更を提案)] をクリックします。ブランチとコミットの作成
  10. 次の画面で変更の内容を確認できます。[Create Pull Request (プル要求を作成)] をクリックします。
  11. Heroku ダッシュボードに戻ると、レビューアプリケーション列に新しいレビューアプリケーションが表示されます。変更内容がブラウザウィンドウでどのように表示されるかを確認するには、レビューアプリケーションの横の小さい矢印をクリックして、[Open app in browser (ブラウザでアプリケーションを開く)] をクリックします。ブラウザでレビューアプリケーションを開く

本番環境へのリリース

レビューアプリケーションが GitHub のコード変更を反映していることを確認できます。これで、最初の Heroku パイプラインとレビューアプリケーションを作成できました。次に、変更をマスタブランチにマージします。

  1. GitHub に移動して、[Pull requests (プル要求)] タブを選択します。index.html 更新プル要求が、オープン状態のプル要求として表示されています。GitHub の PR の確認
  2. クリックして PR (プル要求) の詳細を表示し、[Merge pull request (プル要求をマージ)][Confirm merge (マージを確認)] の順に選択します。
  3. Heroku ダッシュボードに戻ると、[STAGING (ステージング)] のアプリケーションがビルドされていることを確認できます。自動リリースを有効にしているため、変更がマスタにマージされたときに、自動的にリリースされます。ビルドされているステージングアプリケーション
  4. flow-staging-demoapp の横の [Open app in browser (ブラウザでアプリケーションを開く)] を選択すると、緑色と Built with Heroku へのテキスト変更の表示を確認できます。ステージング環境は本番環境のコピーであり、コード変更を本番環境に適用して最終成果物に含める前に、すべてのコード変更をテストするものです。ステージングアプリケーションがレビューアプリケーションと同じように表示されていれば、問題はありません。最終成果物のフェーズに適用できます。
  5. [Promote to production (本番に昇格)] を選択して、コード変更を本番環境に適用します。本番アプリケーション名を再確認して、[Promote (昇格)] を選択します。本番に昇格
  6. アプリケーションの本番環境へのリリースが開始します。ビルドされている本番アプリケーション
  7. flow-production-demoapp の横の [Open app in browser (ブラウザでアプリケーションを開く)] を選択すると、コード変更が本番の最終アプリケーションに適用されていることを確認できます。