こんにちは！

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

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

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

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

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

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

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

こちらのHerokuをGithub経由でデプロイする記事ですが、2022年4月16日にHerokuのインシデント（Heroku/Travis-CIのOAuthトークンの流出）により、現在（2022年5月12日時点）はGithub経由でのデプロイはできない状態です。
現在のデプロイ方法はgitを使ったコマンドラインからのデプロイのみとなりますので、今後そのやり方は別途記事でご紹介する予定です。

前提の環境
Herokuでサービスを運営する上での注意
1. 独自ドメインにwwwが付く
2. データベースがPostgreSQLが推奨されている
HerokuのCliのインストール
Herokuの利用登録
アプリの作成
GitHubと接続
ビルドパックの設定
PostgreSQLのインストール
Config関連の設定
Heorokuデプロイ用に必要なファイルの作成と編集
1. Procfileの作成
2. ロードバランサーの設定
3. npm run prodでCSSとJSをコンパイル
いよいよデプロイ
コマンドを実行できるようにするためのHerokuとGitの連動
migrateの実行
エラーTips1
1. heroku runやheroku loginなどで内部コマンドまたは外部コマンド、操作可能なプログラムまたはパッチファイルとして認識されていませんと表示される
2. SQLSTATE[22023]: invalid parameter value 7 Error:がでて、laravelでmigrate出来ない
サイトを見てみよう
エラーTips2
1. Heorokuにデプロイ後にForbiddenが表示される
2. CSSやJS関連が反映されていない！1
3. CSSやJS関連が反映されていない！2
メンテナンス画面
Basic認証
独自ドメインを使っている場合はSSLの更新をAutoに変更
まとめ

前提の環境

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の利用登録

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

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

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

アプリの作成

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

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

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

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

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

GitHubと接続

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

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

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

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

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

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

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

ビルドパックの設定

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

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

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

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

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

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

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

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

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

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

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

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

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

PostgreSQLのインストール

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

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

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

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

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

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

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

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

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

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

Config関連の設定

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

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

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

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

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

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

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

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

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

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

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 に新しいプロジェクトをデプロイする方法を示します。

npm run prodでCSSとJSをコンパイル

もしLaravel mixを使っている場合はデプロイ直前で、npm run prodでCSSとJSをコンパイルして、gituhubにpushします。

いよいよデプロイ

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

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

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

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

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

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

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

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

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

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

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

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

コマンドは

$  heroku git:remote -a アプリ名

です。

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

今回の例でいうと

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

となります。

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

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

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

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

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

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

migrateの実行

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

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

migrateの場合は

heroku run php artisan migrate

です。

コマンドを本当に実行するかを聞かれますが、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出来ない

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

サイトを見てみよう

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

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

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

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

エラーTips2

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

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

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

heroku logs --tail

を実行します。

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

「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

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

しかも、フォームを入力しようとすると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」があるので、有効にするとメンテナンス画面になります。

Basic認証

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

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

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

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

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

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

独自ドメインを使っている場合はSSLの更新をAutoに変更

独自ドメインについては別途記事を用意する予定ですが、ここでも一応書いておきます。

もし独自ドメインを使っていて、SSLを有効にしている場合はSSLの期限切れの状態が発生しないようにSSLの自動更新を設定しておくと良いです。

heroku certs:auto:enable

まとめ

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

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

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

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

以上、「LaravelをHerokuにデプロイ＋データベースの接続、表示まで（GUI操作メイン）」でした！

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