【Heroku】アカウントの登録〜デプロイまで

作成したウェブアプリを公開するため、Herokuにアップすることになったので手順を以下に記載します。

<h2>①アカウントの登録


https://signup.heroku.com/jp
から新規登録。画面に従って登録を進める。

<h2>②mysqlのアドオンを利用できるようにしたいのでクレジットカードも登録

Manage Account⇨ Billingへと進んでクレジットの登録

<h2>③Heroku CLIの登録

Get Started⇨PHPの順に進んで「チュートリアルを始める」をクリック
![スクリーンショット 2021-10-24 5.53.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661879/4ec64476-6cf1-c55e-34a8-9c6305c7b826.png)

Heroku　CLIをインストーラーからダウンロードするか、以下コマンドラインから登録


```heroku.bash
$ brew install heroku/brew/heroku
```

するとHerokuのダウンロードが始まる。インストールが完了したら、コマンドシェルで heroku​ コマンドを使用

```herokulogin.bash
$ heroku login
```
ログインに成功すると以下のページが表示
![スクリーンショット 2021-10-24 5.59.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661879/87287be2-bffc-1bc4-1e86-0edfd3365334.png)

<h2>④dockerデプロイで実際のアプリを動かしてみる

ローカルの開発環境で使用したコンテナをそのままHerokuで動かした方が都合がいいので以下の公式ドキュメントを参考
https://devcenter.heroku.com/ja/articles/container-registry-and-runtime

Container Registr にログイン

```heroku.bash
$ heroku container:login
```

公開したいアプリのディレクトリに移動して、Heroku アプリを作成。（ディレクトリ直下にdockerfileがあることを確認）
その前にHerokuのApacheに対応できるように以下のシェルを起動させるため、実行権限を付加

```heroku.bash
$ chmod +x docker/app/run-apache2.sh
```

```heroku.bash
$ heroku create
```

すると以下のような実行結果が返ってくる

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku create
Creating app... done, ⬢ desolate-tor-38469
https://desolate-tor-38469.herokuapp.com/ | https://git.heroku.com/desolate-tor-38469.git
```

この「desolate-tor-38469」がアプリ名みたいなものでhttpsから始まるURLが公開されるURLになる

次に、イメージをビルドし、Container Registry にプッシュ。このとき、すでに他のアプリをHeroku上で公開していると上記のアプリ名を指定しないとエラーになる可能性があるので「--app アプリ名」を追加する。

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku container:push web
 ›   Error: Missing required flag:
 ›     -a, --app APP  app to run command against
 ›   See more help with --help
#すでに他のアプリがHerokuに登録されているのでエラー、以下のようにアプリ名を指定する
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku container:push web --app desolate-tor-38469
```

アプリを確認したい場合は以下コマンド実行

```heroku.bash
heroku apps
#以下実行結果
calm-bayou-47783
desolate-tor-38469
```

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku container:push web --app desolate-tor-38469
```

最後にイメージを「heroku container:release web」コマンドでアプリにリリース、「heroku open 」でブラウザで開くとページが開く。

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku container:release web --app desolate-tor-38469
 ▸    The process type web was not updated, because it is already running the specified docker image.
Releasing images web to desolate-tor-38469... done
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku open --app desolate-tor-38469
```

<h2>⑤環境変数の設定〜データベースへの連携

私の場合はデータベースへ接続をしたいのでアドオンでmysqlを追加した
https://elements.heroku.com/addons
右上の検索で「MySQL」と検索して「ClearDB MySQL」を選択（無料）。
![スクリーンショット 2021-10-24 7.46.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661879/e18edb01-f8f1-2223-b273-d1daa9f7cf6f.png)

下の方の「Provisioning the shared MySQL add-on」をクリック
https://devcenter.heroku.com/articles/cleardb#provisioning-the-shared-mysql-add-on
![スクリーンショット 2021-10-24 7.47.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661879/fc68fb84-ab4a-dff1-88bb-e338f5fa6f9f.png)

すると公式ドキュメントが開くのでそちらを参考に環境変数を設定

まずはインストール。先ほどと同じように「--app アプリ名」を追加

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku addons:create cleardb:ignite --app desolate-tor-38469
Creating cleardb:ignite on ⬢ desolate-tor-38469... free
Created cleardb-opaque-83890 as CLEARDB_DATABASE_URL
Use heroku addons:docs cleardb to view documentation
```

次に、データベース情報を取得するために以下コマンド実行

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku config --app desolate-tor-38469 | grep CLEARDB_DATABASE_URL
CLEARDB_DATABASE_URL: mysql://bc2b000ce0e926:33d550be@us-cdbr-east-04.cleardb.com/heroku_268c2c9a1722fd9?reconnect=true
# mysql:〜？までがデータベース情報
```

上記結果をもとにデータベース接続情報を環境変数に反映させる

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku config:add --app desolate-tor-38469 DB_USERNAME=bc2b000ce0e926

kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku config:add --app desolate-tor-38469 DB_PASSWORD=33d550be

kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku config:add --app desolate-tor-38469 DB_HOST='us-cdbr-east-04.cleardb.com'

kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku config:add --app desolate-tor-38469 DB_DATABASE=heroku_268c2c9a1722fd9

kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku config --app desolate-tor-38469
#上記設定を確認、以下が確認結果
=== desolate-tor-38469 Config Vars
CLEARDB_DATABASE_URL: mysql://bc2b000ce0e926:33d550be@us-cdbr-east-04.cleardb.com/heroku_268c2c9a1722fd9?reconnect=true
DB_DATABASE:          heroku_268c2c9a1722fd9
DB_HOST:              us-cdbr-east-04.cleardb.com
DB_PASSWORD:          33d550be
DB_USERNAME:          bc2b000ce0e926
```

次に、テーブルを作成したいので以下コマンドを実行

```heroku.bash
kazukimac@kazukinoemueshinoMacBook-Pro part2 % heroku run --app desolate-tor-38469 "php databases/umf_reviews.php"
#umf_reviews.phpにcreate table文があるため、実行してテーブルを生成
#​heroku run アプリ名　"php 実行したいファイル名"で対話型シェルを起動する

```


再度「heroku container:push web」、「heroku container:release」でアップロードして「heroku open アプリ名」でサイトが開ける。
ローカルのプログラムを編集して反映したい場合も同様

参考
Herokuコマンド
https://devcenter.heroku.com/ja/articles/heroku-cli-commands　（公式）
https://knt60345blog.com/heroku-command/