公式がわかりにく過ぎてヤバいのでできるだけ画像付きで初学社向けに解説します。
というかあの説明でわかるやつおらんと思うから安心して。
ジャンプできる目次
herokuのアカウントを作ってログイン
この辺はググって。
もしくは下記のサイトがわかりやすいかも?(rails向けと言っているがアカウント作成手順は変わらないので)
Herokuアカウントの新規作成方法 | プログラミング入門ナビ by Proglus(プログラス)
herokuのサイトでアプリを作成
https://dashboard.heroku.com/apps
より、右上のNew>Create new appをクリック
App nameにアプリ名を半角英数で入力して、Create appボタンを押す。
ほかの人が作ったアプリと重複してはいけない。
かぶったら怒られるので、なんかかぶらなさそうな名前にして。
最終的にアプリのURLに使われる文字列になる。
Heroku Gitを使ったデプロイ方法が表示される。
が、ちょっとまってほしい。
- ローカル環境でherokuコマンドが使えるようにをインストール
- なんかapi key的な奴を発行
- AppServiceProvide.phpを編集
- Procfileの作成
- composer.jsonの編集
などなどやることが盛りだくさん(どこにかいてあるんやろ・・・)
今回は1番左のHeroku Gitのやり方で行う。
真ん中のGithubと連携させるやり方のほうが一見簡単そうに見えるが、今(2022/4現在)は使えなくなっているらしい。
じゃあ書いとけよ!ってかんじ。
実際にやってみたけど無理でした。
開発用PC上でのコマンドラインによるherokuの準備
これはさっきの画面にインストール手順のリンクが貼ってあった。
https://devcenter.heroku.com/articles/heroku-cli
今から解説するので読まなくてもいい。
herokuのインストール
詳しくはリンク先を見てほしいが、macOSにインストールするなら
brew tap heroku/brew && brew install heroku
npm install -g heroku
を叩く。叩く場所はどこでもいいとおもう。
Dockerを使っていてもコンテナの中じゃなくて、mac上でたたいてな!
そのあと
heroku loginheroku --version
をたたいてて、インストールされていることが確認できればOK↓
heroku --version
heroku/7.60.2 darwin-x64 node-v14.19.0
コマンドライン上でherokuと連携
コマンドライン上からログイン
herokuにプッシュしたいディレクトリまで移動する。
いわゆる、アプリの「プロジェクトディレクトリ」までcdコマンドで行けばいい。
で
heroku login
と叩く。(これもdocker使っていようとコンテナの外)
何かキーを叩け!と英語で表示されるので、「A」とか何でもいいのでキーボードのボタンを押す。
コマンドライン上に、URLが出現するのでクリックなりダブルクリックなりして開く。
すると、ブラウザが立ち上がりherokuにログインするように催される。
ブラウザ上でのログインが完了すると、コマンドラインも次に進む。
自分の環境ではこんな感じの結果になった。
プロジェクトディレクトリ % heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/7e9aa191-7b46-49bd-b260-29267c2d2960?requestor=hogehogehogehoge
Logging in... done
Logged in as hogehoge@gmail.com
herokuと連携
同じくアプリの「プロジェクトディレクトリ」にいる状態で
git init
heroku git:clone -a herokuに設定したアプリ名(本例ではhogehoge11451419)
を叩く。
ブラウザでherokuにadd new appした時の画面に書いてあるコマンドのこと。
このまま続きのコマンドを叩いてコミットとプッシュしてしまいたいところだが、トラップがあるのでちょっと待ってほしい。
キーの設定
キーの発行
キーの登録を行う(しないとNo application encryption key has been specified.のエラーが出る)
アプリケーション上(docker環境ならコンテナの中)で、
php artisan key:generate --show
と叩く。
base64:hogehoge191919191919uwaaaaa
みたいな値が返ってくるので、丸ごとコピーする。
わかりにくいけど先頭の「base64:」も含めてコピーして。
キーの登録
https://dashboard.heroku.com/apps/
にアクセスして、今回作成したアプリを選択する。
Settingタブ>Config Vars>Recal config Varsボタンを選択
キーが入力できるようになるので、
左側に
APP_KEY
右側にさっきコマンドラインで取得したキー↓(自分のキーに合わせてね)
base64:hogehoge191919191919uwaaaaa
を入力してAddボタンを押す。
アプリのソースコードを編集
まだまだやることがあります。
AppServiceProvide.phpに追記
プロジェクトディレクトリ\app\Providers\AppServiceProvider.php
use Illuminate\Support\Facades\Schema; //追記
public function boot()
{
Schema::defaultStringLength(191); //追記
}
やらないとデータベースを使うときになんかカラムの文字数オーバーとか言われる。
Procfileの作成
プロジェクトディレクトリ直下にProcfileを言うファイルを追加する
自分の環境だとここに配置した。
(backendっていうのが私のプロジェクトディレクトリ名)
Procfileの内容は下記をコピーして貼り付けて。
web: vendor/bin/heroku-php-apache2 public/
composer.jsonの編集
プロジェクトディレクトリ\composer.json
script:{ }内に
,
"compile": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
]

herokuにpushする
コマンドラインの話に戻る。
プロジェクトディレクトリ(docker環境ならコンテナの外)で下記のコマンドを実行。
git commit -am "make it better"
git push heroku master
これでデプロイができたことになる。
今って、masterじゃなくてmainでは?と一瞬思ったが、
それはgithubだけの話っぽい。
heroku上でアプリを確認するには?
同じ場所で次のコマンドを実行。
heroku open
すると、ブラウザが勝手に立ち上がってheroku上のアプリが表示される。
うまくいかない場合
すんなりいかないパターン
No application encryption key has been specified.
php artisan key:generate --show
Unsupported cipher or incorrect key length. Supported ciphers are: aes-128-cbc, aes-256-cbc, aes-128-gcm, aes-256-gcm.


heroku openコマンドを叩いてもブラウザが起動しない
コマンドを叩いてもサイトに飛べない場合。
これは当てはまる人少ないかもしれないが、
開発環境端末と、操作端末が違うと起こりえる。
例えば、
- WindowsのPCからteratermでMacを操作している
- 別のPCから自宅(または社内)のLinuxサーバーを操作している
などの場合に起きる。
前者の場合、macの画面を見たらブラウザでherokuのアプリケーションが開かれているはず。
後者の場合は試したことがないが、
https;//初めに決めたアプリ名.herokuapp.com
に手元のPCからアクセスしてみて。
例えば本例で行くと
https://hogehoge11451419.herokuapp.com/
となる。
最後に
以上で単純にデプロイする作業は終わり。
mysqlを使いたかったら、クレジットカードを人質に預けて無料プランでを契約する必要がある。
この辺もコツがいるので、需要があればまた書くかも。