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

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

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

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

PR

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を開くと、下記のように正常に動いていることが確認できました!

実際動くアプリを下記に置いています。。
todo

終わりに

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

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

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

コメント

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