【Laravel】Herokuを利用して無料でデプロイしてみた【手順】

プログラミング

公開:2019年12月11日

どうもえんつかです。

Laravelを用いてWEBアプリケーションを作成したりしてます。

WEBアプリケーションの作成後の公開方法としていくつか種類がありますが、Herokuを用いて無料でLaravelで作成したWEBアプリをデプロイしてみたので、手順・方法を記します。

WEBアプリ作ってみたけど、公開の仕方が・・・とか、初めてデプロイしてみたいけど・・・

といった方の解決方法になればと思います。

【Laravel】Herokuを利用して無料でデプロイしてみた【手順】

Herokuとは、簡単にPaaSと呼ばれるサービスの一つで簡単に、WEBアプリを公開できるサービスです。

WEB上に公開する手法として、

レンタルサーバー
Heroku
AWS(Amazon Web Services)
GCP(Google Cloud Platform)

があると思いますが、Herokuは個人向けWEBアプリを手軽くデプロイするのに最適です。

私個人としてはレンタルサーバーをエックスサーバーさんと契約しており、entsukablogを運営しています。

その上でレンタルサーバーとHerokuを実際に触り、比較した上での所見も書いていきます。

Herokuユーザー登録

まずはHerokuでユーザー登録をしましょう！

無料でできます！

MySQLなどのDBを用いる場合は、Heroku上のアドオンを利用します。

その際は、クレジットカード番号の登録を要求されますが、引き落としは発生しないので、ご安心ください。

Heroku CLIの導入

Heroku CLIは、簡単に言えばローカルのターミナルでHerokuと接続できてしまうものです。

これがあると、簡単にファイル更新ができてしまいます！(すごい・・・)

レンタルサーバーだと毎回FFFTP経由でWordPressテーマの編集時にとても面倒だったのを覚えています。

MACは以下コマンドでできます。Windowsは公式からダウンロードして下さい。(公式はこちら)

$ brew tap heroku/brew && brew install heroku

Laravelプロジェクトファイルの作成

私は、プロジェクトファイルを最初から作成せずに行い、全くデプロイができず、困惑していました。

初めてやる方は、プロジェクトファイルを作成するところから初めてみるのがいいと思います。

プロジェクトファイル作成は、以下コマンド。

$ composer create-project –prefer-dist laravel/laravel ftatoolapps

ftaoolappsは、ファイル名なので任意に変更して頂いて構いません。

作成したらディレクトリを変更します。

$ cd ftatoolapps

Herokuにログイン

Heroku CLIをインストール済みであれば、以下コマンドで完了です。

$ heroku login

か、簡単過ぎ・・・

Heroku上にLaravelアプリを作成

続いて、Heroku上にアプリを作成していきましょう。

Heroku上でPHPが扱えるようにします。

公式はこちらSetting a buildpack on an application

$ heroku create ftatoolapps –buildpack heroku/php

続いて、ファイルを上げる設定を行なっていきます。

$ git init

$ heroku git:remote -a <herokuのアプリ名>

$ git add .

$ git commit -m “first”

$ git push heroku master

これで、Heroku上にファイルがpushされ、アップデートされた状態になります！

これがとても便利で、何かファイル更新があれば、

$git add . から $ git push heroku masterまでやってしまえば、簡単に更新できてしまうんですよね。便利。

レンタルサーバーだったら、FFFTP経由となるのでファイルの削除・コピーが必要になり、正直手間ですね。

何度もFFFTPを触ることがないのであれば、全然FFFTPでもOKだと思います。

WordPressでブログ運営を行うのであればレンタルサーバーで良いと思いますね。

Heroku Procfileの作成

Herokuアプリ起動時に実行するプロセスを定義するためのファイルです。

公式はこちらDefine a Procfile

まず、ファイルを作成します。

$ touch Procfile

その後、ファイルを直接開いて、公式に記述されている以下コードを貼り付けです。

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

DBマイグレーション前にLaravelファイルで記載しておくこと

ここまできたら、以下を事前に準備しておくと良いです。

DBカラムのタイプvarcharの文字数指定
httpを強制https化
強制https化に付随してcssやjsのパス設定変更

DBカラムのタイプvarcharの文字数指定

これについては、MySQL使用を前提でお伝えしますが、

Herokuで利用できるメモリの上限を超えてしまい機能しなくなってしまう為、文字数デフォルト255のところを191と指定します。

方法は、app\Providers\AppServiceProvider.phpのbootメソッド内に以下を記述です。

useでの指定を忘れないでください。

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}

use Illuminate\Support\Facades\Schema;

public function boot()

{

Schema::defaultStringLength(191);

}

httpを強制https化

こちらを実行せずにデプロイはできなくはないです。

ですが、WEBアプリケーション上でhttpとhttpsが混在した状態となり、セキュリティの観点からよくないので、強制的にhttps化を実行しましょう。

方法は、app\Providers\AppServiceProvider.phpのbootメソッド内に以下を記述です。

varcharの文字数指定もここに入りますね。

    public function boot()
    {
        // 本番環境(Heroku)でhttpsを強制する
        if (\App::environment('production')) {
            \URL::forceScheme('https');
        }

public function boot()

{

// 本番環境(Heroku)でhttpsを強制する

if (\App::environment('production')) {

\URL::forceScheme('https');

}

強制https化に付随してcssやjsのパス設定変更

cssやjsの相対パス設定は、assetを用いるかと思いますが、assetはhttps化では利用できなくなります。

なので、assetをsecure_assetに書き換えましょう。以下のような形です。

href=”{{ secure_asset(‘assets/css/app.css’) }}”

なお、私は自作でcssファイルやjsファイルを準備してローカルで動作していたのですが、

デプロイ環境だと、デフォルトで存在している、app.cssやapp.jsでないと動作しませんでした。

なので、こちらに記載することをおすすめします。

Heroku上でMySQLを利用できるようにする

$ heroku addons:add cleardb

Herokuではアドオンでcleardbが準備されています。

こちらをMySQLとして利用することができますのでインストールしましょう。

DBデータの中身を確認できないのが残念な点ですね。

方法ご存知の方いれば教えていただきたいです。

自身のDB情報確認とHerokuへのDB接続設定

まず、自身のDB情報を確認しましょう。

$ heroku config | grep CLEARDB_DATABASE_URL

表示されるので、メモを取りましょう。内容は以下の通りです。

CLEARDB_DATABASE_URL: mysql://[ユーザー名]:[パスワード]@[ホスト名]/[データベース名]?reconnect=true

続いて、DB接続設定をするために環境変数設定を行いましょう。

$ heroku config:set DB_DATABASE=[データベース名]
$ heroku config:set DB_HOST=[ホスト名]
$ heroku config:set DB_USERNAME=[ユーザー名]
$ heroku config:set DB_PASSWORD=[パスワード]
$ heroku config:set APP_KEY=$(php artisan key:generate --show)
$ heroku config:set APP_ENV=heroku
$ heroku config:set LANG=ja_JP.UTF-8
$ heroku config:set TZ=Asia/Tokyo

$ heroku config:set DB_DATABASE=[データベース名]

$ heroku config:set DB_HOST=[ホスト名]

$ heroku config:set DB_USERNAME=[ユーザー名]

$ heroku config:set DB_PASSWORD=[パスワード]

$ heroku config:set APP_KEY=$(php artisan key:generate --show)

$ heroku config:set APP_ENV=heroku

$ heroku config:set LANG=ja_JP.UTF-8

$ heroku config:set TZ=Asia/Tokyo

変更を更新しよう

ここまでのファイルを更新します。

$ git add .

$ git commit -m “update”

$ git push heroku master

マイグレーションの実行

自分でテーブルを作成する場合(普通はすると思います)は、以下コマンドでマイグレーションファイルを作成し、任意でカラムを編集してください。

$ php artisan make:migration create_〇〇○_table

マイグレーションファイルの編集が完了したらHerokuに上げましょう。

以下コマンドで実行できます。

$ heroku run php artisan migrate

もし、うまく動作しないようであれば、ロールバックしましょう。

$ heroku run php artisan migrate:rollback

本番環境の確認

ここまで順調に事が運べば、本番環境で動作を確認してみましょう。

以下コマンドを実行です。

$ heroku open

サイトが自動で開き、確認できます。

ローカル上で作成したアプリのデプロイ

ここまでうまく行けば、あとはローカル上で作成したアプリを以降するだけですね。

ローカル上のファイルを、herokuで表示させるプロジェクトファイル内にコピーしていきましょう！

すでに記載した変更を更新するコマンドを実行しながら確認を進めていきましょう。

うまく移行できればこれにて完了です！

あれ、うまくデプロイできないぞ？

という方は、以下を参考にしてみてください。

Laravel Debugbarを使ってみよう！
データベースのロールバックをしてみよう！
キャッシュクリアを行おう！

Laravel Debugbarを使ってみよう！

導入方法は、こちらの記事が参考になります。

Laravel5.7: Laravel Debugbarを使う

もし、コード内のエラーで上手く行かないのであれば、デバックしてエラー箇所がわかるように設定すれば、どこを見直せばわかりますよね！

データベースのロールバックをしてみよう！

これは、私がそうだったのですが、まさかロールバックを行い正常に動作するとは思いませんでした。

うーん、導入手順が不適切だったんですかね？

よくわかっていないのですが、困り果てて物は試してやってみたら上手くいきました。

キャッシュクリアを行おう！

以下コマンドは、環境変数の設定変更時やキャッシュをクリアする際に行なってください。

こちらが原因で上手く動作しなかった方がちらほらいるようです。

$ php artisan cache:clear

$ php artisan config:clear

$ php artisan route:cache

$ php artisan view:clear

$ composer dump-autoload

詳細はこちらを参考にしてみてください。

[Laravel]デプロイ時の最適化

タグ