heroku 初級編 - GitHub から deploy してみよう -

みなさま、こんにちは。たくさんの仕事に囲まれて泣きながら過ごしていますが、今月は Perfumeのライブが約4日に一度程度の頻度で訪れるために泣いてる場合ではありません、しょっさんです。

さて、Advent Calendar 2018 始まりましたね。初日からすっかり遅刻気味ですが、今年も**Heroku**どうもありがとうございました。そして、これからもどうぞよろしくお願い申し上げます。

# GitHubからHerokuへ deployしてみよう

Heroku 初心者向けのガイダンスには、ローカルのgitリポジトリから、`heroku create` して `git push heroku master` することが一般的です。実際にこの方法を使うのは、ちょろっと試すときがほとんどで、それ以外の場合ではGitHubと連携して、`Heroku Flow`を使っていただくようにおすすめしています。

おすすめしている程度には、GitHub連携は使っていただきたいと考えています。ですから、今回は初級編と題して、`Heroku Flow` を使わずとも GitHub から直接 Heroku へ deploy してみる手順について紹介します。Heroku の全てに通じることですが、なにをするにしても、ひじょーにカンタンです。

## 前提条件

大したことでもないけれども、どうしても必須な条件があります。

- Heroku アカウントを持っている
- GitHub アカウントを持っている

当たり前でした。ごめんなさい。でも、これだけあれば GitHubからカンタンに Herokuへ deployする手順を学習できます。

なお、これから実行・実現することはすべて「無料」で実施可能です。お財布にも優しい!!

## 準備1: Heroku用のソースコードを準備しよう

「Heroku で動かすためのアプリケーションを書いてください」では、敷居が高すぎるので、Heroku が準備しているデモソースコードを元にして試してみます。

Herokuでは、[Githubリポジトリ](https://github.com/heroku/) にて対応している言語のサンプルソースコードが公開されています。今回は、自分がたまたま `Node.js`の連載を持っているからという理由だけで、`Node.js` のサンプルソースコードを選択します。他の言語で試してみたい方は、もちろんそちらでも構いません。

まず [https://github.com/heroku/node-js-getting-started](https://github.com/heroku/node-js-getting-started) へ移動しましょう。そしておもむろに右上の「Fork」ボタンをクリックして自分のリポジトリへコピーしましょう。

<img width="1042" alt="Fork_github.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/a7869423-c9ba-c60c-0940-9f970408c916.png">

複数の組織を持っている場合は、こちらのように選択画面が出てくると思いますが、そのあたりはお任せします。

<img width="482" alt="Screen Shot 2018-12-01 at 10.03.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/36b3b228-8192-9503-6b61-554bc6c45732.png">

これで、deploy 用のソースコードの準備は完了です。

## 準備2: Heroku アプリケーションを作成しよう

Heroku 上でアプリケーションを動かすためには、Heroku アプリケーションが必要です。感覚としては、空の箱を一つ準備して、ソースコードをそこへ放り込むと、Webアプリケーションが動く、というイメージです。まず、この空の箱を準備します。

Heroku へログインして、Heroku ダッシュボード画面へ入ります。アプリケーション一覧の画面になりますので、ここで右上の「New」をクリックしてプルダウンメニューから`Create new app`をクリックします。

<img width="905" alt="Create_new_app_Heroku.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/3fe01852-3e75-a36b-1215-de865a698cc1.png">

Heroku アプリケーションを作成する画面になります、`App name` は Herokuアプリケーションへアクセスするときの URLの一部になります。ここで指定した `App name` が、`https://<App name>.herokuapp.com` としてアクセスできるようになります。ドメイン名の一分になるので、世界中で唯一の名前であることが必須となります。入力しながら、使えるかどうかお試しください。面倒な場合は空欄にしておけば、自動的にアプリケーション名が割り振られます。

リージョンは、「United States」と「Europe」が選択できます。`Private Space`でなければ、この２つからしか選択できないので、標準のままの「United States」でどうぞ。

アプリケーション名に問題がなければ、「Create app」ボタンをクリックします。

<img width="923" alt="Create_app_Heroku.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/fec4b15c-bb13-26ae-61dd-98bac2da659a.png">

ほんの数秒で Heroku app が作成され、対象のアプリケーションのダッシュボードへ移ります。

ここまでで、準備完了です。

## GitHub と連携しよう。

Heroku アプリケーションを作成した後、ダッシュボードの「Deploy」タブにいるのではないでしょうか。もし、違うタブにいるようであれば「Deploy」へクリックして移動してください。

<img width="1078" alt="Heroku_Deploy.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/460e52c6-8755-603a-030a-c8e50326d51e.png">

ちょうど、この下部に `Deployment method` という欄があり、現在は `Heroku Git` になっているように見えますね。Heroku app作成直後は、Heroku app一つに割り当てられる Gitリポジトリへソースコードを`push`することでアプリケーションを deployできる状態となっています。いわゆる、`git push heroku master` で deployする時の状態です。

ここでおもむろに、愛嬌あるGitHubアイコンの「GitHub」をクリックしてみましょう。しばらくすると、次の画面のような`Connect to GitHub`欄が出てきます。

<img width="1184" alt="Connecto_to_GitHub.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/23cf62b1-8369-9829-3063-3594f83e1c92.png">

次にやることはわかりますね、そうです「Connect to GitHub」ボタンをクリックするのです。GitHubでの認可画面が出てきますので、「Authorize heroku」をしてみましょう。

<img width="640" alt="Authorize_GitHub.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/ab0bf046-cd3e-4443-a20a-086be47f582e.png">

ただしく認可されれば、検索画面へと切り替わります。さきほど自分のリポジトリへ`Fork`した「node-js-getting-started」を`repo-name`へ入力し「Search」してみましょう。次の通り、検索欄の下に「node-js-getting-started」のリポジトリが表示されるでしょう。

<img width="1053" alt="search_repo.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/b2705364-9e26-4d00-3372-78db698a9033.png">

「Connect」ボタンをクリックするのです! どうなりますか？ 次のように `Automatic deploys`と`Manual deploy` の欄ができあがれば成功です。

<img width="1184" alt="connected_github.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/752846d7-0e50-3bc2-f734-1b3823f3711a.png">

## 手動 deployを実行しよう!!

`Automatic deploys` が気になりところですが、一旦忘れて、先程`Fork`してきたプログラムをdeployしてみましょう。手動でもdeployができるんです。「今の状況でdeployしたーい」という甘い誘惑に応えます。

deployしたい元となる`git`のブランチはどれかわかりますね？今回は迷わず`master`ブランチで構いません。`Manual deploy`欄の「Choose a branch to deploy」の項目が`master`になっていることを確認しつつ、「Deploy Branch」ボタンをクリックしましょう。このように、Buildプロセスが開始されます。

<img width="703" alt="building.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/990c1ca4-6028-c89a-2736-a93ad4879a69.png">

ほんの数秒程度で Build&deploy は完了します。異常なくDeployできれば、次のように「Your app was successfully deployed.」と表示され、「これを押せ」と言わんばかりに「View」ボタンが現れます。そうです、押してやりましょうとも「View」ボタンを。

<img width="698" alt="deployed.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/d8720b27-32ee-ac10-a848-5c63cd8a0f8b.png">

次のような画面が表示されれば Deploy成功です。先程 `Fork`してきたばかりのアプリケーションが、このように全世界へ公開されました!!

<img width="1367" alt="Node_on_Heroku.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/c124d4a0-0176-2af2-a773-4669802bcf30.png">

## 自動Deployって？

スルーした`Automatic deploys`欄内の「Enable Automatic Deploys」をオンにするとどうなるのでしょうか？

ここも、手動deploy同様、ブランチを選択できます。GitHubの対象のブランチにソースコードが変更され、コミットされたら、自動的にHerokuへDeployする、という機能です。また、もう一つ気になるチェックがあることに気がついたでしょうか？そうです `Wait for CI to pass before deploy` です。これをチェックすると、Deployの前に `Heroku CI`が動き、自動的にソースコード内で設定されたユニットテストが実行されます。そのテストコードがすべてパスしたら、Deployするフローとなります。

<img width="803" alt="Enabled_automatic_deploys.png" src="https://qiita-image-store.s3.amazonaws.com/0/37263/253d872b-a7d5-b900-e82c-0d48f9201df5.png">

このように、自動的にテストとも連携して、Deployを実行できる。それもこんなカンタンに。

# まとめ

GitHubと連携して HerokuへプログラムをDeployすることはカンタにできちゃいます。次のたったの4手順です。

1. ソースコードを準備する
2. Heroku app を作成する
3. GitHubと連携する
4. Deploy!

また、GitHubのブランチと連動して、自動的にテストコードを実行して、うまくいったら自動的にDeployすることもできます。他の PaaS でここまでカンタンにできます？

そう、Heroku ならできます。みなさんもカンタンに楽をしてプログラムを公開していきましょう!