進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

最初の Heroku アプリケーションのリリース

学習の目的

この単元を完了すると、次のことができるようになります。

  • Heroku ボタンを使用してアプリケーションを Heroku にリリースする。
  • 新規アカウントで引き続き Heroku を試す。

Heroku へのアプリケーションのリリース

ここまで、Heroku プラットフォームで実行できることを学習しました。いかに簡単に使用できるかについてずっと説明してきましたが、これから実際に確認してみましょう。この単元の後、実際の Web アプリケーションを Heroku プラットフォームで稼働させます。心配はいりません。各ステップについて説明します。

Heroku アカウントへのサインアップ

アプリケーションを Heroku にリリースするには、プラットフォームのアカウントが必要です。サインアップは迅速かつ簡単 (かつ完全に無料) です。今すぐ signup.heroku.com でサインアップしましょう。お待ちしています。

ボタンを使用したリリース

新しい Heroku アカウントにログインすると、Heroku ダッシュボードが表示されます。「Getting Started with Heroku (Heroku の使用開始)」と表示されます。Heroku を初めて使用する場合は、使用するプログラミング言語を表すアイコンをクリックし、ファーストステップガイドに従って新しいアプリケーションを作成します。

ただし、Heroku には、ボタンというツールを使用して、さらに早く使用を開始する方法が用意されています。ボタンをクリックするだけで、コード、設定、アドオンなど、必要なものをすべて備えるように事前設定されたアプリケーションをリリースできます。ボタンを使用して最初の Heroku アプリケーションを作成することで、このプラットフォームでいかに簡単に使用できるかについて分かります。また、詳細については、機能する実際の Node.js アプリケーションを取得し、調査と変更を行うこともできます。

次のボタンをクリックし、最初のアプリケーションをインストールします。

[Create New App (新規アプリケーションを作成)] ボタン

  1. 新しいアプリケーションの名前を入力するか、Heroku によって名前を選択できます。
  2. ランタイムを作成する地域 (アメリカまたはヨーロッパ) の中で選択します。
  3. [Create App (アプリケーションを作成)] をクリックしてアプリケーションをリリースします。1 ~ 2 分以内に、Heroku でアプリケーションが稼働されます。

アプリケーション名を入力し、地域を選択できる [Create New App (新規アプリケーションを作成)] ページ。

[View (表示)] をクリックして、Web で実際に実行されているアプリケーションの動作を確認します。

新しいアプリケーションが Heroku で実行されている

これで完了です。おめでとうございます。最初のアプリケーションが Heroku にリリースされました。簡単ですよね?

組み込みのコマンドライン

Heroku ダッシュボードから Heroku を使用できることを好む開発者もいますが、コマンドラインの操作を好む開発者もいます。Heroku は両方の開発者に完全なツールを提供します。

Heroku のコマンドラインツールは、開発者がすでに使用している基本コマンドから進化しました。次の最も基本的な Git コマンドは典型的な例です: git push。コードのバージョン管理に Git を使用している開発者は、コードの追加の変更をリポジトリに保存するために、このコマンドを 1 日に 50 回も入力する場合があります。Heroku では、開発者がその同じ Git コマンドを使用して、各自のアプリケーションに関連付けられている新しいターゲットリモートを次のように指定するだけで、コードを Heroku にリリースできます: git push heroku master。すぐに対応して決着です。

Heroku のツールは、コマンドラインの決まり文句および Web ベースのインターフェースのコレクションであり、困難で複雑な内容を洗練させて簡潔で明解にします。これらのツールは、開発者がすでに慣れていて好む内容に基づいており、Heroku の使用開始が簡単かつ楽になります。Heroku ダッシュボードで [Create new app (新規アプリケーションを作成)] をクリックできますが、Heroku CLI コマンド heroku create も同じくらい簡単です。いずれにしても、お気に入りのオープンソース言語でカスタムアプリケーションを作成するという楽しい部分に着手する準備が整いました。

Heroku の使命は、開発者の生産性と実力を向上させ、開発者の実行できることを拡大し、予期しない事態の発生で開発者をサポートすることです。Heroku CLI には何十種類もの強力な Heroku コマンドが揃っています。すべてのコマンドはheroku という単語で始めます。

Heroku CLI をインストールしたら、ターミナルを開き、 heroku help を入力して詳しく調べます。ダッシュボードよりもコマンドラインの使用を好む場合は、次のセクションが適しています。よくわからなくても、読み続けて、指示に従って進めてみてください。まったく関心がなくても心配はいりません。次の単元の準備ができたら Challenge に進みましょう。

コマンドラインインターフェースを試す

Heroku CLI をインストールしたところで、ターミナルウィンドウを開き、 heroku login と入力します。

ユーザ名として機能するメールアドレスで始まる Heroku ログイン情報を入力するように CLI から求められます。ログインしたら、heroku auth:whoami コマンドを使用して、どのユーザがログインしているのかをいつでも確認できます。

アプリケーションの詳細情報の一部をターミナルで直接参照できるようになりました。アクセスできるアプリケーションのリストを表示するには、heroku apps と入力します。次のような出力が表示されます。

CLI: アプリケーションリスト

先ほど Heroku ボタンを使用してリリースしたアプリケーションの名前が表示されますか? 新しいアプリケーションに関する情報を共有するように CLI に要求してみましょう。この例では、アプリケーションの名前は shiny-new-heroku-app です: heroku apps:info shiny-new-heroku-app

アプリケーションの名前を指定して、heroku apps:info コマンドを入力します。次のような出力が表示されます。

CLI: アプリケーション情報

ここでアプリケーションについて多くの情報を取得できます。実行している dyno (コンテナ) の数 (「web」というタイプの 1 つの dyno) と、インターネットでアプリケーションにアクセスできる Web URL を確認できます。

アプリケーションがすべての dyno で実行されないようにスケールダウンしましょう。コマンドラインを使用してスケールを行い、Heroku ダッシュボードと Web で確認できます。次のコマンドを入力します: heroku ps:scale web=0 -a <your app’s name>

Heroku CLI から、「Scaling dynos... done, now running web at 0:Standard-1x」(dyno をスケールしています。完了しました。0:Standard-1x で Web を実行しています。) というようなフィードバックが得られます。これで、アプリケーションの名前を指定してheroku apps:info を実行すると、dyno の値が空白であることが確認されます。dyno が実行されていません。信じられないかもしれませんが、ダッシュボードをご覧ください。

ダッシュボード: dyno がない [リソース] タブ

アプリケーションで Web dyno が実行されていない場合、Web URL を使用してアプリケーションにアクセスしようとすると、どうなると思いますか? コマンド heroku open -a <your app’s name> を使用して Web でアプリケーションを開きましょう。さて、どうなるでしょうか...

アプリケーションエラー

困りました。Web dyno が実行されていない場合、アプリケーションは Web で機能しません。それはよくないので、heroku ps:scale web=1 -a <your app’s name> CLI を使用し、1 つの Web dyno にスケールアップして戻しましょう。うまく行くことを願って、5 つ数え、ブラウザを再読み込みします。インターネットでアプリケーションの機能が戻りました。膨大です!

コマンドラインで Heroku CLI を使用し、アプリケーションを Heroku にリリースして設定を調整しました。いよいよ、どこからでも表示できるアプリケーションの更新に取り組みます。

コマンドラインで変更を行う

コードをローカルマシンにプルダウンする前に、コードを保持するディレクトリを作成します。ディレクトリを作成したら、ターミナルウィンドウを開き、そのディレクトリに変更します。

Heroku からコードをプルダウンし、アプリケーションをコピーしてローカルで操作できます。

git clone https://github.com/heroku/node-js-getting-started <your app’s name>
cd <your app’s name>
heroku git:remote -a <your app’s name> 

コピーにより、ソースと完全なリポジトリ履歴を使用して、アプリケーションにちなんだ名前のディレクトリが作成されます。また、Heroku の git リモートを追加して追加更新が容易になります。

それでは、Heroku でアプリケーションを少し変更し、実行中のアプリケーションに変更が反映されることを確認します。

お気に入りのテキストエディタで /views/pages/index.ejs を開き、<h1>Getting Started with Node on Heroku</h1><h1>My Name is <your name> and I’m Getting Started with Node on Heroku</h1> に置き換えます。ファイルを保存し、次の決まり文句を使用して git にコミットし、変更を Heroku にリリースします。

git commit -am "my first heroku push"
git push heroku master 

ターミナルに多くのテキストのスクロールが次のように表示されます。

ターミナルコマンドウィンドウでのテキストスクロースのスクリーンショット

完了したら、自分や家族、友人は、ブラウザを開いて Heroku で実行されている変更を確認できます。