Build Chirper with Blade
https://bootcamp.laravel.com/blade/installation
フロントエンドとしてBladeを選んだのでこちらのルートになります。
"chirper"という名前でプロジェクトを作成します。
$composer create-project laravel/laravel chirper
コンポーザを使ってプロジェクトを作成するという普通の手順ですね。
以下のように表示されれば作成です。
 |
| Laravelプロジェクトを作成 |
コンポーザをインストールしていない場合は以下の手順に従ってインストールとZIPの設定しておいて下さい。
https://web2sunny.blogspot.com/2023/02/laravel_52.html
実行するのは"C:\xampp\htdocs"の下です。
私の環境ではXAMPPをインストールしているのでXAMPPを起動するとブラウザ上で確認ができます。
$cd chirper $php artisan serveこれでhttp://localhost:8000にアクセスするとページが表示されます。
ただ上記したようにXAMPPを使うのでこれはスキップします。
DB
チュートリアルではSQLiteを使うようですね。
しかしせっかくなのでMySQLを使うことにします。
チュートリアル上はSQLite
DB_CONNECTION=sqlite
デフォルトでMySQLを使うようになっていますね。ローカルでDBを作ってDB名、ユーザ名、パスワードを設定することにします。
https://web2sunny.blogspot.com/2023/03/xamppmysqldb.html
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=chirper_db DB_USERNAME=chirper_user DB_PASSWORD=test0001
Installation via Docker
Laravel Sailを使ったDockerの環境の構築が記載されています。
Laravel Sail（セイル、帆、帆船）は、LaravelのデフォルトのDocker開発環境を操作するための軽量コマンドラインインターフェイスです。 Sailは、Dockerの経験がなくても、PHP、MySQL、Redisを使用してLaravelアプリケーションを構築するための優れた出発点を提供します。
ただDockerには詳しくないのとXAMPPの環境があるので、ここもスキップします。
Installing Laravel Breeze
最低限の機能を含んだBreezeのインストールを行います。
$composer require laravel/breeze --dev $php artisan breeze:install blade
$npm run dev 'npm' is not recognized as an internal or external command, operable program or batch file.
なんかエラーになりました。npmがインストールされてないようです。
途中で手順を飛ばしたせいですかね？
そもそもnpmってなんでしたっけ？
Node Package Manager の略でJavaScript系のパッケージ管理アプリのようですね。
パッケージ間に依存関係がある場合でもまとめてインストールしてくれるようです。
インストーラをダウンロードして次へと進んでいくだけです。
npm run devを再実行するとviteが無いってメッセージ、めんどくさいですね。
$npm run dev > dev > vite 'vite' is not recognized as an internal or external command, operable program or batch file.
Laravel 9.x アセットの構築（Vite）
ここの記述に従ってViteをインストールしてきます。
Nodeのインストール
ViteとLaravelプラグインを実行する前に、Node.js（１６以上）とNPMを確実にインストールしてください。
だそうです。
もう終わってます。
ViteとLaravelプラグインのインストールを行います。
$npm install
92のパッケージがインストールされたようです。npmのマイナーバージョンアップがあるようですがこのままにしておきます。
 |
| npm install の実行結果 |
今度こそ上手くいったようです。
http://localhost:5173/にアクセスします。
This is the Vite development server that provides Hot Module Replacement for your Laravel application.
と表示されるのでVite開発用のサーバでソースコードを変更しても自動的に反映されて表示されるのでしょう。
$php artisan migrate
DB関連のエラーになります。
XAMPPの起動とMySQL関連の設定をするのを忘れていました。
.envのDB関連の設定を行11 - 16に行います。
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=chirper_db DB_USERNAME=chirper_user DB_PASSWORD=test0001
再実行して、上手くいきました。
phpMyAdminで確認するとテーブルが出来ていました。
http://localhostにアクセスするとアプリのトップ画面が表示されます。
後日、実行したら以下のようなエラーになりました。
開発用サーバが動いてないとエラーになるんですね。
$npm run dev
を実行して再ロードしたら、ユーザ登録画面が表示されました。
テスト用に適当にユーザを作成します。
ユーザ名、パスワード、Eメールを適当に入力して「Register」ボタンを押します。
ダッシュボート画面が表示されました。
 |
| ダッシュボード画面 |
ログアウトしてから直接「http://localhost/dashboard」をブラウザから入力しましたが、ログイン画面にリダイレクトされました。
認証機能もちゃんと動いているようです。
 |
| 直接URLを入力してもログイン画面へリダイレクトする |
では次のチャプターに行きましょう。
Continue to start creating Chirps...
0 件のコメント:
コメントを投稿