HerokuにLaravel環境をデプロイしてみる

経緯

手軽にWebアプリの公開が出来るHerokuを使ってLaravelをデプロイしました。簡単かと思いきや意外とハマったので備忘録がてらうまく行った手順を残しておきます。

前提

以下のものはインストール済みの前提です。

• PHP
• composer
• HerokuCLI
• Git

使用した言語やツールのバージョンは下記の通りです。

また、↓の事柄についてはこの記事では解説していません。

• Herokuの登録方法
• Heroku CLIの使用法
• Laravelの使用法

Herokuとは何なのか

私もしっかり理解しているわけではないので難しい話は抜きにして雰囲気だけ説明します。

Herokuは、Heroku上で作成したアプリに紐づけたGitリポジトリに自作のソースコードをプッシュすることで自作Webアプリのデプロイが出来てしまうWebツールです。

通常、自作のWebアプリをインターネット上に公開するには空のサーバに環境を構築したり、AWSで色んなものを準備したりと、いちアプリ開発者にはなかなかハードルの高い作業が必要になりますが、Herokuであればそこまでインフラ関連の知識がなくてもWebアプリが公開できます。

しかも無料枠があるため、シンプルでDBへのレコード追加が少ない様なWebアプリであれば料金もかかりません。

とはいえ、Heroku仕組み自体がなかなか個性的なので超簡単！というわけではありません(少なくとも私にとっては…)

また、デプロイ作業は特定のGitリポジトリへのプッシュをするという形になるため、Gitを全く知らない人にとっては結構ハードルは高いと思われます。

Heroku上でアプリのガワを作成する

ここではまず、これから作成するWebアプリを配置するスペースをHeroku上に作成します。

なお、ここではWebブラウザでHeroku上で作成する手順を紹介していますが、PowerShellやターミナルでコマンドから作成することも出来ます。

手順

WebブラウザでHerokuにログインして

「new」→「Create new app」

と選択します。

Herokuアプリ作成画面に移動するので、App nameの欄に任意の名前をつけましょう。

ちなみにここでつけるApp nameは全世界のHerokuユーザーが一度も使用したことがない名前をつけなければなりません。

だれも使ったことがない名前を入力すれば↓の様に「〇〇 is available」と表示されますが

誰かが使用したことのある名前だと↓の様に「〇〇 is not available」と表示され使用できません。

とりあえず今回はsunogura-laravel-apiという名前で進めていくことにしますが、この記事をお読みの方は任意で名前をつけて読み替えつつ読み進めて下さい。

App nameの下の「Choose a region」はHerokuのサーバが置かれている地域を選ぶ欄ですが、Herokuのリージョンはアメリカとヨーロッパにしかありません。

どちらも日本からだいぶ距離があるのでどちらでもあんまり変わらない気はしますが、今回はアメリカを選ぶことにします。

ここまで入力したら画面下部のCreate Appボタンをクリックしましょう。

作成したHerokuアプリの詳細画面が表示されればHerokuアプリの作成は完了です。

このページの下部には、ローカルPC上でコーディングしたソースコードをHeroku上にデプロイする手順が書かれています。

ローカルPC上でLaravelの環境を作成する

ローカルPC上に作業用ディレクトリを作成する

ここからはローカルPC内で作業します。PowerShellを開きましょう。(多分コマンドプロンプトでも変わらないはず)

ローカルPC上の作業スペースに移動して、アプリのソースを置くディレクトリを作成します。

本記事ではPCのユーザールートに「heroku」というディレクトリを作ってその中にアプリ用のディレクトリを作成することにします。

C:\Users\sunogura> cd ~                   # ユーザールートに移動
C:\Users\sunogura> mkdir heroku           # heroku作業用ディレクトリを作成
C:\Users\sunogura\heroku> cd heroku        # 作成したディレクトリに移動

composerでLaravelプロジェクトを作成

次に、composerでLaravelプロジェクトを作成します。

以下のコマンドの [プロジェクト名] の所は任意の名前に置き換えて下さい。Herokuアプリにつけた名前と同じにしておけばわかりやすいと思います。

C:\Users\sunogura\heroku> composer create-project laravel/laravel [プロジェクト名] --prefer-dist

↑のコマンドを実行するとずらずらとインストール状況が表示されていくのでしばらく待ちましょう。私の環境では1分程度でした。

最終行にApplication key set successfully.と表示されていたらLaravelプロジェクトの作成は成功です。

↑のコマンドで指定したプロジェクト名のディレクトリが作られているはずなので移動しましょう。

C:\Users\sunogura\heroku> cd [↑のコマンドで指定したプロジェクト名]

ローカルに作成したプロジェクトとHerokuアプリ(Gitリポジトリ)を紐づける

ここらかは先程作成したLaravelプロジェクトを、冒頭で作成したHerokuアプリに紐づける作業です。

この手順を踏むことで、ローカルに作成したLaravelプロジェクトのディレクトリがHerokuアプリに紐付き、Herokuアプリに対応したGitリポジトリへのプッシュが出来るようになります。

まずはgit initしましょう。

C:\Users\sunogura\heroku\プロジェクト名> git init

次に、ローカルで作成したLaravelプロジェクトを、Herokuアプリに紐づけます。

C:\Users\sunogura\heroku\プロジェクト名> heroku git:remote -a [Herokuアプリ名]

↑のコマンドの[Herokuアプリ名]は、冒頭でHerokuアプリを作成したときにApp nameとして指定したものです。Laravelプロジェクト名(ローカルのディレクトリ名)ではないのでご注意下さい。

(本記事の様にHerokuアプリ名とLaravelプロジェクト名を同じにしていれば特に意識する必要はありません)

上記コマンド実行時に

set git remote heroku to https://git.heroku.com/[Herokuアプリ名].git

と出力されればOKです。これでローカルのディレクトリとHerokuアプリが対応した状態になりました。

Error: Couldn’t find that app.

と表示された場合は、コマンドの[Herokuアプリ名]が間違っています。冒頭で作成したHerokuアプリ名と一致しているか確認しましょう。

ここで一旦コミット

この状態で一旦git commitしてしまいましょう。プッシュはまだしません。

まずはコミット前に↓のコマンドを実行しておきましょう。

C:\Users\sunogura\heroku\プロジェクト名> git config --global core.autoCRLF false

この設定をしておかないとgit addやgit commitをした時、ソースコード内の改行コードを環境に合わせて勝手に変換してしまいます。次の手順でgit add . した時に

warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory

というwarningが大量に出てきてしまったり、差分だらけになって変更箇所がわかりにくくなったりするのでぜひやっておきましょう。

さて、↑が済んだら以下のコマンドでコミットまでします。

C:\Users\sunogura\heroku\プロジェクト名> git add .
C:\Users\sunogura\heroku\プロジェクト名> git commit -m "first commit!"

HerokuアプリにLaravel関連の設定を伝える作業

ここまでで、

1. Heroku上でのアプリのガワの作成
2. ローカルPC上でLaravelプロジェクトの作成
3. Heroku上のアプリ と ローカルのLaravelプロジェクトを紐づけ

までが完了しました。後はプッシュすれば動きそうですが、まだ動きません。

Herokuに対してLaravelのドキュメントルートを伝えるProcfileの作成と、Laravel暗号化鍵の作成・設定、Herokuへのビルドパックの追加の3つの作業が必要です。

Procfileの作成

Procfileは、Herokuに対して何かしらの簡単な情報を伝えるためのファイルで、Herokuを使用する際にのみ用意する必要があるファイルです。

これを用意していないと、プッシュ(デプロイ)してもAPIのパスが正しく認識されず正常に動きません。

以下のコマンドを実行してProcfileを作成しましょう。

C:\Users\sunogura\heroku\プロジェクト名> echo "web: vendor/bin/heroku-php-apache2 public/" > Procfile

コマンドを実行すると、ローカルPCのLaravelプロジェクトの直下にProcfileという名前の以下の様なファイルが作成されるはずです。

web: vendor/bin/heroku-php-apache2 public/

Procfileを新しく作成したので、改めてコミットしましょう。(最初のコミットと一緒にやってもいいんだけども…)

C:\Users\sunogura\heroku\プロジェクト名> git add .
C:\Users\sunogura\heroku\プロジェクト名> git commit -m "add Procfile!"

Laravel暗号化鍵の作成・設定

次はLaravel暗号化鍵です。難しそうですが、簡単です。

まずは暗号化鍵を生成するため、以下のコマンドを実行して下さい。

C:\Users\sunogura\heroku\プロジェクト名> php artisan key:generate --show

すると、

base64:08tEl3Bf4123a890ABJifjlgo7h8Qk4nEGjKYakSiKw3lg=

の様に鍵が生成されます。これをコピーしておいて↓のコマンドを実行して下さい。

[↑で生成した鍵]の部分には出力された鍵の「base64」の部分から末尾の「=」まで漏れ無く貼り付けてくださいね。

C:\Users\sunogura\heroku\プロジェクト名> heroku config:set APP_KEY=[↑で生成した鍵]
# 例: heroku config:set APP_KEY=base64:08tEl3Bf4123a890ABJifjlgo7h8Qk4nEGjKYakSiKw3lg=

このコマンド heroku config:set についてですが、このコマンドはHerokuアプリに環境変数を設定するためのものです。

環境変数の設定は、今回のようにコマンドで実行する事もできますが、WebブラウザでHerokuを開いて設定することも出来ます。

その場合、Herokuアプリの環境変数の設定場所はアプリの詳細画面の「Settings」タブをクリックした画面の上部にあります。

「Reveal Config Vars」ボタンをクリックすると環境変数一覧が開きます。

先程設定したばかりのAPP_KEYが表示されていますね。右側のエンピツアイコンから値を変更したり、「Add」ボタンで環境変数を追加する事もできます。

Herokuアプリの環境変数を設定する事は時々あるので覚えておきましょう。

herokuアプリにビルドパック heroku/php を追加

最後にビルドパック heroku/php を追加します。これの手順をやらないと、Gitへのプッシュ時(Herokuへのデプロイ時)にエラーになってしまいます。

こちらはコマンド一つです。以下のコマンドを実行して下さい。

C:\Users\sunogura\heroku\プロジェクト名> heroku buildpacks:add heroku/php

以下の様なメッセージが出力されたらOKです。

Buildpack added. Next release on sunogura-laravel-api will use heroku/php.
Run git push heroku main to create a new release using this buildpack.

Herokuアプリをデプロイする

ようやくHerokuアプリをデプロイする準備が整いました。

前述の通り、HerokuはGitへプッシュすることによってデプロイとなります。

ここまでの手順でソースファイルのコミットは済んでいるので、以下のコマンドでプッシュをしましょう。

C:\Users\sunogura\heroku\プロジェクト名> git push heroku master

しばらくプッシュの進捗が出力されていきます。

完了時に以下の様なメッセージが出力されていたらプッシュ(デプロイ)成功です。

remote: Verifying deploy… done.
To https://git.heroku.com/sunogura-laravel-api.git

デプロイしたLaravelアプリをWebブラウザで開いてみる

Herokuアプリ上にデプロイした内容をWebブラウザで確認するには以下のコマンドを実行します。

C:\Users\sunogura\heroku\プロジェクト名> heroku open

エンターキーを押下すると、Webブラウザで↓の様なLaravelのデフォルトトップページが開くはずです。(ソース書き換えていなければpublic/index.php)

この画面が表示されればHerokuへのLaravelのデプロイは完了です。お疲れ様でした！

後はREST API実装していくなり、Laravel一本でアプリ作るなりしていきましょう！

git push heroku master でエラーが発生した場合の確認箇所

Push failed: cannot parse Procfile. が表示される

Procfileは作成済みなのに↓のグレーの行の様なエラーが発生する場合、Procfileの文字コードが変になっている可能性があります。エディタで文字コードをUTF-8に変更した上でプッシュし直してみて下さい。

remote: -----> Preparing runtime environment...
remote: -----> Checking for additional extensions to install...
remote: -----> Discovering process types
remote:
remote:  !     Push failed: cannot parse Procfile.
remote:  !     Please try pushing again.
remote:  !     If the problem persists, see https://help.heroku.com/ and provide Request ID 25c16091-6920-c095-3cae-2513671be4b6.
remote:
remote:
remote:  !
remote:  ! ## Warning - The same version of this code has already been built: e5e5ac01a7d889378ed8547013e6f2a6d2c335d7
remote:  !
remote:  ! We have detected that you have triggered a build from source code with version e5e5ac01a7d889378ed8547013e6f2a6d2c335d7
remote:  ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote:  !
remote:  ! If you are developing on a branch and deploying via git you must run:
remote:  !
remote:  !     git push heroku <branchname>:main
remote:  !
remote:  ! This article goes into details on the behavior:
remote:  !   https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: !       Push rejected to sunogura-laravel-api.
remote:
To https://git.heroku.com/sunogura-laravel-api.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/sunogura-laravel-api.git'