【きっとわかる】Herokuを使ってみよう 第4回 ~アプリケーション登録、起動~


ブログなどを見ているとHerokuというサービスで試しているけど…
Herokuってなんだろう…?そして、英語ばかりで難しそう…。
 
そんなことはありません!!
 
使い方さえわかれば、
 
非常に簡単!しかも無料で!!
 
自分の作ったWEBアプリケーションを試すことができます。
今回、基本的な使い方を解説していきますのでこれを機にHerokuデビューしましょう!

Herokuを使ってみよう 第4回

アプリ登録

今回は、Herokuにアプリを登録して動かしていきます。
方法としてはGitHubと連携してアプリの登録を行うので
前回のリポジトリを作成を行ってから実行してください。

新規アプリケーション作成

前々回の、ログイン後の画面からスタートします。
「Create New App」をクリックして、アプリの作成をしていきます。
heroku-make-app-1
 
「アプリケーション名(App Name)」、「リージョンの場所(Runtime Selection)」を入力して、「Create App」をクリックします。
heroku-make-app-2
 
アプリケーションの作成ができました。
heroku-make-app-3

Pipelineの作成

Pipelineを使うことで、
stagingへデプロイ⇒確認OK⇒本番環境へコピー
のようなことができるようになります。
staging環境を作成していくのは次回以降ですが、今回は直接本番環境へPipelineを使ってデプロイをしていきます。
とりあえずやってみましょう。
「New Pipeline」をクリックします。
heroku-make-app-4
 
「Pipeline Name」を入力します。
入力後、「Create Pipeline」をクリックします。
heroku-make-app-5

GitHubにつなぐ

「Connect to GitHub」でGitHubにつなぎます。
heroku-make-app-6
 
開いたポップアップで「Connect to GitHub」をクリックします。
heroku-make-app-7
 
開いたページの下部にある「Authorize application」で認証していきます。
※GitHubにログインしていたのでアカウント名を求められませんでしたが、途中に入力がある可能性があります…。
heroku-make-app-8
heroku-make-app-9
 
パスワードを入力して、「Confirm password」で認証しましょう。
heroku-make-app-10
 
再度「Connect to GitHub」をクリックします。
heroku-make-app-11
 
デプロイするリポジトリ入力して「Search」で検索します。
今回は、「study-python」というリポジトリを作成しているのでそれを検索します。
heroku-make-app-12
 
デプロイ予定のリポジトリが表示されるので、「connect」をクリックしてつないでいきます。
heroku-make-app-13
 
無事GitHubにつながりました。
heroku-make-app-14

デプロイ

GitHubに接続できたのでデプロイしていきます。
「PRODUCTION」のアプリケーションをクリックしましょう。
heroku-make-app-15
 
「deploy」タブに進みます。
heroku-make-app-16
 
「deploy」で開いたページの下部に「Manual Deploy」があります。
そこでブランチを選択し「Deploy Branch」でデプロイすることができます。
heroku-make-app-17
heroku-make-app-18
 
デプロイが始まります。
完了するとすべて緑のチェックが入り、「Your app was successfully deployed」と表示されます。
heroku-make-app-19
heroku-make-app-20

結果を確認

デプロイに成功していると「View」ボタンが表示されます。
それをクリックして確認してみましょう。
heroku-make-app-21
heroku-make-app-22
問題なく表示されました。

次回の予定

次回は、今回起動したアプリを停止していきます。

Heroku連載記事

【きっとわかる】Herokuを使ってみよう 第1回 ~Herokuの特徴~
【きっとわかる】Herokuを使ってみよう 第2回 ~アカウント登録~
【きっとわかる】Herokuを使ってみよう 第3回 ~デプロイ準備~
【きっとわかる】Herokuを使ってみよう 第4回 ~アプリケーション登録、起動~

  • このエントリーをはてなブックマークに追加

PAGE TOP