Laravel9、Laravel10 をカラフルボックス(ColorfulBox)にcomposerを使ってインストール、DB接続、Vue.js、認証ライブラリLaravelBreeze(Inertia)導入まで

laravel

レンタルサーバーのカラフルボックス(colorfulbox)にLaravel9や10をインストールします。

カラフルボックスは最初からgitやcomposerの2系が入っており、phpもドメイン・サブドメインごとにバージョン変更できて趣味プログラマーには最適です。また作業の大半が管理画面cPanelから簡単にできてらくちんなのでオススメです。

目次

インストール先のドメイン(サブドメイン)とディレクトリを作成

管理画面のcPanelからドメインを登録します。サブドメインも同じ場所から登録です。

新しいドメインを作成ボタンを押します。

今回は例として、契約中のカラフルボックス提供ドメインにサブドメインを追加する形で進めます。
・カラフルボックスから取得したドメインが【user.cfbx.jp】
・作成するサブドメインの先頭を【laratest】にする
この場合
→ドメイン入力欄には【 laratest.user.cfbx.jp 】と入力します。

ディレクトリの指定はpublic_html配下に好きな名前で入力します。自分は作成したドメインと同じ名前にしています。

最後に「送信」ボタンを押して

これでcPanelのファイルマネージャを見ると、ディレクトリが確認できます。

これでインストール先のディレクトリが準備できました。

インストールディレクト配下で、PHPのエラー表示をONに変更

インストール先のディレクトリは、cPanelからドメイン(サブドメイン)ごとにPHP設定が変更できます。ここでPHPのエラー表示をONにしておきましょう。

最後に「適応」ボタンを忘れずに

PHPバージョンを確認

SSHクライアントや、cPanelのターミナルでコマンドを使い続いてPHPのバージョンを確認します。
一緒に、composerと git のバージョンも見ておきます。

ここでは簡単に、cPanelのTerminalを使います。
※お好きなSSHクライアントでOKですが、レンタルサーバーの最安値プラン等では、SSH接続へのメモリ割り当てが低くすぐハングアップすることがあります。VScode等はリソースそこそこくいます。最近は

$ php --version
$ composer --version
$ git --version
$php --version 
 PHP 7.4.13 (cli) (built: Dec  7 2023 10:41:18) (NTS) 
 Copyright (c) The PHP Group 
 Zend Engine v4.2.13, Copyright (c) Zend Technologies  with Zend OPcache v8.2.13,
 Copyright (c), by Zend Technologies
$composer --version 
 Composer version 2.6.5 2023-10-06 10:11:52 
$git --version 
 git version 2.42.0

phpが7.4系になっていることが分かります。Laravel9はPHP8以上、Laravel9はPHP8.1がインストール要件になっているため変更が必要です。

インストールディレクトリのPHPバージョンをcPanelから変更

cPanelメニューのMultiPHPマネージャーを開きます。

該当のドメイン(またはサブドメイン)を選び、
プルダウンからPHPバージョンを変更します。今回は8.2を選びました。
「適用」ボタンを押して変更します。

バージョンのプルダウンを変更(ここでは8.2)して、適応を押します。

composerで使われるPHP(CLI)のバージョンを上げる

インストールディレクトリ内でPHPバージョン確認すると、変更済みに見えるかもしれません。
しかし、ターミナルでcomposerコマンドを実行した時には、サーバーデフォルト( /home/ユーザー名/ で php –version 確認した時のPHPバージョン)が使われます。そのため変更が必要です。

以下の記事を参考に変更しておきます。

これで8.2になりました。

インストールディレクトリを空にする

まずはインストール先のディレクトリに移動して、自動生成されたファイルをディレクトリ内から削除して空にします。

一応、全削除時は1つずつ対象を確認する「-i」オプションを付けます。
y:削除実行
n:キャンセル

#インストール予定のディレクトリへ移動
cd cd public_html/laratest.user.cfbox.jp

#隠しファイルを含め、全ファイルを確認
ls -a 
>.  ..  .htaccess  .well-known  cgi-bin

#ディレクトリ配下のファイルとフォルダを全削除
rm -ri *
>rm: ディレクトリ 'cgi-bin' を削除しますか? y


#ディレクトリ配下の隠しフォルダを全削除
rm -ri ./.*
>rm: refusing to remove '.' or '..' directory: skipping './.'
>rm: refusing to remove '.' or '..' directory: skipping './..'
>rm: 通常ファイル './.htaccess' を削除しますか? y
>rm: ディレクトリ './.well-known' 配下に入りますか? y
>rm: ディレクトリ './.well-known/pki-validation' を削除しますか? y
>rm: ディレクトリ './.well-known' を削除しますか? y

#再度ファイルの残りを確認
ls -a 
>.  ..

確認不要で一気に消すなら以下。「 -i 」のかわりに「 -f 」を付けるとイッパツ全削除

#ディレクトリ配下のファイルとフォルダを全削除
rm -rf *

#ディレクトリ配下の隠しフォルダを全削除
rm -rf ./.*

一括削除に関しては、こちらも参考にしてください。

laravelのインストール

ディレクトリ内が空っぽになったら、バージョンを指定してインストールします。

composer create-project "laravel/laravel:バージョン指定"  インストールディレクトリ名  --prefer-dist

現在のディレクトリ配下にインストールするには、ディレクトリ指定をドット「 .」で記載

#バージョン9系の最新版(ハット記号 ^ で記載)
composer create-project  "laravel/laravel:^9"  .  --prefer-dist

#バージョン9系の最新版(アスタリスク * で記載)
composer create-project  "laravel/laravel:9.*"  .  --prefer-dist

#バージョン指定
composer create-project  "laravel/laravel:9.3.0"  .  --prefer-dist

インストールが完了したら、laravelのartisanコマンドを使い、バージョンを確認してみます。

php artisan --version
Laravel Framework 9.52.16

これで完了です。

ブラウザで確認

Laravelは初期状態では公開用のURLがインストールドメイン/public/index.phpになります(後から変更できます)確認は以下のようにURLに「 /public 」を付けます。更に「index.php」をつけても勿論OKです。

インストールドメイン(サブドメイン)の例
 → laratest.user.cfbx.jp
確認用にブラウザで入力するURLは下記いずれかです。
 → https://laratest.user.cfbx.jp/public/
 → https://laratest.user.cfbx.jp/public/index.php

DB(MySQL / MariaDB)の設定

設定ファイルは、「.env」ファイルにあります。FTPでもVScodeでも好きな方法で更新します。

ここでは管理画面cPanelのファイルマネージャーを使っています。

もしファイルマネージャーに「.env」が表示されていない場合は「設定」を開き

非表示ファイルの表示を選択して「Save」を押します。

「.env」右クリックでEditを選びます。

あらかじめ作成しておいた、データベース名、ユーザー名、パスワードを入力します。

最後に上書き保存を忘れずに。

DBの接続確認を兼ねてユーザーテーブルを作成

前段でDB設定が正しければ、とりあえずmigrateコマンドを打ってみるとテーブルが作成されます。

$ php artisan migrate
 > INFO  Preparing database.
 > Creating migration table 
 > INFO  Running migrations.
 > 2014_10_12_000000_create_users_table ..... 3ms DONE
 > 2014_10_12_100000_create_password_resets_table ..... 3ms DONE
 > 2019_08_19_000000_create_failed_jobs_table ......... 3ms DONE
 > 2019_12_14_000001_create_personal_access_tokens_table .... 4ms DONE

カラフルボックスの管理画面cPanelから、phpMyadminを選び、作成されたDBを確認します。

タイムゾーン、言語の設定

初期設定を続けます。

//インストールディレクトリ/config/app.php を変更
'timezone' => 'Asia/Tokyo',
'locale' => 'ja',

デバッガー laravel-debugbar の導入

ターミナルからcomposerでデバッグバーを導入します。お好きなSSHクライアントか、cPanelのTerminalを使います。

#
composer require barryvdh/laravel-debugbar

完了してから画面を再読み込みすると、デバッグバーが表示されます。
画面左下のアイコンをクリックすると大きくなります。

なお、デバッグバーは「.env」ファイルの設定で消せます。
表示 APP_DEBUG=true
消す APP_DEBUG=false

本番環境ではfalseにして、gitの除外ファイルにも登録しておきます。また、キャッシュが残って表示が消えない場合は、artisanコマンドで、キャッシュおよびコンフィグファイルのキャッシュを削除します。

php artisan cache:clear
php artisan config:clear

言語ファイルの準備(エラー文言等の日本語化)

言語ファイルは下記にあります。英語(en)をコピーして日本語(ja)を作成します。

インストールディレクトリ/lang/en

コピーを選び、コピー先のディレクトリ名に「ja」を指定します。

完了すると、「ja」ディレクトリの中にいくつかの翻訳ファイルが作成されます。
このままでは英語なので、中身を日本語に書き換えます。

日本語化されたファイルは、リーダブル https://readouble.com/ からコピペできます。

インストールしたバージョンの日本語ページへ進み、インデックスページ一番下の言語ファイルを見て内容をコピーペーストします。

リーダブルの4つのファイル内容をそれぞれコピペして貼り付けし、上書き保存します。

これで日本語化ファイルが準備できました。

認証ライブラリ Laravel Breeze(Inertia)導入

Laravel Breezeは、ログイン、ユーザー登録、パスワードリセット、メール確認、パスワード確認などのいわゆる認証とログイン関連の機能を簡単に実装するためのライブラリです。デフォルトではTailwind CSSとBladeテンプレートで作成されます。こちらは公式ドキュメントに詳しい解説がありますので、今回はVue.jsを使った Inertia (イナーシャ)を導入してみます。

日本語ドキュメントのリーダブルも参考にします。
https://readouble.com/laravel/9.x/ja/starter-kits.html#laravel-breeze

ターミナルでインストールしたディレクトリの直下でcomposerで実施します

#念のためカレントディレクトリを確認
pwd
>/home/ユーザ名/public_html/インストールディレクトリ

#Breezeをバージョンを1系に指定してインストール
composer require laravel/breeze:^1 --dev


php artisan breeze:install vue
npm install

Inertia (イナーシャ)は旧版を使う場合

Inertia (イナーシャ)は2023年1月にメジャーアップデートがありました。
旧版を使うには下記対応を行います

/home/ユーザー/public_html/インストールディレクトリ/package.json に
下記2行を追記


    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
    }

続いて

/home/ユーザー/public_html/インストールディレクトリ/resources/js/app.js
1行変更

// 変更前
//import { createInertiaApp } from '@inertiajs/vue3';
//  ↓
// 変更後
import { createInertiaApp } from '@inertiajs/inertia-vue3';

ターミナルでパッケージインストール

npm install


よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次