Herokuを使って自作アプリを無料で公開する方法

Herokuのサムネイル

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg
ぼく

無料で自作のアプリやwebサイトを公開したいな…

Webサイトやサービスを作っても、インターネットに公開するにはお金がかかることを知って、がっかりしていませんか?

実は、 Herokuというサービスをつかえば、無料でサービスをネット上にアップロードできます。

事実、私が人生で初めて作成したwebアプリは、Herokuを活用して無料で公開しています。

本記事では、Herokuで無料で自作のアプリやサービスを公開する方法だけでなく、更新方法や削除方法なども解説します。

記事を読み終える頃には、自作のサービスを公開できる方法をマスターできているでしょう。

Herokuはどのようなサービスなのか

まず、アプリを全世界に公開し、使えるようにすることをデプロイすると言います。

そして、作ったWebサービスを世界中の人々に公開するためには、サーバーを用意する必要があります。

Herokuを使えば、無料かつ簡単にサーバーを用意して、自作のアプリをデプロイすることができます。

もし、Herokuを使わずにアプリを公開する場合、用意するものがたくさんあります。

Herokuを使わずデプロイする場合
  1. PCやルーターなどを用意
  2. ファイアウォールを設定
  3. OSをインストール
  4. データベースをセットアップ
  5. 言語のアプリケーション実行環境をセットアップ

これらすべてを用意するためには、時間も費用もかかってしまいます。

しかし、Herokuはこれらの設定を最初からセットしてくれているので、簡単にアプリをデプロイする事ができます。

Herokuを利用する方法

まずは大まかなステップを把握してから、Herokuの設定に移行しましょう。

Herokuに会員登録
Herokuにクレジットカード登録(無料です)
コマンドラインをつかって、設定を整える
作成したコードをGitに追加する
アプリをデプロイする

少し専門用語も多いですが、説明通りにおこなえば簡単です。

順番に解説していきます。

1.Herokuに会員登録をする

Herokuを利用する為にはアカウントの登録が必要です。

まずはHerokuのユーザー登録画面からアカウントを作成しましょう。

herokuのユーザー管理画面で登録設定をおこなう

必要情報を入力し、「私はロボットではありません」をチェック後、Create Free Accountをクリックしてください。

入力したメールアドレスに登録用URLが記載されたメールが届くので、リンクをクリックしてください。

Herokuから届くメール


パスワードの設定画面が表示されるので、8文字以上でパスワードを設定してください。

Heorkuのパスワード入力画面


パスワード設定後、以下の画面が表示されたらアカウント登録は完了です。

Herokuのアカウント登録完了

Click here to proceedをクリックしてマイページへ移動しましょう。

Herokuのマイページ

これでHerokuのアカウント登録は完了です。

2.Herokuにクレジットカード登録

Herokuを利用する上で、クレジットカードを設定する必要があります。

ただし、クレジットカードを登録しても、無料のプランを使用するため実際に課金される事はありません。

クレカを登録する理由として、Herokuの設定を自由に変更するためです。

具体例として、データベースの設定が挙げられます。

Herokuでは使用するデータベースの設定がデフォルトでPostgreSQLというデータベースになっています。

しかし、MySQLなどの他のデータベースを使用して自作サービスを制作した場合、Herokuの設定を変更する必要があります。

このような変更に対応するため、まずはアカウント管理ページのBillingからカード情報を登録しておきましょう。

まずは、Herokuのアカウント管理ページへ飛びましょう。

Herokuのアカウント管理ページ

アカウント管理ページのBillingをクリック

HerokuのBillingページ

ポップアップでクレジットカードの登録フォームが現れるので、カード情報を登録してください。

Herokuのクレジットカード登録画面

Save Detailsをクリックして保存しましょう。

Herokuのクレジットカード登録完了

上記のような画面になればクレジットカードの登録は完了です。

3.コマンドラインで設定を整える

以上で、Heroku側の設定はおしまいです。

続いて、コードを書いている環境のコマンドラインを使用して、設定をしていきます。

 heroku loginコマンド

デプロイしたいアプリのディレクトリに移動したあと、以下の通りにコマンドを入力します

#コードを書いたディレクトリに移動
$ cd ~/environment/〇〇

#herokuへログインするためのコマンド
$ heroku login

#メールアドレスを入力し、エンターキーを押す
  => Enter your Heroku credentials.
  => Email: 

#パスワードを入力して、エンターを押す
  => Password: 

無事ログインに成功するとLogged in as (Emailアドレス)と表示されます。

Heroku上にアプリケーションを作成する

まず初めに、git initコマンドでローカルレポジトリ(使用履歴、バックアップ)を作成します。(もともと作成してあればこのコマンドは不要です。)

次にheroku createコマンドを入力してHerokuに新しいアプリケーションを作成しましょう。

#ローカルレポジトリを作成 初回だけ
$ git init
Initialized empty Git repository in /home/ubuntu/workspace/pictweet/.git/

#herokuにアプリを作成
$ heroku create
Creating app... done, ⬢ sleepy-spire-41875
https://sleepy-spire-41875.herokuapp.com/ | https://git.heroku.com/sleepy-spire-41875.git

今回はアプリ名を指定していないので自動的に名前が付けられます。

この場合、sleepy-spire-41875がアプリ名で、https://fathomless-fortress-5255.herokuapp.com/が自分のアプリのURLになります。

つまり、|で区切られている前半部分が重要ということです

もし、アプリ名を指定したい場合は、heroku create アプリ名とすることでアプリ名の指定ができます。

また、「Name is already taken」のメッセージが出た時は、すでに使われている名前なので使うことはできません。

また、一度名前を指定せずにアプリを作成し、後から名前を変更したい時はheroku rename 新しい名前とすることで名前の変更ができます。

それでは、URLにアクセスしてアプリケーションが作成されている事を確認しましょう。

Herokuアプリ作成確認画面

この画面になっていれば、成功です。

データベースを変更する(データベースを使った場合)

アプリによっては、データベースを使う場合があると思います。その場合、少し設定を加える必要があります。

Herokuでは、使用するデータベースの設定がデフォルトでPostgreSQLというデータベースになっています。

今回は、MySQL用の設定にすることを想定して解説します。

 ClearDBアドオン

ClearDBアドオンとは、ClearDBというHerokuとは独立したデータベースサービスが提供している、MySQLを使うためのものです。

以下のように入力してください。

$ heroku addons:add cleardb

#以下のように反応します
Creating cleardb on ⬢ sleepy-spire-41875... free
Created cleardb-curved-38556 as CLEARDB_DATABASE_URL
Use heroku addons:docs cleardb to view documentation

 ここで警告が出ても特に問題ありません。そのまま先に進みましょう。

これでデータベースの設定をMySQLにする事ができましたが、一点だけ注意する必要があります。

Ruby on Railsを使う場合はMySQLのバージョンを対応するGemに合わせる必要があるので設定を変更します。

Rubyを使っている方のみ、アプリケーションのGemfileを確認しましょう。
Gemfileを編集する必要はありません。

gem 'mysql2', '0.3.18' 

この例だと、mysql2となっているので書き換える必要がありますね。

heroku config | grep CLEARDB_DATABASE_URLコマンドを入力すると、自分のデータベース情報が表示されます。

$ heroku config | grep CLEARDB_DATABASE_URL
CLEARDB_DATABASE_URL: mysql://be7b8bce06bcb3:201a55ce@us-cdbr-iron-east-03.cleardb.net/heroku_d3d7aa172ebabe8?reconnect=true

mysql://be7b8bce06bcb3:201a55ce@us-cdbr-iron-east-03.cleardb.net/heroku_d3d7aa172ebabe8?reconnect=true

これがあなたのデータベース情報です。

出力されたデータベース情報のmysqlの部分をmysql2に変更してheroku config:setコマンドで設定を上書きします。
上記の場合だと

mysql2://be7b8bce06bcb3:201a55ce@us-cdbr-iron-east-03.cleardb.net/heroku_d3d7aa172ebabe8?reconnect=true

以上のように変更したURLを使用して、以下のようなコマンドを入力していきます。

環境変数の変更

$ heroku config:set DATABASE_URL=mysql2://be7b8bce06bcb3:201a55ce@us-cdbr-iron-east-03.cleardb.net/heroku_d3d7aa172ebabe8?reconnect=true

#以下のように出力されます
Setting DATABASE_URL and restarting ⬢ sleepy-spire-41875... done, v5
DATABASE_URL: mysql2://be7b8bce06bcb3:201a55ce@us-cdbr-iron-east-03.cleardb.net/heroku_d3d7aa172ebabe8?reconnect=true

DATABASE_URL:以降が上書きした情報になっていれば 成功です。

4.作成したコードをGitに追加する

作成したコードはバージョン管理システムであるGitに追加する必要があります。

ここからはGitコマンドを利用していくので、主なGitコマンドの意味を理解しておきましょう。

 Gitコマンド

Gitコマンド 意味
git init リポジトリ(履歴)を作成する
git add ファイル名 管理するファイルを指定する
git commit ファイルをコミットする

 git add

git addコマンドはgit add ファイル名とすることで、コミットしたいファイルを指定することができるのですが、一番最初のコミットなどで全てのファイルを指定したい場合はgit add .と入力すると全て指定してくれます。

また、git add .add.の間にスペースがあるので注意してください。

 ターミナルで以下のコマンドを入力してください

$ git add .

$ git commit -m "first deploy"

今回は全てのファイルを指定したいのでgit add .と入力しましょう。

次に、git commit -m "first deploy"と入力して指定したファイルをコミットしましょう。

-mはコミットメッセージを指定するオプションです。

コミットメッセージは今回コミットした内容がわかるようなものにしておきましょう。

今回はherokuにファイルを初めてデプロイするので「first deploy」としました。

つまり、名前(first deploy)の部分は何でもいいということです。

これで変更したファイルのコミットが完了しました。

5.アプリをデプロイする

いよいよアプリのデプロイです。

git push heroku masterコマンドでアプリをプッシュしましょう。

$ git push heroku master

これでherokuにあなたが作成したアプリを作れました。

このままではまだデータベースが作成されていないので、heroku run rake db:migrateコマンドでマイグレーションファイルを実行します。

データベースを使った場合のみ行えば大丈夫です。

$ heroku run rake db:migrate

これでherokuの自分のアプリケーションのURLを開くと自作アプリがが表示されているはずです。

自分のアプリケーションのURLは、heroku apps:infoコマンドで確認することができます。

$ heroku apps:info

#様々な情報を確認できます。
Addons:         heroku-postgresql:hobby-dev
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/immense-brushlands-90773.git
Owner:          k.abe.in401@gmail.com
Region:         us
Repo Size:      54 KB
Slug Size:      41 MB
Stack:          heroku-16
Web URL:        https://immense-brushlands-90773.herokuapp.com/

12行目に書かれているのが、アップロード先のURLです。

リンク先に飛んで、アプリが表示されていればしっかりデプロイできています。

実際に動くかどうか確認してみましょう。

Herokuのアプリの更新方法

アプリケーションをデプロイした後も、機能を追加したり、配置を変更する場合があると思います。

アプリを更新するときにはこの順序で行いましょう。

#herokuにログインをする
$ heroku login

#gitコマンドを入力する
$ git add -u

#gitコマンドでコミットする。 コメントの名前は何でも良い
$ git commit -m "コメント"

#push をする
$ git push heroku master

既存のアプリに変更を加えることで、より良いサービスになります。

どんどんHerokuに変更を加えてアップデートをしましょう。

Herokuでのアプリを削除する

Herokuを利用してアップロードを行ったアプリを削除したい場合はどうしたら良いでしょうか?

二つのやり方をご紹介していきます。

ターミナルから削除する

ターミナルで下記のコマンドを実行しましょう。

$ heroku apps:destroy --app アプリ名
 ▸    WARNING: This will delete ⬢ アプリ名 including all add-ons.
 ▸    To proceed, type アプリ名 or re-run this command with --confirm アプリ名

#上の確認メッセージが出るのでアプリ名を入力する
> アプリ名
Destroying ⬢ アプリ名 (including all add-ons)... done

#このメッセージが出れば削除完了

アプリ名は今回の場合だと「fathomless-fortress-5255」に当たる部分です。
(例)heroku apps:destroy –app fathomless-fortress-5255

アプリ名がわからない時はheroku apps:infoコマンドで確認ができます。

$ heroku apps:info
=== アプリ名

Herokuのダッシュボードから削除する

Herokuのダッシュボードからでも削除が可能です。

まずは削除したいアプリをクリックします。

この場合では、sleepy-spire-〇〇がアプリの名前です。

2. 次にSettingsを選択します。

3. 一番下にあるDelete appをクリックします。

4. 確認画面になるのでアプリ名を入力し、Delete appをクリックし削除

今回のケースでは、sleepy-spie-〇〇がアプリに当たります

間違えてアップロードしてしまった際などはこのような方法でアプリを削除しましょう。

まとめ:Herokuを使って無料でアプリを公開

Herokuを使うことで、無料で手軽に自作のサービスをデプロイすることができました。

クレジットカードの登録などもありますが、無料サービスなので安心指定利用できます。

公開したサービスの更新や削除なども手軽におこなえるので、いっぱい作っていっぱい公開してみましょう。