1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-10-23

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

①アカウントの登録

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

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

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

③Heroku CLIの登録

Get Started⇨PHPの順に進んで「チュートリアルを始める」をクリック
スクリーンショット 2021-10-24 5.53.47.png

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

heroku.bash
$ brew install heroku/brew/heroku

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

herokulogin.bash
$ heroku login

ログインに成功すると以下のページが表示
スクリーンショット 2021-10-24 5.59.59.png

④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

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

私の場合はデータベースへ接続をしたいのでアドオンでmysqlを追加した
https://elements.heroku.com/addons
右上の検索で「MySQL」と検索して「ClearDB MySQL」を選択(無料)。
スクリーンショット 2021-10-24 7.46.57.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

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

まずはインストール。先ほどと同じように「--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/

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?