Herokuでアプリケーションを公開してみよう

# はじめに

本記事では、タイトルにある通り、Herokuでアプリケーションを公開できるようになることを目的とした記事です。Herokuとは何者なのかを知るところから、実際に上げてみるところまでを順を追いながら説明していきます。

# Herokuとはなんぞ

## Herokuでできること

Herokuとは、データベースやサーバなどが１つで補えるクラウドサービスです。
例えば、Rubyを使ってアプリケーションを開発を行なって、公開したいとします。
そのアプリケーションでは、データベースに登録されている情報を取得し、画面に一覧として表示したいとします。その場合、取得して表示するプログラムが置いてあるのが、APサーバー(アプリケーションサーバー)と呼ばれるもの、データが置いてあるのが、DBサーバー(データベースサーバー)と呼ばれるものであり、herokuでは別個に準備する必要なく1つのサービスで賄うことが可能です。

![スクリーンショット 2022-07-08 0.08.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2319623/3258eb46-b46c-6f99-50f2-2aa50550a069.png)


## 有料なんでしょ？？

個人利用・非商用であれば無料で使用が可能です。
なので、ちょっと個人でアプリケーションを作成して公開したい場合などには、非常に使いやすいかと思います。

※ postgreSQLの使用は無料ですが、MySQLの使用には、クレジットカードの登録が必要です。

## 使いたい言語が対応しているかどうか...

Herokuでは、さまざまな言語をサポートしています。
[▶︎対応言語について](https://jp.heroku.com/languages#:~:text=Heroku%20%E3%81%A7%E3%81%AF%E3%80%81Ruby%E3%80%81Java%E3%80%81,%E3%82%92%E9%87%8D%E8%A6%96%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

何がともあれまずは実際に登録して使ってみましょう！！

# Herokuにアカウント登録を行ってみよう

①まず、以下Herokuのサイトにアクセスします
https://jp.heroku.com/
右上に「新規登録」ボタンがありますので、クリックして登録ページへ移動してください。

②登録を行う
①でページを移動すると、以下のような画面に移動しますので、各項目を埋めていきます。

![スクリーンショット 2022-06-07 16.54.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2319623/f29f936b-1319-6ede-e62d-08f77048cd9f.png)

▶︎項目について
会社名以外は必須項目なので、それぞれ順番に入れていきます。
役職は自分の使用用途にあったものを選べば良いかと思います。
(自分は今回趣味での開発用にアカウントを作成するため、「趣味でのご利用」を選択しました。)
また、主な開発言語についてはこれからHerokuにアップロードしたいものを何で作るかにいよって選べば良いかと思います。
(自分は今回はRubyで開発を行うため、Rubyを選択しました)

# アプリケーションを登録してみよう
今回は、既存アプリケーションをHerokuで公開する方法を試していこうと思います。

Herokuでログインすると、ホーム画面に「Create New App」というボタンがあると思いますので、そちらをクリックします。

すると以下のような画面に遷移しますので、任意のアプリケーション名を入力し、「Create App」をクリックしてください。
※regionは変更不要
![スクリーンショット 2022-07-06 20.53.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2319623/5ee19b6e-8511-4253-27cd-aceafa14f4db.png)

すると以下のような画面に移行します。これで、アプリケーションの作成は完了です！
![スクリーンショット 2022-07-06 20.57.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2319623/0e611b99-9841-1fd0-a562-818cecb89c5b.png)

次に、コマンド操作でHerokuを操作できるようにしていきます。
コマンド操作を行う理由としては、今回はgGitHubと連携させるのではなく、HerokuGitを使用して操作するためです。

<details><summary>GitHub連携を使用する場合はこちらをご覧ください</summary><div>
「Deployment method」からGitHubを選びます。すると、以下のように「Connect To GitHub」の表示が出てくるため、「Connect To GitHub」のボタンを押して連携を行います。

![スクリーンショット 2022-07-06 21.02.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2319623/53d741d2-0900-4e8b-6563-7292bf0dd580.png)



</div></details>

まず、ターミナルを開き、[こちらのページ](https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli)を参考に、heroku-cliをインストールする。

まず、以下ターミナルでインストーラーをインストールします。
(xcodeのコマンドラインツールが入っていないと、エラーが出るので、あらかじめ入れておくといいかもです)

```terminal
brew tap heroku/brew && brew install heroku
```

そして、入ったかどうかを以下ターミナルで確認してみましょう
```sh
heroku -v
```

以下のようにバージョンが表示されたら成功です
```sh
heroku/7.60.2 darwin-x64 node-v14.19.0
```

次に、Herokuにログインしてみます
以下コマンドを実行してみてください
```sh
heroku login
```
すると以下のように表示されるので`login`と打って実行します
```sh
heroku: Press any key to open up the browser to login or q to exit:
```

すると、以下のような画面が開きますので、そのまま「Login」をクリックしてターミナルに戻ります
![スクリーンショット 2022-07-06 23.37.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2319623/ebcbbafa-fa2f-c68c-aecb-b5f59f24bac0.png)

ターミナルで以下のような表示があればログイン完了です
```sh
Logging in... done
Logged in as 登録したメールアドレス
```

次に、いよいよgitと紐付けを行います
以下コマンドを実行すると、git連携が完了ます
```sh
heroku git:remote -a 先ほどHerokuで登録したアプリケーション名
```

上記コマンドを打って、以下の表示がされたら成功です
```sh
set git remote heroku to https://git.heroku.com/先ほどHerokuで登録したアプリケーション名.git
```
あとは、修正したあと、通常のgit操作時のように以下コマンドが使用可能です
※push時にherokuのmasterにpushし、成功すれば公開可能です
```sh
git add .
git commit -am "make it better"
git push heroku master
```

すると、ここで以下エラーが起きました
```sh
error: failed to push some refs to 'heroku'
```
なんと...
(凡ミスですね、自分はGitHubでソース管理をしていたので、メインブランチはmasterではなくmainでした)
以下で試しましたらいけました
```sh
git push heroku main
```

さらにエラーが...
```sh
error: failed to push some refs to 'https://git.heroku.com/ruby-play.git'
```

GitHubのリポジトリがHerokuに紐づいてないのが原因ぽいので、以下コマンド実行
```sh
git fetch
git push heroku main
```

`fetch`してからpushすればちゃんと通るようになりました

pushできたら、本番環境マイグレーションして完成だあああ！
(※heroku run ~~ でコマンドが打てます)
```sh
heroku run rails db:migrate
```
今回は、簡単なrailsのapiを作成し、herokuにあげてみました
以下のURLから、確認でき、画面上でユーザー情報登録ができるようになっています
https://ruby-a-play.herokuapp.com/users/

これで、ページの公開ができました
ぜひ皆さんもHerokuで自分の作ったページを公開してみてください★