WEB/システム/IT技術ブログ

xampp環境のLaravelプロジェクトでMailHogを活用します。

時に開発環境でのメールテストは面倒です。
例えば、ローカルからメールを送信する環境を構築して、テスト用メールアドレスを作成して、メールを送信する度にメールボックスを確認するなど。
さらに、誤送信に気を使いつつなど、コストとリスクがあります。
そこでMailHogで気軽なローカル開発環境を構築してみます。

MailHogを使うと、全てのメールはローカルのMailHogメールボックスに送信されるので、テスト用のメールアドレスを用意する必要もなければ、誤送信の心配もありません。

  • Windows 11 Home
  • xampp 8.1.25
  • Laravel 9.52.0
  • MailHog v1.0.0

MailHogをダウンロード

MailHogの公式サイトから、Windows用の実行ファイル「MailHog_windows_amd64.exe」をダウンロードします。
GitHub – mailhog/MailHog: Web and API based SMTP testing

ダウンロードしたファイルを任意の場所、例えば今回は以下の場所に設置します。

C:\xampp-8.1.25\sendmail\MailHog_windows_amd64.exe

ある日、Reactプロジェクトにおけるダッシュボードのフロントをデザインなしで実装する案件がありました。
デザイン指定がないとはいえ、それっぽいモダンなレイアウトは確保したい。
そこで今回「Flowbite React」を試してみます。
Flowbite React Components

「Flowbite」は「Tailwind CSS」のコンポーネントで、クラスを指定するだけでモダンな見た目を提供してくれます。
応用性がある反面、クラスの指定が多少細かいので冗長になりがちです。
「Flowbite React」では、簡単な引数を指定するだけで、Flowbiteを適用することができます。

今回試した環境は以下の通りです。Tailwind CSSなどはインストール済みを前提とします。

  • Windows 11 Home
  • Node.js 16.19.1
  • React 18.2.0
  • Tailwind CSS 3.2.7
  • Flowbite 0.4.3

Laravelでデータベースをテストします。
今回は、新規プロジェクトではなく、既存プロジェクトをテストする前提で進めていきます。

  • PHP 8.0.25
  • Laravel 9.52.0
  • SQLite

テスト用のDBを用意する

データベースをテストする際、安全なDBが必要です。
つまり、テストで本番環境のDBを使うわけにはいきません。また、場合によっては開発環境のDBを汚すこともあると思います。

そこで、今回はテスト用のDBを用意してみます。
例えば、SQLiteで用意したテスト用DB「testing」を使用します。

まず、空のファイル「/database/database_test.sqlite」を用意します。Linux系であればtouchコマンド、Windowsであればテキストファイルを新規作成します。

次に「/config/database.php」を開きます。
「sqlite」ブロックをコピペして「testing」にリネームします。

いつものようにLaravelのFakerでダミーデータを作成しようとしたら、関数joinでエラーになってしまいました。

join(): Argument #2 ($array) must be of type ?array, string given

そういえば、最近、開発環境をPHP7.xからPHP8.xにアップグレードしたばかりでした。

調べてみると、ライブラリ「fzaninotto / Faker」は2020年に開発がストップしていて、PHP8には対応していないようです。
fzaninotto/Faker: Faker is a PHP library that generates fake data for you

代替のライブラリとしてはFakerPHPがあるようです。
FakerPHP / Faker

早速、ライブラリをインストールしてみます。composer.jsonから古いライブラリを削除します。

		"fzaninotto/faker": "^1.4",

続けて新しいライブラリを追加して、Composerインストールを実行します。

		"fakerphp/faker": "^1.9.1",

インストール後、再度Fakerを実行したところ、無事にエラーは解消されました。

Laravel HomesteadでWindowsに開発環境を作ります。

これまでxamppをメインにWindowsで開発をしてきました。
モダンな環境でということでwsl & Dockerに乗り換えたのですが、環境をアップグレードする度にCPUの負荷が上がったり、メモリを大量に消費したり。。
チューニングの繰り返しで作業にならないので、安定した環境を求めてLaravel Homesteadを試してみます。

ちなみにHomesteadに必要なVirtualBoxとVagrantはインストール済みを前提とします。

  • Windows 11 Home 64bit
  • VirtualBox 7.0.6
  • Vagrant 2.3.4

Homesteadをインストール

まず、BoxをVagrantに追加します。Windows PowerShellを起動して以下のコマンドを実行します。

> vagrant box add laravel/homestead
==> box: Loading metadata for box 'laravel/homestead'
    box: URL: https://vagrantcloud.com/laravel/homestead
This box can work with multiple providers! The providers that it
can work with are listed below. Please review the list and choose
the provider you will be working with.

1) libvirt
2) parallels
3) virtualbox

Enter your choice:

プロバイダの選択を求められるので、今回はVirtualBoxの「3」を選択します。
こちらの処理に5分ほどかかりました。

開発環境用に仮想マシンが必要になったので、WindowsにVirtualBoxとVagrantをインストールしてみます。

ここ最近ではWSLも話題です。実際に使用してみたのですが、CPUへの高負荷、メモリ大量消費、チューニングの繰り返しで、仕事にならないので、当面の開発環境としてVagrantを試してみたいと思いました。

  • Windows 11 Home 64bit
  • VirtualBox 7.0.6
  • Vagrant 2.3.4

VirtualBoxのインストール

まずはVirtualBoxをインストールします。
Oracle VM VirtualBox
公式サイトのメニュー「Downloads」から「Windows hosts」をクリックして、インストーラをダウンロードします。
ダウンロードしたファイル「VirtualBox-7.0.6-155176-Win.exe」を実行し、インストールを開始します。

基本的にデフォルトでのインストールで問題ありません。「Next」をクリックしてインストールを進めます。
途中で、ネットワークが一時的に切断される注意書きが表示されます。問題なければ、インストールを続行します。

以下の画面が表示されたらインストールは完了です。

これまで、開発環境にはxamppやDockerを使用していました。
今回、Dockerを簡易的に操作できるという「Laravel Sail」での開発環境構築を試してみます。

今回、開発環境を構築したのは以下の環境です。

  • Windows 11 Home
  • Ubuntu-22.04 WSL2
  • Docker Desktop 4.15.0
  • Laravel 9.52.0
  • Laravel Sail 1.20

WindowsにUbuntuやDockerはインストール済みとします。
また、新規プロジェクトではなく、既存プロジェクトに適用してみました。プロジェクトソースはWindows上ではなく、Ubuntu上に展開されています。

Laravel Sailのインストール

最近、Laravelを新規インストールした場合、Sailはデフォルトで組み込まれているようですが、今回の古くから運用しているプロジェクトには含まれてなかったので、まずはパッケージをインストールします。

$ composer require laravel/sail --dev

次に、以下のコマンドでインストールします。

$ php artisan sail:install

すると対話型で、必要なサービスが問われます。今回はmariadbを選択します。

 Which services would you like to install? [mysql]:
  [0] mysql
  [1] pgsql
  [2] mariadb
  [3] redis
  [4] memcached
  [5] meilisearch
  [6] minio
  [7] mailpit
  [8] selenium
  [9] soketi
> 2
Sail scaffolding installed successfully.
...
Sail images installed successfully.
...
Sail build successful.

この処理には少々時間がかかります。

Laravel 6から9へアップグレードしたので、これまで利用していたLaravel Mixから、Laravel 9でデフォルトで採用されている「Vite」に移行してみます。
Vite | Next Generation Frontend Tooling
ちなみにViteの読み方は「ヴィート」のようです。

今回は、以下の移行ガイドを参考にして作業を進めてみます。
vite-plugin/UPGRADE.md at main · laravel/vite-plugin

プラグインのインストール

初めに、viteとLaravelのviteプラグイン「laravel-vite-plugin」をインストールします。

> npm install --save-dev vite laravel-vite-plugin

VueやReactを使用する場合、それぞれのプラグインをインストールします。

> npm install --save-dev @vitejs/plugin-vue
> npm install --save-dev @vitejs/plugin-react

WordPressでエラーログを取得する方法です。
WordPressはデフォルトではエラーログを出力しない設定になっているので、テンプレート開発やプラグイン開発をする場合は有効にしたほうがよいでしょう。

設定ファイル変更

まず、設定ファイル「wp-config.php」を編集します。
WP_DEBUGでデバッグモードを有効にすることで、エラーが出力されるようになります。

// define('WP_DEBUG', false);
define('WP_DEBUG', true);

但し、このままではエラーが画面に表示されてしまうので、以下の設定も追加します。
これにより、エラーは画面に表示されずにログファイルに出力されるようになります。

define('WP_DEBUG_DISPLAY', false);
define('WP_DEBUG_LOG', true);

ログファイルは「…/wp-content/debug.log」に出力されます。
サーバ環境によりますが、ログファイルは外部からアクセスできないように、パーミッションを640などに変更しましょう。

個人のお遊びプロジェクトのVue.jsを、2から3にアップグレードしてみます。

Vue.js 3をインストール

手探りな感じですが、とりあえず、package.jsonを以下のように修正して、Vue.js 3をインストールしてみます。

- "vue": "^2.5.17",
+ "vue": "^3.0",

アップデートします。

> npm update
(中略)
32 vulnerabilities (8 moderate, 24 high)

案の定、依存パッケージで脆弱性エラーが32件発生しました。

> npm audit fix --force
(中略)
found 0 vulnerabilities

上記コマンドを実行。すごい、一発で直った。

また、3ではパッケージ「vue-loader」が必要みたいなので、事前にインストールしておきます。

> npm install vue-loader

Monthly Archives