無料でWebアプリケーションを公開できるHerokuをやってみた

# 概要
時代の流れにだいぶ乗り遅れている気がしてきたので、少しでも取り戻そうと無料でWebアプリケーションの公開ができるHerokuを試してみるべく、公式サイトのGetting Started on Heroku with Javaをやってみた時のまとめ&備忘録

[公式サイト（英語）]
　[Getting Started on Heroku with Java](https://devcenter.heroku.com/articles/getting-started-with-java#introduction "Getting Started on Heroku with Java")

**2022年9月2日追記**
時代は変わり、2022年11月28日Heroku無料プランが廃止されるのでご注意ください

https://blog.heroku.com/next-chapter

## Getting Started 完了時にできること

* 無料でWebアプリケーションが公開できる（制限あり※）
* 無料でDB（ポスグレ）が使える

※無料枠は、550時間/月
　30分間無操作（アクセスがないなど）だと自動的にスリープ状態
　（アクセスがあれば初回時間がかかるが自動起動する）
　詳細は以下を参照
　[Free Dyno Hours](https://devcenter.heroku.com/articles/free-dyno-hours "Free Dyno Hours")

## Getting Started 完了までのおよその作業時間
2時間（まとめながらやったのでやるだけならもっとずっと少ない印象）

## 参考書籍
英語ドキュメントが辛い場合、Herokuに関する唯一？の日本語書籍の以下が参考になりそう
Getting Startedと同程度の内容や、DB、ファイル、起動時のレスポンス時間の記載があり初心者に役に立つ情報が満載
[プロフェッショナルのための実践Heroku入門 プラットフォーム・クラウドを活用したアプリケーション開発と運用](https://amzn.to/2m2MvB8 "プロフェッショナルのための実践Heroku入門 プラットフォーム・クラウドを活用したアプリケーション開発と運用")
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4048915134/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4048915134&linkCode=as2&tag=heroku_start_001-22&linkId=7698a7897bcaa48daf1dcbc3ad371d05"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4048915134&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL110_&tag=heroku_start_001-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=heroku_start_001-22&l=am2&o=9&a=4048915134" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />


## 自分のスキル

* Java,Mavenほどほど
* Heroku,git初心者

## 事前準備


* 無料の Heroku account（メールアドレスのみ必要。クレカ登録不要で割と敷居が低い）
* Java 8
* Maven 3

下記、手順の中にインストール手順あり

## やったことと要点
上記、公式サイトの手順に従い、以下の15STEPを完了
手順に従えば難なくできる
自分は2回失敗（後述）がむしろ恥ずかしい内容、、、

### 1. Introduction
<dl>
<dd>事前準備の内容</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/2c163f96-e7fc-641c-7a5f-d90d06dbd9bc.png)

### 2. Set up

<dl>
<dd>Herokuコマンドラインのインストール（一緒にgitがインストールされる）</dd>
<dd>インストール後、Herokuコマンドでログイン</dd>
</dl>

```bat
$ heroku login
Enter your Heroku credentials.
Email: java@example.com
Password:
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/695d1ace-bfa2-ea6b-3175-69a1bdac5113.png)

### 3. Prepare the app

<dl>
<dd>用意されているサンプルプログラムをgit cloneしてローカルに準備する</dd>
</dl>

```
$ git clone https://github.com/heroku/java-getting-started.git
$ cd java-getting-started
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/1b3ccbf6-d222-4820-6552-b4f20a024969.png)

### 4. Deploy the app

<dl>
<dd>サンプルプログラムをHerokuにデプロイ&起動</dd>
</dl>

```
$ heroku create
$ git push heroku master
$ heroku ps:scale web=1
$ heroku open
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/cd527bb0-3106-9f97-5bf0-d69363136b4d.png)

### 5. View logs

<dl>
<dd>ログ確認方法の説明</dd>
</dl>

```
$ heroku logs --tail
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/8ae72c19-1bc1-ec48-ad08-84ec58a48ea6.png)


### 6. Define a Procfile

<dl>
<dd>Procfileの説明</dd>
<dd>HerokuではこのProcfileでアプリケーションの種類を規定しているらしい</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/61e94532-bb9d-2821-6d22-435c5ff5eb2d.png)

### 7. Scale the app

<dl>
<dd>アプリケーションが動くDynoの概念の説明と上記無料枠の説明</dd>
<dd>Dynoはlightweight, secure, virtualized Unix containerらしい</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/c28250ce-69e8-7b3b-2416-0e20fb4c71a2.png)


### 8. Declare app dependencies

<dl>
<dd>pom.xml,system.propertiesの説明とローカル環境での動作準備</dd>
<dd>system.properties で動作Versionを指定する</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/7d82246a-5eab-409b-890a-3fe1a1721d3e.png)
<dl>
<dd>＜失敗１＞</dd>
<dd>Java、Mavenのインストールで環境変数JAVA_HOME、MAVEN_HOME追加、PATHへの設定を省略したため</dd>
<dd>No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?　発生</dd>
<dd>環境変数MAVEN_HOME、JAVA_HOME追加、PATHへの両変数の追加で解消</dd>
</dl>

### 9. Run the app locally

<dl>
<dd>ローカル環境での起動と画面確認</dd>
<dd>ローカル環境のアクセスURL：http://localhost:5000</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/3b2fe452-ffc4-d4ea-f724-6f48b134fb9b.png)

### 10. Push local changes

<dl>
<dd>サンプルプログラム修正手順の説明と修正内容のHerokuへのデプロイ</dd>
</dl>

```
$ mvn clean install
$ heroku local web
```

```
$ git add .
$ git commit -m "Demo"
$ git push heroku master
$ heroku open hello
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/1b36a9d0-74f1-cf16-177e-c8968899661c.png)

<dl>
<dd>＜失敗２＞</dd>
<dd>git commit -m "Demo" で *** Please tell me who you are.と言われる</dd>
<dd>heroku login した状態だったので勝手に連携されるだろうと思い込みいろいろやり直す、、、</dd>
<dd>結果、heroku loginは全く関係ない話しだったので、大人しくPlease tell me who you are.の後に表示された以下のコマンドを実行</dd>
<dd>git config --global user.email {メールアドレス}</dd>
<dd>git config --global user.name {名前}</dd>
</dl>

### 11. Provision add-ons

<dl>
<dd>add-onsが便利そうだがクレカ認証が必要とわかりスキップ</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/0b26b17b-33b8-6a7a-b0cf-a622862e2397.png)

### 12. Start a one-off dyno

<dl>
<dd>Dyno上でコマンド実行ができるとのこと</dd>
</dl>

```
$ heroku run bash
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/a9aabd3e-bbc6-a0cd-e00d-9da8a1bdb990.png)

### 13. Define config vars

<dl>
<dd>ローカル環境とHeroku環境の環境差異を考慮してconfig設定が利用できるという説明</dd>
<dd>ローカル環境では、 .env ファイル、Heroku環境は、コマンドで設定する</dd>
</dl>

```
$ heroku config:set ENERGY="20 GeV"
$ heroku config
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/58c76726-0b46-b76e-3122-bd5c51093f85.png)

### 14. Use a database

<dl>
<dd>DB（ポスグレ）の説明</dd>
<dd>Heroku上では、サンプルに既にDBアクセス部分があるため、すんなり動作確認完了</dd>
<dd>Heroku環境のDB接続設定はconfigにある</dd>
<dd>ローカル環境では別手順がいるらしい（未実施）</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/9a2d4528-6e04-3099-2dc8-895e4cd18a1a.png)

### 15. Next steps

<dl>
<dd>次はこの辺を勉強したらどうですか。という説明</dd>
</dl>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188544/105b309f-8c1a-8003-3027-f228b63a025b.png)

## まとめ
2時間程度で今後はプログラム修正したら以下の手順だけで簡単に公開できるのは便利
DBが使えるのも嬉しい

<dl>
<dt>1. プログラム修正</dt>
<dt>2. mvn clean install</dt>
<dt>3. heroku local web</dt>
<dt>4. ローカルでの動作確認</dt>
<dt>5. git add .</dt>
<dt>6. git commit -m "Comment"</dt>
<dt>7. git push heroku master</dt>
<dt>8. heroku open</dt>
</dl>