LaravelアプリをHerokuにデプロイする!

LaravelアプリをHerokuにデプロイする! Laravel

HerokuにLaravelのアプリをデプロイしたので、デプロイする方法をまとめてみました。
この記事では、Herokuのユーザー登録からアプリのデプロイまでを解説しています。
機能制限されますが、Herokuは無料で使い始めることが可能です。

Heroku上で無料で使えるデータベースはPostgreSQLになります。
mysqlを使うことがよくあるのですが、mysqlにはクレジットカード登録が必要でした。

Herokuにユーザー登録する

まず、Herokuのアカウント作成します。
ここから無料で新規登録をクリックして登録を開始します。

画面遷移すると、下記のようにフォームが表示されるので、名前やメールアドレスなどを入力して登録します。

入力完了するとメールが送られます。

メールを確認するとパスワードを設定する画面が表示されます。
パスワードを設定してログインすると、アカウントが作成されます。

利用規約が出るので、確認してAccept(承認)ボタンを押します。

ここまででユーザー登録完了です。

LaravelのTodoアプリをデプロイする

アプリケーションをHeroku上に作成して、デプロイしていきます。

アプリケーションを作成する

下記の「Create new app」を押して、新しいアプリケーションを作成します。

アプリケーション名を入力して、「Create app」ボタンを押します。

下記のようにアプリケーションが作成されて、デプロイ方法が書かれた画面に遷移します。

アプリケーションのデプロイ準備

既に存在するリポジトリをデプロイする方法は、下記のようにデプロイタブの最後の方に記載されています。

herokuコマンドを使うので、herokuコマンドについてはインストールしておいてください。
下記にインストール方法が書いています。
Heroku CLI | Heroku Dev Center
Heroku CLI をダウンロード、インストール、および使用を開始する方法。Heroku Toolbelt の一部として使用される Heroku CLI。

デプロイしたいディレクトリに移動する

インストールが終わった後は、まずデプロイしたいgitのブランチに移動します。
今回はhttps://github.com/YasuakiHirano/laravel8-todo-list.gitをクローンしたので、laravel8-todo-list配下に移動します。

移動した後に、まずHeroku CLIからHerokuにログインします。
下記のコマンドでログインできます。

$ heroku login

ブラウザが開くので、ログインボタンを押してログインします。
これで、自分のアカウントのHerokuに対して操作をすることが可能になります。

リモートリポジトリを追加する

下記のコマンドで、git cloneしたリポジトリに対して、Herokuのリモートリポジトリを追加します。
ログインした後でないと、追加できません。

$ heroku git:remote -a [Herokuで作成したアプリケーション名]

追加すると下記のように設定されたリモートURLが表示されます。

$ heroku git:remote -a develop-laravel-todo
set git remote heroku to https://git.heroku.com/develop-laravel-todo.git

ビルドパックを追加する

Herokuにビルドパックを追加します。今回はPHPなのでheroku/phpを使用します。

下記のコマンドでビルドパックが追加できます。
npmコマンドを使用するために、Nodejsなど複数のビルドパックを追加することも可能です。

$ heroku buildpacks:set heroku/php

コマンドを実行すると、下記のように設定できたことが確認できます。

$ heroku buildpacks:set heroku/php
Buildpack set. Next release on develop-laravel-todo will use heroku/php.
Run git push heroku main to create a new release using this buildpack.

Procfileを作成する

デプロイしたときに、nginxを使ってpublicをルートとして表示させるためにProcfileを作成します。
コードと一緒にコミットして、Herokuに上げることで処理してくれます。

Procfileという名前で下記の内容を保存して、composer.jsonと同じディレクトリに配置し、コミットします。
基本的には下記でpublicを参照してくれます。

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

ですが、このままだとトップ以外の他のルートにアクセスするときにエラーになります。
下記をnginx_app.confで保存します。

location / {
    try_files $uri @rewriteapp;
}

location @rewriteapp {
    rewrite ^(.*)$ /index.php/$1 last;
}

location ~ ^/(app|app_dev|config)\.php(/|$) {
    try_files @heroku-fcgi @heroku-fcgi;
    internal;
}

Procfileを下記のように修正して、一緒にコミットしておきます。

web: vendor/bin/heroku-php-nginx -C nginx_app.conf /public

これで、トップ以外のルートにもアクセスすることができるようになります。

アプリケーションのデプロイ

デプロイの準備が整ったので、Herokuに対してデプロイを行なっていきます。

Herokuにデプロイする

Herokuに対して、下記コマンドでpushします。pushすると自動的にデプロイが始まります。

$ git push heroku master

Herokuへのデプロイですが、コードがリポジトリのルートディレクトリの直下にない場合はエラーになります。
今回使うリポジトリではコードをtodolist_appに入れているので、それを一段上に移動することで対応可能です。

今回はdeployブランチを作成して、herokuにプッシュしました。
下記のようにすると、masterブランチでなくてもデプロイすることが可能です。

$ git push heroku deploy:master

デプロイが完了すると、下記のように出力されます。
記載されているURLからブラウザでアクセス可能です。

$ git push heroku deploy:master
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 12 threads
---- 省略 ----
remote: -----> Compressing...
remote:        Done: 19.1M
remote: -----> Launching...
remote:        Released v4
remote:        https://develop-laravel-todo.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/develop-laravel-todo.git
   1b21c31..f7ce428  deploy -> master

ブラウザで開くと下記のようにエラーになっているかと思います。
.envで使用している変数の設定などが反映されていなかったり、APP_KEYがないためです。

Herokuにデータベースを追加する

PostgreSQLであれば、無料で使用することができます。
ブラウザから追加する場合は、作成したアプリケーションのResorceタブから追加できます。
無料で使用する場合はHobby Devを選んで追加します。

下記のheroku addonコマンドを使用して追加することもできます。

$ heroku addons:create heroku-postgresql:hobby-dev

追加したHeroku Postgresを開いて、Settings画面から下記のように接続先を確認できます。
これをLaravelに設定します。

Herokuに.envの設定を反映する

HerokuにLaravelの設定情報(.env)の内容を反映するにはheroku config:setコマンドを使用します。
例えばAPP_NAMEを設定する場合は下記のようにします。

$ heroku config:set APP_NAME=Laravel

今回は下記のように設定しました。

heroku config:set APP_NAME=Laravel
heroku config:set APP_URL=https://develop-laravel-todo.herokuapp.com
heroku config:set LOG_CHANNEL=errorlog
heroku config:set DB_CONNECTION=pgsql
heroku config:set DB_HOST=[画面で確認したHOST]
heroku config:set DB_PORT=[画面で確認したPORT]
heroku config:set DB_DATABASE=[画面で確認したDATABASE]
heroku config:set DB_USERNAME=[画面で確認したUSERNAME]
heroku config:set DB_PASSWORD=[画面で確認したPASSWORD]

LOG_CHANNELにerrorlogを設定しています。
これを設定することで、heroku logsコマンドを使用するとLaravelのログを確認することが可能です。

最後にAPP_KEYを設定します。
まずartisanコマンドのkey:generateを使って、キーを作成します。
--showをつけることで、出力結果として確認できます。

$ php artisan key:generate --show
base64:K9kQlq7sTgiR8Dd8Glo/4L6JwWgwkw3okblmsk11N1w=

出力結果を使用して、Herokuに設定します。

heroku config:set APP_KEY=base64:K9kQlq7sTgiR8Dd8Glo/4L6JwWgwkw3okblmsk11N1w=

これで、Laravelの設定情報(.env)の設定は完了です。
ちなみに、Herokuに設定した値は下記のコマンドで参照できます。

$ heroku config

HerokuでLaravelのマイグレーションをする

データベースを使っているアプリケーションではマイグレーションが必要になると思います。
Herokuでartisanコマンドを使いたい場合は、下記のように使用することが可能です。

$ heroku run "php artisan migrate"

このようにheroku runでheroku上でコマンドを実行できます。

Laravelのコードの注意・変更点

Laravelのコードでデプロイのために変更した箇所を記載します。

assetヘルパーを使うとcssなどの読み込みが上手くいかないため、下記のように変更しました。

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!----下記に変更した---->
<link href="css/app.css" rel="stylesheet">

Herokuでhttps接続が上手くいかない場合があります。
app/Providers/AppServiceProvider.phpのコードのbootメソッドを下記のようにすることで、HTTPS接続に対応しました。

public function boot()
{
  if (App::environment(['production'])) {
      URL::forceScheme('https');
  }
}

動作確認

デプロイしたHerokuのURLを開くと、下記のように正常に動いていることが確認できました!

実際動くアプリを下記に置いています。。
https://develop-laravel-todo.herokuapp.com/

終わりに

今回はHerokuに、LaravelのWebアプリをデプロイしてみましたがいかがでしたか?
HerokuのCLIコマンドを使うことで、簡単に操作できていい感じですね👍🏻

スモールスタートでアプリを公開する場合などには使えるのかなと思いました。
注意しないといけないのが、無料版の場合は30分くらいでデプロイ環境がスリープしてしまうので、次回誰かがアクセスするときには時間がかかってしまうようです。
回避策として、30分毎などにCurlでURLを叩いて起こしてあげる方法などがあるようです。今度試してみたいと思います!

あとは、無料枠内でデプロイしたい場合にMySQLを想定して作成していたときには、PostgreSQLの形式に直す必要がありそうですね。。(DBの関数など)

コメント

タイトルとURLをコピーしました