Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

みなさま、こんにちは。たくさんの仕事に囲まれて泣きながら過ごしていますが、今月は 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」ボタンをクリックして自分のリポジトリへコピーしましょう。

Fork_github.png

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

Screen Shot 2018-12-01 at 10.03.27.png

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

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

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

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

Create_new_app_Heroku.png

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

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

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

Create_app_Heroku.png

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

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

GitHub と連携しよう。

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

Heroku_Deploy.png

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

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

Connecto_to_GitHub.png

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

Authorize_GitHub.png

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

search_repo.png

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

connected_github.png

手動 deployを実行しよう!!

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

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

building.png

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

deployed.png

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

Node_on_Heroku.png

自動Deployって?

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

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

Enabled_automatic_deploys.png

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

まとめ

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

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

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

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

sho7650
妻x1+娘x4 オンプレインフラメインのインフラエンジニアが、ソフトウェア中心のPaaS/SaaS業界へ転身し、一度はやめたアプリケーションに手を出し始めている昨今、みなさまいかがお過ごしでしょうか。 外資系はいいぞ(
http://oshiire.to
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした