みなさま、こんにちは。たくさんの仕事に囲まれて泣きながら過ごしていますが、今月は 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リポジトリ にて対応している言語のサンプルソースコードが公開されています。今回は、自分がたまたま Node.jsの連載を持っているからという理由だけで、Node.js のサンプルソースコードを選択します。他の言語で試してみたい方は、もちろんそちらでも構いません。
まず https://github.com/heroku/node-js-getting-started へ移動しましょう。そしておもむろに右上の「Fork」ボタンをクリックして自分のリポジトリへコピーしましょう。
複数の組織を持っている場合は、こちらのように選択画面が出てくると思いますが、そのあたりはお任せします。
これで、deploy 用のソースコードの準備は完了です。
準備2: Heroku アプリケーションを作成しよう
Heroku 上でアプリケーションを動かすためには、Heroku アプリケーションが必要です。感覚としては、空の箱を一つ準備して、ソースコードをそこへ放り込むと、Webアプリケーションが動く、というイメージです。まず、この空の箱を準備します。
Heroku へログインして、Heroku ダッシュボード画面へ入ります。アプリケーション一覧の画面になりますので、ここで右上の「New」をクリックしてプルダウンメニューからCreate new appをクリックします。
Heroku アプリケーションを作成する画面になります、App name は Herokuアプリケーションへアクセスするときの URLの一部になります。ここで指定した App name が、https://<App name>.herokuapp.com としてアクセスできるようになります。ドメイン名の一分になるので、世界中で唯一の名前であることが必須となります。入力しながら、使えるかどうかお試しください。面倒な場合は空欄にしておけば、自動的にアプリケーション名が割り振られます。
リージョンは、「United States」と「Europe」が選択できます。Private Spaceでなければ、この２つからしか選択できないので、標準のままの「United States」でどうぞ。
アプリケーション名に問題がなければ、「Create app」ボタンをクリックします。
ほんの数秒で Heroku app が作成され、対象のアプリケーションのダッシュボードへ移ります。
ここまでで、準備完了です。
GitHub と連携しよう。
Heroku アプリケーションを作成した後、ダッシュボードの「Deploy」タブにいるのではないでしょうか。もし、違うタブにいるようであれば「Deploy」へクリックして移動してください。
ちょうど、この下部に Deployment method という欄があり、現在は Heroku Git になっているように見えますね。Heroku app作成直後は、Heroku app一つに割り当てられる Gitリポジトリへソースコードをpushすることでアプリケーションを deployできる状態となっています。いわゆる、git push heroku master で deployする時の状態です。
ここでおもむろに、愛嬌あるGitHubアイコンの「GitHub」をクリックしてみましょう。しばらくすると、次の画面のようなConnect to GitHub欄が出てきます。
次にやることはわかりますね、そうです「Connect to GitHub」ボタンをクリックするのです。GitHubでの認可画面が出てきますので、「Authorize heroku」をしてみましょう。
ただしく認可されれば、検索画面へと切り替わります。さきほど自分のリポジトリへForkした「node-js-getting-started」をrepo-nameへ入力し「Search」してみましょう。次の通り、検索欄の下に「node-js-getting-started」のリポジトリが表示されるでしょう。
「Connect」ボタンをクリックするのです! どうなりますか？ 次のように Automatic deploysとManual deploy の欄ができあがれば成功です。
手動 deployを実行しよう!!
Automatic deploys が気になりところですが、一旦忘れて、先程Forkしてきたプログラムをdeployしてみましょう。手動でもdeployができるんです。「今の状況でdeployしたーい」という甘い誘惑に応えます。
deployしたい元となるgitのブランチはどれかわかりますね？今回は迷わずmasterブランチで構いません。Manual deploy欄の「Choose a branch to deploy」の項目がmasterになっていることを確認しつつ、「Deploy Branch」ボタンをクリックしましょう。このように、Buildプロセスが開始されます。
ほんの数秒程度で Build&deploy は完了します。異常なくDeployできれば、次のように「Your app was successfully deployed.」と表示され、「これを押せ」と言わんばかりに「View」ボタンが現れます。そうです、押してやりましょうとも「View」ボタンを。
次のような画面が表示されれば Deploy成功です。先程 Forkしてきたばかりのアプリケーションが、このように全世界へ公開されました!!
自動Deployって？
スルーしたAutomatic deploys欄内の「Enable Automatic Deploys」をオンにするとどうなるのでしょうか？
ここも、手動deploy同様、ブランチを選択できます。GitHubの対象のブランチにソースコードが変更され、コミットされたら、自動的にHerokuへDeployする、という機能です。また、もう一つ気になるチェックがあることに気がついたでしょうか？そうです Wait for CI to pass before deploy です。これをチェックすると、Deployの前に Heroku CIが動き、自動的にソースコード内で設定されたユニットテストが実行されます。そのテストコードがすべてパスしたら、Deployするフローとなります。
このように、自動的にテストとも連携して、Deployを実行できる。それもこんなカンタンに。
まとめ
GitHubと連携して HerokuへプログラムをDeployすることはカンタにできちゃいます。次のたったの4手順です。
- ソースコードを準備する
- Heroku app を作成する
- GitHubと連携する
- Deploy!
また、GitHubのブランチと連動して、自動的にテストコードを実行して、うまくいったら自動的にDeployすることもできます。他の PaaS でここまでカンタンにできます？
そう、Heroku ならできます。みなさんもカンタンに楽をしてプログラムを公開していきましょう!