# To Do アプリのデプロイ

クレジットカードが必要です。

このアプリケーションはデータベースが必要なため、Heroku から提供されている Add-on を使用します。Add-on を使用するには、Heroku アカウントの正当性を確認しておく必要があります。アカウントの正当性を確認する方法として、クレジットカードの入力が必要です。このページのデプロイを実施することにより料金は発生しませんが、当該正当性の確認のためにクレジットカードの登録が必要です。クレジットカードの登録方法については、掲示板アプリのデプロイを参照してください。

# Heroku にデプロイするための準備

以下のファイルを作成・編集します。

Procfile
app/Http/Middleware/ForceHttps.php
app/Providers/AppServiceProvider.php

# Procfile

Procfile を作成し、以下の一行を記載します。

~~/Procfile

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

# ForceHttps.php

ForceHttps.php を作成し、以下の内容を記載します。

~~/app/Http/Middleware/ForceHttps.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;

class ForceHttps
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        if (App::environment(['staging', 'production']) && $_SERVER["HTTP_X_FORWARDED_PROTO"] != 'https') {
            return redirect()->secure($request->getRequestUri());
        }
        return $next($request);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# AppServiceProvider.php

AppServiceProvider.php を以下のように修正します。

~~/app/Providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\URL;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        if (App::environment(['staging', 'production'])) {
            URL::forceScheme('https');
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 補足(TodoRoot.jsx)

TodoRoot.jsx の内容で、値が /api/todos/ となっていた場合 /api/todos に修正してください。

~~/resources/js/components/TodoRoot.jsx

...
function TodoRoot() {
  const [items, setItems] = useState([])

  const fetchItems = async () => {
    try {
      const { headers, data } = await axios.get('/api/todos')
      setItems(data)
      // console.log('request headers', headers)
    } catch (err) {
      console.error('request error', err.request.headers)
    }
  }
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14

一連の作業を実施すると以下のようになっているはずです。

# GitHub リポジトリに反映する

手元の状態がすべて GitHub 上に反映されているようにしてください。

コマンド例

※ GitHub Desktop を使用し Push しても問題ありません。

$ git add .
$ git commit -m "update files"
$ git push origin main

1
2
3

# Heroku 上でアプリを作成する

流れはポートフォリオ・掲示板のデプロイと同じです。

Heroku のダッシュボード (opens new window) で New → Create new app を選択します。

アプリ名を入力して、アプリを作成します。

ここでは、ts-user-web-todo と入力していますが、任意の値を入力してください。すでに使用されている値は使用できません。ここで入力した値は、結果的に https://{アプリ名}.herokuapp.com/ という URL で全世界に公開されます。

Create App を押します。

# Add-on を追加する

掲示板アプリはデータベースを使用します。Heroku には Add-on という形でデータベースを連携することができます。

「Resources」タブを選択し、「Add-ons」のセクションから JowsDB MySQL と入力し、「JowsDB MySQL」を選択します。

「Plan name」で「Free」が選択されていることを確認し、「Submit Order Form」をクリックしてください。

# データベースをセットアップする

しばらくすると JawsDB MySQL が選択できるようになります。「JawsDB MySQL」をクリックします。

以下のような画面が表示されます。この画面はデータベースに接続するための情報が表示されています。このページではパスワードなどが表示されていますが、実際に操作する際は、第三者と値を共有しないように注意してください。

...

# Heroku と GitHub リポジトリを連携する

ポートフォリオのデプロイ時に、GitHub と認証情報を連携しているため、認証の手順はありません。そのままリポジトリを選択する流れとなります。

「Deploy」タブが開かれていることを確認します。
「Deployment method」のセクションで「GitHub」を選択します。
「Connect to GitHub」のセクションで自分のユーザー名が選択されていることを確認し、掲示板のリポジトリ名を入力し、「Search」をクリックします。
デプロイしたいリポジトリ（掲示板のリポジトリ）の「Connect」をクリックします。

# Node.js をビルドパックに追加する

「Settings」タブから「Buildpacks」セクション → 「Add buildpack」と進みます。

「nodejs」を選択し、「Save Changes」をクリックします。

続けて、「Add buildpack」から「php」を選択し、「Save Changes」をクリックします。

「heroku/nodejs」と「heroku/php」の 2 つが追加されていることを確認します。

# デプロイする

「Deploy」タブに戻ります。

自動デプロイを有効にします。「Automatic deploys」のセクションで「Choose a branch to deploy」の項目から、公開したいブランチ（例では main ブランチ）が選択されていることを確認し、「Enable Automatic Deploys」をクリックします。
初回に手動デプロイを実行します。「Manual deploy」のセクションに移動します。「Choose a branch to deploy」でデプロイしたいブランチ (例では main ブランチ)を選択し、 Deploy Branch をクリックします。

デプロイ作業が始まるため、しばらく待機します。デプロイが完了すると、以下のように緑色のチェックマークが表示されます。

# 表示の確認

画面右上の「Open App」のページを開き、ページがどのように表示されているか確認してください。

500 Server Error が以下のように出ていれば意図通りです。

このエラーは、まだ Laravel の設定やデータベースのマイグレーション（テーブルを用意）等行っていないために表示されていると推測します。

# 環境変数を設定する

Laravel の設定とデータベースにうまくつながるように環境変数の設定を行います。

Heroku の管理画面から、「Settings」タブ →「Config Vars」のセクション →「Config Vars」に進みます。

KEY と VALUE を次のように入力し Add をクリックして追加します。

KEY	VALUE	確認する場所
APP_DEBUG	false	固定値
APP_ENV	production	固定値
APP_KEY	base64:xxxxxxx... ※1	.env ファイルを確認
APP_NAME	To Do App	固定値 (任意の値)
APP_URL	`https://xxxxx.herokuapp.com` ※2	Heroku アプリの URL
DB_CONNECTION	mysql	固定値
DB_DATABASE	xxxxx ※３	JawsDB の Database を確認
DB_HOST	xxxxx ※３	JawsDB の Host を確認
DB_PASSWORD	xxxxx ※３	JawsDB の Password を確認
DB_PORT	3306 ※３	固定値 (JawsDB の Port を確認)
DB_USERNAME	xxxxx ※３	JawsDB の Username を確認
JAWSDB_URL	`mysql://x:x@x.x.com:3306/x`	変更しない
SANCTUM_STATEFUL_DOMAINS	`xxxxx.herokuapp.com` ※2	Heroku アプリのドメイン
SESSION_DRIVER	database	固定値

※1

APP_KEY の値は ~~/.env 内に記載されている値をコピー＆ペーストします。

※2

APP_URL 及び SANCTUM_STATEFUL_DOMAINS はアプリ名から値を決定します。アプリ名は以下の場所から確認できます。

あるいは、実際にデプロイしている URL から確認できます。

APP_URL... https://{アプリ名}.herokuapp.com
SANCTUM_STATEFUL_DOMAINS... {アプリ名}.herokuapp.com

上記の命名法則で値を設定してください。

※3

Jaws DB は Heroku のアプリ管理画面の Resources タブから、JawsDB MySQL を開き確認します。

キーと JawDB の表示の対応付は以下の通りです。

KEY	JawsDB での表示
DB_HOST	Host
DB_USERNAME	Username
DB_PASSWORD	Password
DB_PORT	Port
DB_DATABASE	Database

すべて入力したら、リロードして画面を確認してください。以下のように表示されればうまく設定できています。そのまま、Register をクリックして登録画面に移動してください。

500 Server Error が表示されます。（まだマイグレーションが完了していません。）

Heroku の管理画面右上から「More」→「Run Console」を開きます。

php artisan migrate と入力して「Run」をクリックします。

Do you really wish to run this command? (yes/no) [no] という確認プロンプトが表示されるので、 yes と入力し Enter を押下します。

次のように表示されればマイグレーション成功です。

# 再度表示の確認

もう一度、登録ページを開き確認します。うまく表示されていれば成功です。

動作するか確認します。

To Do アプリの公開は以上です。スマートフォンで表示したり、他の人の端末に URL を共有したりしても、うまく動作するか確認してみましょう。

← 掲示板アプリのデプロイ制作物の公開まとめ →