こんにちは、皆さん!

ここではどうやってHerokuでステージングブランチを作れるのか、そして、そこで役に立つちょっとした予備知識と一緒にお伝えしようと思う。Herokuのステージングブランチについての解説はこちらの導入編を参照してください。→


トピック


ステージングブランチの作り方

では、さっそく最初のステージングブランチを作っていきましょう。
まず、Herokuアカウントを開いて、そして、ステージングブランチにしたいアプリを選びます。ここでは、僕自身のHerokuで例を挙げていく。下記のようにHerokuのアプリケーションがいくつかある。ここでthis-will-be-stagingをステージングブランチにするとしよう。なので、まずそのアプリケーションの詳細に入る。

ホーム画面からアプリへ

その後、ダッシュボードからDeployをクリック。

ダッシュボードからDeploy

そしたら、パイプラインを作成するので、Choose a pipelineからCreate new pipelineを選択。

***注意*** ここで、本家の方に選ぶHerokuのアプリ内のコードはステージングブランチに選んだコードに変更されるので、くれぐれも失いたくないコードの入ったHerokuアプリを本家として選ばないでください!!
新しいパイプラインを作成する

このパイプラインというのはつまりは2つのHerokuのアプリケーションをつなげるようなものである。そしたら、いつでもステージングブランチのコードを本家の方にプッシュすることができるのだ。
名前を付けてパイプラインの作成は完了。ここでは、heroku-staging-testという名前にした。


そしたら、おそらくこんな感じの画面になったでしょう。まだステージングブランチだけで本家がないので、ここで追加していく。Add appをクリック。

本家を追加するための画面

ここで、今回は最初にホームページで見せたthis-will-be-productionが本家なのでサーチバーからタイプして選択した。そしたら、下記のようにパイプラインが完成。

パイプライン完成!

次はステージングブランチのコードを本家にプッシュして本家のウェブサイトのコードを更新していく。


プロダクションのコードを更新する

ここまででとりあえず、ステージングブランチと本家の間にパイプラインを作ることに成功した。ここからは実際に運用していくステージで、ステージングブランチにいれた新しいコードを本家にプッシュして、反映させる。

ステージングブランチから本家にプッシュ

この赤丸を打ったボタンがまさしくこれまでいつでもステージングブランチのコードを本家にプッシュすることができるといっていたボタンなのだ。


ここで、Promoteというボタンをおして、プッシュを完了すると、下記のような画面になる。

プッシュ完了!

これはただいまステージングブランチと本家のコードはまったく同じであるということを言っているのだ。そして、以降ステージングブランチのコードを変えるたびにこのボタンが先ほどのボタンのようになり、またプッシュすることができるようになる。


こうしてパイプラインのセットアップが完了した後にホームページに戻ると、下記のように先ほどの2つのアプリが1つにまとまっているでしょう。

パイプライン完了後のホームページ
ステージングブランチにプッシュ先を変更する

ステージングブランチの作り方とウェブサイトのコードをステージングブランチから更新する方法について話してきた。しかし、どうやったらステージングブランチのコードを更新できるのか?
これについて話す前に、まず注意したいのはステージングブランチはステージングブランチという特別な名前を与えられているが、結局は1つのHerokuのアプリケーションであることを肝に銘じてもらいたい。なので、いつもHerokuにプッシュするようにステージングブランチに更新したコードをプッシュすることができるのだ。


ここで、今エディターで編集しているコードのプッシュしている先がステージングブランチになっていない場合は下記のようにプッシュ先を設定しましょう。
まず、Herokuのページからまずステージングブランチのアドレスをコピーします。ステージングブランチのアプリを開いて、Settingsをクリック。ちょっとスクロールしたところに下記のようなものがあるので、この赤丸のところをコピー。

ステージングアプリのアドレスをコピー

その後、編集しているコードのディレクトリーをターミナルで開いて、下記のようにHerokuへのプッシュ先を設定する。
(heroku addressの部分に先ほどのコピーしたアドレス。<>は不要)

git remote add heroku <heroku address>

こうすれば、今後Herokuにプッシュする際にはステージングブランチの方にコードが行くようになる。


ステージングブランチの注意点

ステージングブランチを使っていく上で、いくつか覚えていただきたい注意点がある。


ステージングブランチと本家ではデータベースが別々である

ここでもう一度おさらいするが、ステージングブランチもまた1つのHerokuアプリであるので、それ自身にデータベースも存在し、これは本家の方と別のものである。なので、ステージングブランチで新たに足したデータは本家には反映されないし、逆に本家で追加したデータもまたステージングブランチには反映されない。
しかし、これがまたステージングブランチのいいところで、ステージングブランチで様々なデータをテストする際にそれが本家に影響を与えるかどうか気にしなくていいということである。

必要なアドオンを再追加する

これまたアプリが分かれているためだが、本家で使われているHerokuのアドオンでテスト時に必要になるアドオンはステージングブランチにもしっかり追加しよう。例えば、メール送信をテストしたいのなら、sendGridを追加する。

必要な環境変数を再追加する

こちらもまた本家と同じように追加しないと、アプリがうまく動作しないかもしれないのであるのなら追加しましょう。また、その変数の使い方によるが、テストするために本家とは違うテスト用の変数を設定してもよいでしょう。


Herokuのメンテナンスモード

最後に、ステージングブランチのコードを本家にプッシュする際にとても役に立つメンテナンスモードについて説明していこうと思う。
実は、Herokuにはメンテナンスモードがあり、いつでもユーザーがその状態を変更できる。もしも、メンテナンスモードになっている状態で、そのウェブサイトに行くと、下記のようにウェブサイトのコンテンツを見ることができないようになっているのだ。

Herokuのメンテナンスモード

これがなぜ役に立つのかというと、ステージングブランチのコードを本家にプッシュする際に、Herokuは一度、アプリを止めるので、ユーザーの邪魔をしてしまうのだ。特にアクセスが集中している本家のサイトだと多くのユーザーに影響を与えやすい。なので、一度本家をメンテナンスモードにして、ユーザーのアクセスを無効にして、変にユーザーのデータ更新を邪魔しないようにするのだ。
これもまた簡単で、本家の方のアプリのSettingsに行って、下記の画面までスクロール。

メンテナンスモード変更のボタン

このボタンでメンテナンスモードをオンにしたり、オフにできる。また、もし、本家の方のアドレスをいれたディレクトリーがあるのなら、下記のようにターミナルからでも設定できる。1つ目でメンテナンスモードにし、2つ目でメンテナンスモード解除。

heroku maintenance:on
heroku maintenance:off

1つだけ注意したいのは、ステージングブランチをメンテナンスモードにしても意味ないので、先ほどアドレスを設定したステージングブランチではなく、本家でこのコマンドを使うことを覚えておこう


おまけ

Herokuはデフォルトでアカウント1つにつき5個までしかアプリを持つことができない。この条件で行くと、ステージングブランチとか作ると、すぐに2個分のアプリのスペースを取ってしまう。なので、できれば、クレジットカードを登録しよう。登録するだけなら、何もお金を払うことはない上、さらに、持てるアプリの数が一気に200個まで増加するので、オススメ!


まとめ

以上で、Herokuでのステージングブランチの使い方の説明になる。Herokuを使って、アクセスの多い大きなウェブサイトを管理していく上で、何段階にもなるテストはサービスの質を確証する上で、大事になってくる。その際に、ステージングブランチはユーザーに影響を与えずにHeroku上でのテストを可能にしてくれるとても便利な機能である。みんなもぜひステージングブランチを有効活用して、さらなるウェブサービスの向上に精進してください。


皆さんの役に立つことを願います!
では、また次回まで✌
記事更新はツイッターで告知するので、ツイッターの方でもフォローお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です