Laravel開発

LaravelをHerokuにデプロイしてサイトを表示するまでの方法(GUI操作メインでBasic認証のやり方も紹介)

LaravelをHerokuにデプロイする方法(GUI操作メイン) Laravel開発

こんにちは!

川口のWEB屋テダスクのToshiです。

今回は、インフラのPaaSの一つであるHerokuに作ったWEBアプケーションをデプロイする方法を書いていこうと思います。

Herokuを簡単に説明すると、インフラの構築をアプケーションに応じて自動で構築してくれるサービスです。

Herokuを使えば、AWSやクラウドサーバーのように1からLinuxを使ってサーバーの構築作業をすることなくウェブサービスを公開することができますので、その時間的コストを大幅に下げる事が出来ます。

テダスクでも自社サービスを運営するのに利用したり、ちょっとした試験的に使うにもとても重宝しているインフラサービスです。

 

Herokuに関する特徴はまた別の記事でまとめる予定ですが、今回この記事を作成しようとした背景には、GUIでの設定方法がブログ記事として上がっているのが少ないと思ったためです。

Herokuは管理画面上からデプロイするためのGitHubの接続や、アドオンの追加、今回のLaravelでいう.envの設定、データベースの接続方法などは基本的にGUIでできるのですが、多くの記事はコマンドラインから設定しているものが多くHerokuとコマンドラインで設定した内容がどのように連動しているかなどが分かりにくかったので、極力GUIをメインに設定をしていく方法をまとめようと思います。

前提の環境

Heorokuを使う為にはGitがPCにインストールされていることが条件になります。

それ以外については、Heorokuの会員登録と、この後のHeroku Cliのインストールが必要になります。

Herokuでサービスを運営する上での注意

独自ドメインにwwwが付く

Heorokuでウェブサービスを運営するときに、独自ドメインを利用されるかと思いますが、Heorokuでは基本的に独自ドメインでもwwwが付きのドメインになります。

もし、どうしてもwwwが付くのがマズいという場合は、Cloudflareなどのリバースプロキシを使ってHeorokuに送る形であればwwwなしでも使えるようですので、そのやり方については他の方の記事を参考にして下さい。

データベースがPostgreSQLが推奨されている

Heorokuではデータベースの選択がいくつかできますが、基本的にHeroku Postgreがおすすめされています。

PostgreSQLでもLaravelは使えますが、仕様が異なる部分もあるので、いきなり本番ではなく練習で1度使ってみるのをおすすめします。

ちなみに、MySQLであればClearDBというのもあるので、ClearDBを使うのも良いと思います。

 

HerokuのCliのインストール

Herokuをデプロイする事自体は、GUI(ダッシュボード)からできますが、デプロイ後にphp artisanコマンドを行う為にはHerokuとGitとの連動が必要になります。

そのため、開発環境のPCにHeroku CLIをインストールする必要がありますので、下記URLから環境に応じたファイルをダウンロードして、インストールしてください。

The Heroku CLI | Heroku Dev Center
How to download, install, and start using, the Heroku CLI. The Heroku CLI used to be part of the Heroku Toolbelt.

 

Herokuの利用登録

LaravelをHerokuにデプロイする方法(GUI操作メイン)

次にHerokuでユーザー登録をします。

登録についてはここでは詳しくは説明はしませんので、「無料で新規登録」から適宜登録を済ませて下さい。

クラウド・アプリケーション・プラットフォーム | Heroku

LaravelをHerokuにデプロイする方法(GUI操作メイン)

アプリの作成

アカウントの登録が終わったら、早速アプリの作成をしていきましょう。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

「Create new app」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

App nameには適宜アプリの名前を入力して、「Create App」をクリックします。

この名前はユニーク名になるため、他の人が使っている名前の場合は使えないので注意しましょう。

 

LaravelをHerokuにデプロイする方法(GUI操作メイン)

こんな感じの画面になれば、デプロイ用のアプリ作成の完了です。

GitHubと接続

次に、HerokuにデプロイするためのGitHubリポジトリーと接続します。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

Deployment methodの「GitHub」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

GitHubとの接続許可のダイアローグが表示されますので、GitHubにログインします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

そうすると、すぐ下に「Connect to GitHub」の項目が表示されますので、「repo-name」にリポジトリー名を入力して「Search」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

そうすると、対象のリポジトリーが表示されますので、デプロイしたいリポジトリーが見つかったら「Connect」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

そうすると、GitHubのマークの所にチェックマークがはいり、「Automatic deploys」という項目が表示されます。

ここでGitHubの接続が完了となります。

ビルドパックの設定

GitHubの接続が終わり、やろうと思えばデプロイが出来る状態ですが、まだ前準備が必要になります。

それがビルドパックの設定です。

ビルドパックが必要なのは、Laravelでnode.jsのライブラリーを使っている場合です。

このビルドパックでnode.jsを使う設定をしないと、laravelのコマンドでいう「npm run」をしないで公開してしまうことになります。

なので、Laravelのデプロイ時にnpmを実行するためにビルドパックの設定を行います。

「Settings」タブをクリックして、画面を下にスクロールをすると、「Buildpacks」の項目が表示されます。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

「Add buildpacks」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

まず、「php」を選択して、「Save changes」をクリックします。

 

LaravelをHerokuにデプロイする方法(GUI操作メイン)

次に、「node.js」を選択して、「Save changes」をクリックします。

 

LaravelをHerokuにデプロイする方法(GUI操作メイン)

そうすると、それぞれが追加されているのが分かると思います。

ここで注意が必要なのは、php→node.jsの順番に並ぶようにすることです。

パッケージの横に順番を変更するアイコンがあるので、node.jsが先にある場合は下に移動しましょう。

ビルドパックの設定は以上です。

PostgreSQLのインストール

次にデータベースの設定をしていきます。

Herokuではいくつかデータベースを選択出来ます。

今回のPostgreSQL以外に使うとしたら、ClearDB(MySQL)も使えるので適宜選択してください。

今回はHerokuの内部パッケージであるHeroku PostgreSQLを利用したいと思います。

 

「Resources」タブをクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

Add-onsという項目があるので、そこに「postgres」と入力してみましょう。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

「Heroku Postgres」が表示されたらクリックします。

 

LaravelをHerokuにデプロイする方法(GUI操作メイン)

Plan nameは適宜選んでください。「Hobby」だと無料で使えるので、初めての時はFreeを選んでデプロイまでやってみると良いかもしれません。

「Submit Order Form」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

Heroku Postgresが追加されたら完了です。

Config関連の設定

Config関連では、Laravelでいう「.env」ファイルの設定内容を反映する作業を行います。

「Settings」タブをクリックして、画面を下にスクロールをすると、「Config Vars」の項目が表示されます。LaravelをHerokuにデプロイする方法(GUI操作メイン)

「Reveal Config Vars」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

そうすると入力項目が表示されます。

ここに入力するのは、.envファイルのKeyとValueです。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

例として赤で囲んだ部分がKeyで、=の後の値の部分がValueに該当します。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

これは実際に入力した例です。

本番環境でAPP_DEBUG=trueなんてことは基本的にしないと思いますが、これこのアプリに関してはBasic認証をかけている状態なので、参考にしないで下さい。

また、下の方にデータベースの接続パラメータも入力されているのが分かると思いますが、Heroku PostgreSQLの接続情報は、「Resources」→「Heoroku Postgres(リンク)」→(ページを移動したら)「Settings」→「Database Credentials」→「View Credentials」をクリックすると、接続情報が表示されるので、その値をコピーしてConfig Varsに入力しましょう。

DB_CONNECTIONはデフォルトのmysqlではなくpgsqlを入力することを間違えないようにしましょう。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

Herokuダッシュボードでの設定は以上になります。

Heorokuデプロイ用に必要なファイルの作成と編集

LaravelをHeorokuにデプロイする際にHeoroku専用に必要なファイルと設定がありますので、デプロイ前にもうひと作業します。

Procfileの作成

Procfileはindexファイルの位置をHeorokuに示すためのファイルです。

LaravelのルートディレクトリにProcfileという名前で次の内容で保存します。

Procfile

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

Procfileはこれで以上です。

ロードバランサーの設定

この設定が抜けると、内部で設定したURLがhttpのままになってしまったり、CSSが適切に読み込めなくなるので、忘れずに設定します。

app/Http/Middleware/TrustProxies.php

<?php

namespace App\Http\Middleware;

use Fideloper\Proxy\TrustProxies as Middleware;
use Illuminate\Http\Request;

class TrustProxies extends Middleware
{
    /**
     * The trusted proxies for this application.
     *
     * @var array|string|null
     */
    //protected $proxies;
    protected $proxies = '*';

    /**
     * The headers that should be used to detect proxies.
     *
     * @var int
     */
    protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO | Request::HEADER_X_FORWARDED_AWS_ELB;
}

修正するのは15行目の$proxiesです。

↓詳しくはこちらにHeroku公式サイトをご覧下さい。

Heroku スターターガイド (Laravel) | Heroku Dev Center
このチュートリアルでは、Laravel アプリケーションインストーラーを使用して、過程で必要な変更を行いながら Heroku に新しいプロジェクトをデプロイする方法を示します。

いよいよデプロイ

設定が全て完了したので、いよいよデプロイです。

「Deploy」タブをクリックして、「Manual deploy」の項目に移動します。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

デプロイしたいブランチを選んだら、「Deploy Branch」をクリックします。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

そうすると、コマンドが走り出すので、デプロイが終わるまで待ちましょう。

アプリの規模にもよりますが、3分~くらいで完了します。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

無事完了すると、こんな画面になります。

ページを確認する場合は、「View」をクリックします。

コマンドを実行できるようにするためのHerokuとGitの連動

Laravelでアプリをデプロイした後は、一般的にmigrateでデータベースのテーブルの作成をすると思います。

そのためには、Herokuからphp artisanのコマンドを実行できるようにいなければ行けません。

そのために、ローカルで一度Herokuとの連動の作業を行います。

 

ここからは、ようやくコマンドラインでの作業になります。

コマンドは

$  heroku git:remote -a アプリ名

です。

アプリ名はHerokuのCreate new appで作成した名前です。

今回の例でいうと

 

$  heroku git:remote -a deploy-test-tedask

となります。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

そうすると、初めてHeorokuのコマンドを打つと「Press any key to open up the browser to login or a to exit.」

とブラウザでのログインを促されますので、エンターキーなど適当にキーを打ちます。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

ログイン画面が表示されるので、ログインをクリックします。

 

LaravelをHerokuにデプロイする方法(GUI操作メイン)

より強い認証の方法を推奨してきますが、とりあえず練習なので「Later」をクリックして先に進みます。

 

LaravelをHerokuにデプロイする方法(GUI操作メイン)

ログインが完了したら、コマンドの画面に戻りましょう。

 

LaravelをHerokuにデプロイする方法(GUI操作メイン)

分かりにくいですが、「Logging in… done」と書いてあればGitとHeroku連動の完了です。

migrateの実行

GitとHerokuの連動が完了したところで、php artisanコマンドを実行しましょう。

Herokuを通してコマンドを実行するときはコマンドの前に「heroku run」を付けます。

migrateの場合は

heroku run php artisan migrate

です。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

コマンドを本当に実行するかを聞かれますが、yesを実行するとこのようにlaravelコマンドと同じ事が出来るようになります。

もしSeedingも必要であれば、同じ様にheroku run db:seedを実行することでデータを入れる事が出来ます。

エラーTips1

heroku runやheroku loginなどで内部コマンドまたは外部コマンド、操作可能なプログラムまたはパッチファイルとして認識されていませんと表示される

これはHeroku Cliがインストール出来ていない状態なので、Heroku Cliをインストールしましょう。

Windowsではインストール後に再起動すると実行できるようになることもあるので、一度再起動しましょう。

 

SQLSTATE[22023]: invalid parameter value 7 Error:がでて、laravelでmigrate出来ない

SQLSTATE[22023]: invalid parameter value 7 Error:

これは、Heroku Postgresかその他データベースとの接続が上手く言っていない時のエラーなので、「Config関連の設定」のところに戻って、もう一度データベースとの接続設定が間違っていないか確認しましょう。

サイトを見てみよう

サイトは先程GUIからデプロイしたときに出てきた「View」をクリックするか、

「https://アプリ名.herokuapp.com/」

でアクセスする事ができます。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

LaravelをHerokuにデプロイする方法(GUI操作メイン)

デフォルトだとこんな感じに表示されれば成功です。

エラーTips2

Heorokuにデプロイ後にForbiddenが表示される

heroku forbidden

こういったエラーが出た場合は、先ずエラーログを見てみましょう。

コマンドラインの画面を使って

heroku logs --tail

を実行します。

heroku-error-log

画像では見にくいかも知れませんが、

「Cannot serve directory /app/: No matching DirectoryIndex (index.php,index.html,index.htm) found, and server-generated directory index forbidden by Options directive, referer: https://dashboard.heroku.com/」

と書いてあります。

これは、Heorokuが想定しているディレクトリにindexファイルがないため、アクセス禁止にしているエラーです。

つまり、Procfileで適切にindexファイルの位置の指定が出来ていない可能性があるので、Procfileを確認しましょう。

Procfileの設定については同じページのProcfileの作成に記載しています。

CSSやJS関連が反映されていない!1

HerokuのCSSが反映されない

トップページはうまく表示された物の、ログイン画面に行くとこんな感じでCSSが全く効いていない状態。

herokuのフォームがhttpsにならない

しかも、フォームを入力しようとするとhttpが聞いていないアラートが表示される。

これは、Laravelのロードバランサー設定が抜けているとこういったことになります。

app/Http/Middleware/TrustProxies.phpを適宜修正しましょう。

ロードバランサーの設定については同じページの「ロードバランサーの設定」に記載しています。

CSSやJS関連が反映されていない!2

Laravelでアプリを作成するときに、ビルドツールを使う人は多いかと思います。

その時に、.gitignoreにもしpublic/cssなどを対象にしていたら外す必要があります。

というのも、Heorokuのデプロイで行うのは、npm run prodのため、devで生成されるCSSやJSは生成されません。

そのために、developからproductionにnpmを移動する方もいるみたいですが、1番楽だと思うのはgitに含めてしまう方法だと思ったので、私はこの方法でデプロイしています。

public/css
public/js
public/mix-manifest.json

//public/css
//public/js
//public/mix-manifest.json

この設定をしていたのを忘れていて、なかなかCSSが反映されなくてちょっとハマりましたので、皆さんも気を付けて下さい。

メンテナンス画面

一時的に表示したくないときは、メンテナンス画面が設定で用意されています。

「Settings」タブをクリックして、下の方に「Maintenance Mode」があるので、有効にするとメンテナンス画面になります。

LaravelをHerokuにデプロイする方法(GUI操作メイン)

Basic認証

Basic認証はHerokuの機能にはありませんが、通常のサーバーと同じ様に.htaccessにBasic認証の設定を記述して、.htpasswdを配置するだけです。

AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile /app/public/.htpasswd
require valid-user

※↑Basic認証の部分だけ抽出

「/app」がルートディレクトリになります。

 

そして、このファイルを作るのは本番ではなくBasic認証用に新しくブランチに作るようにすると良いと思います。

本番用のブランチに何回も試験の度に履歴が残るのは宜しくないので、私はそうしています。

まとめ

LaravelをHerokuにデプロイするまでの流れを書いてきました。

冒頭でもお話ししましたが、多くの記事はコマンドラインでアプリの作成からデプロイまでやっているの印象ですが、GUIがせっかく使えるのであれば使った方がやっぱり便利ですし、ハードルも低くなりますし、Herokuの全体像が分かりやすいかなと思い記事にしました。

Heorokuは無料で使えるのも良いですし、こんなにあっと言う間にインフラを立ち上げられるのは個人で製作している人間としても非常に大きなメリットです。

皆さんも気軽に作ったアプリをHerokuで公開してみてはいかがでしょうか。

以上、「LaravelをHerokuにデプロイ+データベースの接続、表示まで(GUI操作メイン)」でした!

 

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットでのWordPressの立ち上げお手伝いのチケット販実績240件以上!WordPressのカスタマイズから、WEBサービス制作、ホームページ制作のご相談はお任せ下さい。

Toshi Seitoをフォローする

いいね!をしてWordPressの
お役立ち情報を受け取る!

TEDASK(テダスク)

コメント

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