Heroku Review Appsで爆速レビュー環境を構築してみた！

はじめに

みなさんこんにちは。
新しいモノ好きのエンジニア植松です。

今回は完全に乗り遅れてしまった「Heroku Review Apps」について取り上げてみたいと思います！

Heroku Review Apps

突然ですが皆さん。ちゃんとレビューできていますでしょうか！？


個人的に前期は後輩のOJT担当として色々とレビューする機会が多かったので、限られた時間の中でしっかりレビューすることの難しさを実感しました。

そこで今回はHerokuアプリのレビュー機能をご紹介したいと思います。
私が「Heroku Review Apps」に出会ったのは昨年の12月に開催された、「Salesforce World Tour Tokyo 2015」の開発者セッションでしが、結構前にパブリックベータになっていたようです。

当時から気になっていたのですが、実際に使ってみたらとても便利だったので、使いどころを詳細にご紹介させて頂きます！

開発環境

レビュー機能なので、今回はサンプルアプリを用意して「Heroku Review Apps」を使ってみました。

せっかくなので、Salesforceが提供しているデザインフレームワークの「Salesforce Lightning Design System」の使用感を試すアプリを用意しました。※以降SLDSと略します。

参考：　https://developer.salesforce.com/lightning/design-system

また、開発にはクラウド環境で利用可能で、アプリケーション開発に便利な「Cloud9」というサービスを利用しました。

「Cloud9」だけでもブログが書けそうなほど気になる機能があり、有償でSalesforceの開発にも使えるようなので今後ゆっくり試してみたいと思いました。
アプリの構成や開発ツールは「Cloud9」のNodo.jsサンプルプロジェクトをそのまま使わせて頂いたので以下の通りとなります。

  • Cloud9
  • Github
  • Node.js
  • Express
  • Angular
  • Heroku

設定のポイントはGithubとHerokuのインテグレーションとなります。
今回はGithubに変更確認依頼のプルリクエストを送り、Herokuでレビューするというフローを構築しました。

設定

Node.jsアプリ

まずはCloud9上でNode.jsアプリを作成し、Gitのローカルリポジトリを作成します。

Github

続いて、Githubにてリモートリポジトリを作成し、リポジトリのURLを取得します。

Heroku

最後にHerokuで新規アプリを作成します。
普段は「Heroku Toolbelt」でローカルのCLIから「$ heroku create」コマンドで作成するかと思いますが、Github連携を使用するためダッシュボードから手動作成します。

Github連携

まずはGithubのリポジトリとの連携の設定を行い、ダッシュボードから手動でデプロイします！
この時点で既にHerokuにアプリが作成されました！
Socket.ioを使用したChatのサンプルアプリが利用できるかと思います。

http://yu1q89-slds-playground.herokuapp.com/

ここから、主題の「Review Apps」の設定をしたいと思います。
ダッシュボードの「Deploy」タブの下部にある「Review apps」セクションの「Enable Review Apps」をクリックします。

完了！
簡単ですね！
それでは早速レビューフローを確認してみましょう！

レビューフロー

開発

まずはCloud9にてSLDS導入開発のためGitブランチ「try-slds」作成し、SLDSを導入します。
「$ npm install @salesforce-ux/design-system --save」コマンドでライブラリを取得して、デザインをごにょごにょ修正したのちGithubにpushします。

Githubにも「try-slds」ブランチが作成されておりプルリクを促すボタンが現れています。
促されるままボタンを押して、プルリク作成画面でコメントを入力してプルリクを送信して開発完了です。

レビュー

準備が長くなりましたが、Herokuのダッシュボード画面に戻ると「Review Apps」セクションに「#1 Implemeted slds」と先ほど作成したプルリクが表示されています！
その横にある「Create App」ボタンを恐る恐るクリックすると・・・

エラーが表示されました。
app.jsonが無いとのことなので「Create app.json...」ボタンでapp.jsonファイルを作成し再度実行すると・・・
ようやくレビュー環境を作成することができました！

https://yu1q89-slds-playground-pr-1.herokuapp.com/

しっかりと開発環境でごにょごにょしたデザインが摘要されています！
URLを比較するとドメインのサフィックスとして「-pr-1」が追加されていることが分かります。
http://yu1q89-slds-playground.herokuapp.com/
https://yu1q89-slds-playground-pr-1.herokuapp.com/

このように本番環境は稼動させたままオンラインで動作する環境を作成し、プルリクベースでレビューができるようになりました！
これだけの手順でレビュー環境を作成でき、プルリクでコードレビュー・Review Appsで動作レビューをすることができるので、短時間で効率的なレビューができるようになるかと思います。

まとめ

いつもとは違いSalesforceから少し離れましが、今回のようにSLDSの検証環境として使用すれば今後のLightnigコンポーネントやVisualforce開発にも役に立つかと思います。
また今回は使用していませんが、「Pipelines」という機能を利用すると本番環境とステージング環境を使用した運用にReview Appsも併用することが可能となります。

実際に試して感じたことは、今回の様にデザインやUI/UXの開発レビューにはとても向いているのではないかと思いました。
ちなみに、サンプルアプリで使用したSLDSですが、とても簡単に綺麗なスタイルを適用することができ、
CSS設計でよく用いられる「BEM」という命名規則が使われている点も個人的にとても気に入りました。
今回は元のデザインを踏襲する形でSLDSを適用しましたが、SLDSの「Feeds」コンポーネント等を使用すればよりリッチなスタイルのデザインが作れそうです。

最後に

非常に便利な「Heroku Review Apps」ですが現在はBETA版であり、以下の様な注意事項もあるようです。
注意事項を把握しつつ便利な機能を積極的に活用していきましょう！

  • dynoやAddonも同様にレビュー環境に摘要されるため、有料のdynoやAddonを利用している環境ではReview Appsを有効化する際は要注意
  • 不用意なリリースを防ぐため、プルリクエストからの自動デプロイを設定する場合は、テスト環境やステージング環境のみでの利用を推奨

参考：https://devcenter.heroku.com/articles/github-integration#review-apps