MAMP環境でLaravel10を構築する（Apache＋PHP8.2+MySQL）

2024年2月17日 2024年2月17日

株式会社ライフ

Docker環境で色々やっているんですが、どうもコンテナの接続でうまくいかないことがあり、とりあえず何をするにも小さなところから確認をしていくしか、自分は理解が追いつかないので今回もまずはLaravel構築して、基本の動きを確認しながら進めていこうかなと思います。

laravelプロジェクトを作成する

とりあえず、Laravelないと始まらないのでコマンドで作成します。

laravel new example-app

初期インストール時には何も設定はしないです。

この時vendorディレクトリも作成されていて、この中にLaravelに必要なライブラリが格納されてます。

一旦使えるコマンドの確認をする

php artisan -h

使えるコマンドは以下で確認してねとのこと

php artisan list

個人的に深掘りたいのは、「about」「tinker」「cache:table」「db:monitor」「db:seed」「lang:publish」でmake系のコマンドも気になるんだけど、一旦今回はここらへんをみていきたい。

Laravelのaboutコマンドってなんだろう

説明としては以下

Display basic information about your application

和訳：アプリケーションの基本情報を表示する

まぁ書いてある通りなんだけど、どんなことを照会できるのかというと

実際には実行してもらうのが早いが「Environment」や「Cache」「Drivers」の情報が環境構築後に実行したところ表示がされた。

Laravelのtinkerコマンドってなんだろう

説明としては以下

Interact with your application

和訳：アプリケーションとの対話

何を対話する必要があるのかというと「【Laravel】対話モード「tinker」の使い方を解説」いのうえさんがすごく分かりやすく実演してくれてます。

要は、Contorollerやモデルに書いているような処理を書いてから意図した通りに動かなかった時に簡単に手元でデバッグして検証することが可能な方法ですよってことでした。

Laravelのcache:tableコマンドってなんだろう

説明としては以下

Create a migration for the cache database table

和訳：キャッシュ・データベース・テーブルのマイグレーションを作成する

これは勉強してみてよかった、キャッシュなんて削除する前提のものっていう思い込みがあったので、キャッシュを使ったテストを実施したり、キャッシュをシステム上で持ちたい時の一案として使えるのか。すごいぞLaravel

Laravelのdb:monitorコマンドってなんだろう

説明としては以下

Monitor the number of connections on the specified database

和訳：指定したデータベースの接続数を監視する

これは運用で、すごい役立ちそうなんじゃって思うけど当たり前に本番環境ではDBにより負荷をかけてしまうから、注意しましょうねとデータベースのクエリパフォーマンス情報を取得するときに使うコマンドです。

Laravelのdb:seedコマンドってなんだろう

説明としては以下

Seed the database with records

和訳：データベースにレコードをシードする

し、し、シードとは「シーダーについて（基本）」をみたらスッキリです。

テストデータの流し込みの時に使用するよってコマンドなんですが、factoryを使ってランダムな指定個数分のテストレコードが作成できる他に、固定での流し込みデータとかも定義ができるので、各環境ごとに流したいマスタデータとかの流し込みにも使えたりするコマンドですね。

Laravelのlang:publishコマンドってなんだろう

説明としては以下

Publish all language files that are available for customization

和訳：カスタマイズ可能なすべての言語ファイルを公開する。

元々は標準でresourcesフォルダの配下に存在していたのですが、ある日からコマンドを実行しないと表示がされなくなってしまいました。

こんな感じで一旦気になっているコマンドは知れたので、Docker環境でやりたいとしているLaravel10でVueを使った画面表示ができるように設定をしてみたいと思います。

Laravel10でVue3を利用する環境構築

本当にいい時代になったもので、自分がやりたいとしているようなことって、既に誰かやっているんですよね。

「Laravel10でVue3を利用する環境構築」こちらのサイトを参考に進めてみましょう。

この記事を書いてくれた「@kenji123」さんには感謝です。

nodeのバージョンを確認する

example-app % node -v
v18.18.2

大きな差異がなくて安心

Viteの設定をする前に自分のpackage.jsonの中身確認する

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0.0",
        "vite": "^5.0.0"
    }
}

確認完了後コマンドを実行する

実行後以下が追加された。

"devDependencies": {
        "@vitejs/plugin-vue": "^5.0.4",

コマンド完了後、vite.config.jsを設定する。

App.vueファイルを作成する

<template>
  <div class="page">
    <p>{{ counter }}</p>
    <button @click="counter += 1">
      click!
    </button>
  </div>
 </template>

 <script>
 export default {
  data () {
    return {
      counter: 0,
    }
  },
 }
 </script>

一旦こんな感じの書いて画面の表示を確認すると