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

本番環境の設定

Heroku パイプラインは継続的な配信ツールです。アプリケーションの複数の環境を管理する場合にパイプラインが役立ちます。パイプラインを使用すると、コードの昇格プロセスから手作業を排除できます。

レビューアプリケーションを有効にする

  1. https://dashboard.heroku.com に移動します。
  2. [dreamhouse-pipeline] をクリックします。
  3. [Enable Review Apps... (レビューアプリケーションの有効化...)] をクリックします。
  4. ステージング環境に使用しているアプリケーションと同じ設定を継承するかどうかを確認するポップアップが表示されます。[Create new review apps for new pull requests automatically (新しいプル要求に新しいレビューアプリケーションを自動的に作成)] を選択します。
  5. [Enable (有効化)] をクリックします。

GitHub で、機能ブランチを使用して Mortgage Calculator (住宅ローン計算機) という新機能を追加する

  1. 別のタブを開いて、https://github.com/YOUR_USERNAME/intro-to-heroku にある GitHub リポジトリに移動します。
  2. app ディレクトリをクリックします。
  3. app.html をクリックします。
  4. 鉛筆アイコン をクリックして、ファイルを編集します。
  5. コードの次のスニペットをコピーして、20 行目の下に追加します。DreamHouse ナビゲーションサイドバーに「Mortgage Calculator (住宅ローン計算機)」という新しいヘッダーが追加されます。
    <button menuClose ion-item><ion-icon item-left name="calculator"></ion-icon>Mortgage Calculator</button>

  6. ページの一番下までスクロールします。[Commit changes (変更をコミット)] ボックスに、「New Feature: Mortgage Calculator」(新機能: 住宅ローン計算機) と入力します。説明を「Adding the Mortgage Calculator feature to navigation」(ナビゲーションに住宅ローン計算機を追加) に変更します。
  7. [Create a new branch for this commit and start a pull request (このコミットの新しいブランチを作成し、プル要求を開始する)] を選択します。
  8. ブランチ名はデフォルトのままにします。
  9. [Propose file change (ファイル変更を提案)] をクリックします。
  10. [Create pull request (プル要求を作成)] をクリックします。
  11. このタブは開いたままにします。

レビューアプリケーションが、Heroku の complete-but-disposable アプリケーションで GitHub プル要求のソースコードを実行します。プル要求ごとにレビューアプリケーションが自動的に作成されるように設定できます。 

レビューアプリケーションを使用して変更を検証する

  1. Heroku ダッシュボード (https://dashboard.heroku.com) に戻ります。[dreamhouse-pipeline] をクリックします。[レビューアプリケーション] 列にプル要求がリストされていることを確認します。Mortgage Calculator (住宅ローン計算機) 機能用に作成されたレビューアプリケーションのスクリーンショット。プル要求の名前 (dhdev-07312018-pr-1)、コミット名 (#1 New Feature: Mortgage Calculator)、ログメッセージ (Creating app)、ログを表示する「View Log (ログを表示)」という表示ラベルのリンクが示されています。

    Pipeline ダッシュボードにすぐ戻った場合、プル要求がリストされていても、レビューアプリケーションはまだ作成されていませんが、

    Mortgage Calculator (住宅ローン計算機) 用のレビューアプリケーションのスクリーンショット。コミットの名前 (#3 New Feature: Mortgage Calculator) と「Create Review App (レビューアプリケーションの作成)」という表示ラベルのボタンが示されています。

    心配いりません。GitHub でプル要求を送信した後、リリースプロセスが開始されるまで 10 秒ほど時間がかかります。ですから、そのまま [Create Review App (レビューアプリケーションの作成)] ボタンをクリックして、リリースプロセスを開始します。
         レビューアプリケーションをビルド中
    • リリースを実行中に [View Log (ログを表示)] リンクをクリックすると、ログを確認できます。
    • リリースが完了したら、ログウィンドウを閉じます。
    • レビューアプリケーションのタイルで、[Open app (アプリケーションを開く)] をクリックして変更を確認します。
      リリースの例
  2. レビューアプリケーションのリリース後
  • これ以降は、[Pipeline (パイプライン)] タブでログを表示することができません。
  • 矢印アイコン をクリックして、[Open app in browser (ブラウザでアプリケーションを開く)] をクリックします。
    リリース済みの Mortgage Calculator (住宅ローン計算機) 用に作成されたレビューアプリケーションのスクリーンショット。プル要求の名前 (dhdev-20180725-pr-1)、コミット名 (#1 New Feature: Mortgage Calculator)、リリースされた時刻のほか、右上にログやレビューアプリケーションを表示するボタンが示されています。
  • DreamHouse アプリケーションが開いたら、メニューアイコンをクリックします。ナビゲーションに [Mortgage Calculator (住宅ローン計算機)] がリストされていることを確認します。
  • レビューアプリケーションの作成をトリガする 2 つ目のプル要求を作成する

    1. https://github.com/YOUR_USERNAME/intro-to-heroku にある GitHub リポジトリに移動します。
    2. [app] > [pages] > [welcome] ディレクトリをクリックして、welcome.html を開きます。
    3. 鉛筆アイコン をクリックして、ファイルを編集します。
    4. 次の行をコピーして 4 行目の下に貼り付け、[Welcome (ようこそ)] ページにタイトルを追加します。
      <ion-title>Welcome to DreamHouse Realty</ion-title>
    5. ページの一番下にある [Commit Changes (変更をコミット)] 入力ボックスまでスクロールします。「Changed Title」(タイトルを変更) と入力します。説明を「Title changed to Welcome to DreamHouse Realty」(タイトルを Welcome to DreamHouse Realty に変更) に変更します。
    6. [Create a new branch for this commit and start a pull request (このコミットの新しいブランチを作成し、プル要求を開始する)] を選択します。
    7. ブランチ名はデフォルトのままにします。
    8. [Propose file change (ファイル変更を提案)] をクリックします。
    9. [Create pull request (プル要求を作成)] をクリックします。
    10. 上記の「レビューアプリケーションを使用して変更を検証する」ステップの手順に従って、新しい welcome (ようこそ) ヘッダーを確認します。

    複数のレビューアプリケーションを開いて確認すると、アプリケーションが完全に隔離されたブランチであることが視覚的にわかります。 

    変更 1: 新機能: 住宅ローン計算機

    プル要求 1 を使用した Dreamhouse Web アプリケーションのスクリーンショット。住宅ローン計算機が設定されていますが、タイトルは変更されていません。

    変更 2: タイトルの変更

    プル要求 2 を使用した Dreamhouse Web アプリケーションのスクリーンショット。タイトルは変更されていますが、住宅ローン計算機能が設定されていません。

    新機能をマスタブランチにマージする

    1. GitHub リポジトリに戻り、[Pull Requests (プル要求)] タブをクリックします。2 つのプル要求がリストされます。

      GitHub のスクリーンショット。タイトルの変更と新機能の追加の 2 つのプル要求が表示されています。
    2. それぞれのプル要求をクリックします。スクロールダウンして、[Merge pull request (プル要求をマージ)] と [Confirm merge (マージを確認)] をクリックします。
    3. [Heroku Pipeline (Heroku パイプライン)] タブに戻ります。レビューアプリケーションが削除され、変更がステージングにリリースされています。変更がステージング環境にリリースされたら、アプリケーションを本番に昇格して、ユーザ向けの新バージョンを作成できます。
    4. [Promote to production… (本番に昇格…)][Promote (昇格)] の順にクリックします。

    家探しを始めようとしているユーザ向けの新バージョンのリリースができました! ちょっと待ってください。ユーザインターフェースは完成しましたが、本番環境の物件が Trailhead Playground に対応付けられていません。既存の Trailhead Playground を使用して、本番環境に接続しましょう。本番環境を作成するときに、ステージングで本番と同じデータベースを使用することはないでしょう。通常は、本番用の個別の Trailhead Playground を作成する必要があるものと思われます。 

    ここでは時間を節約するために、既存の Playground を使用します。ただし、個別の本番組織を作成したい方は、新しい Trailhead Playground を起動して、認証情報をリセットしてから、Dreamhouse パッケージをインストールします。新しい Trailhead Playground を作成したら、このステップに戻ってパイプラインの設定を続行します。 

    本番環境の設定をインポートする

    1. Heroku Pipelines ダッシュボード (https://dashboard.heroku.com/apps) に移動します。
    2. パイプラインの名前 (dreamhouse-pipeline) の横に、2 つのアプリケーションと示されています。2 つのアプリケーションの横にある 矢印アイコン をクリックします。
      Heroku ダッシュボードのスクリーンショット。dreamhouse パイプラインと、本番用と開発用の Heroku アプリケーションが表示されています。
    3. dhprod-UNIQUE_ID という名前のアプリケーションをクリックします。
    4. [Resources (リソース)] タブをクリックして、[Add-ons (アドオン)] 項目に「connect」と入力します。
    5. 本番アプリケーションに追加する [Heroku Connect] を選択して、[Provision (プロビジョニング)] をクリックします。
    6. [Add-ons (アドオン)] の下にある [Heroku Connect] リンクをクリックします。Heroku Connect ダッシュボードの新しいタブにリダイレクトされます。この画面の上部にある 2 つのタブに各アプリケーションが示されています。Heroku Connect ダッシュボードのスクリーンショット。本番タブが開いています。このタブ内で [Overview (概要)] ビューが選択されています。接続状況は緑のチェックマークが付いたアイドルで、[Salesforce Rows (Salesforce の行数)] に 26 という数字が示されています。

    7. [dhdev-UNIQUE_ID] タブをクリックします。
    8. [Settings (設定)][Import/Export Configuration (設定のインポート/エクスポート)] の順にクリックします。  ここでは、Heroku Connect の設定をエクスポートして、本番アプリケーションでも開発アプリケーションで使用したものと同じ設定を使用します。
    9. [Export (エクスポート)] をクリックします。開発アプリケーションの Heroku Connect の設定がローカルの JSON ファイルにダウンロードされます。
    10. このファイルをコンピュータに保存します。
    11. Heroku 開発アプリケーションからエクスポートされた設定を使用するために、Heroku 本番アプリケーションにインポートします。
    12. Heroku Connect ダッシュボードの上部にある [dhprod-UNIQUE_ID] タブをクリックします。
    13. [Overview (概要)] タブで、[Setup Connection (接続の設定)] をクリックします。
    14. スキーマ名入力ボックスをクリックし、テキストが「salesforce」であることを確認して、[Next (次へ)] をクリックします。
    15. [Authorize (承認)] をクリックします。元の Trailhead Playground か、2 つ目の本番 Trailhead Playground の Trailhead 認証情報を使用します。
    16. [Allow (許可)] をクリックします。
    17. [Settings (設定)] タブに移動し、[Import/Export Configuration (設定のインポート/エクスポート)] を選択して、[Import (インポート)] をクリックし、[Choose file (ファイルの選択)] をクリックしてインポートする .json ファイルを見つけます。
    18. [Upload (アップロード)] をクリックして、インポートを開始します。ファイルが正常にインポートされると、Heroku Connect が承認された Trailhead Playground からデータベースへのデータの同期を開始します。完了すると、[Salesforce Rows (Salesforce の行数)] と [Database Rows (データベースの行数)] に値が表示されます。
      Heroku Connect ダッシュボードの概要ビューにある本番ビューの拡大表示。接続状態がアイドルで、Salesforce の行数が 26、データベースの行数も 26 であることが示されています。
    19. 本番アプリケーションの Heroku ダッシュボード (https://dashboard.heroku.com/apps/dhprod-UNIQUE_ID) に移動します。
    20. [More (その他)][Restart all dynos (すべての dyno を再起動)] の順にクリックします。
    21. [More (その他)][View Logs (ログを表示)] の順にクリックします。状態が実行中に変更されたら、[Open app (アプリケーションを開く)] をクリックして、本番アプリケーションを表示します。

    おめでとうございます! Heroku パイプラインが完成しました。