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

WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグする

WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグします。

日頃、VSCodeの「PHP Debug」を使ってデバッグを行っていたのですが、WSL2とDockerの環境下ではちょっとした設定が必要だったので、メモとして残しておきます。

ちなみに今回、以下の環境で実現しました。

  • Docker Engine 20.10.17
  • PHP 7.3.33
  • Xdebug 3.1.5
  • Windows 11 Home
  • Ubuntu 22.04
  • Visual Studio Code 1.63.2

WSL2でUbuntu上にソースを展開し、Dockerでマウントして開発しているプロジェクトを想定しています。

Xdebugのインストール

DockerのPHPコンテナにXdebugがインストールされてない場合、以下のコマンドでインストールします。

# pecl install xdebug && docker-php-ext-enable xdebug

Dockerfileに以下を追記すれば、未インストール時にインストールできます。

RUN bash -c '[[ -n "$(pecl list | grep xdebug)" ]]\
  || (pecl install xdebug && docker-php-ext-enable xdebug)'
「WSL2 + Docker + Xdebug + PHP Debug（Visual Studio Code）を使ってPHPをデバッグする」のつづきを読む

TanStack TableのReact Tableでリッチなテーブルを実装してみる

TanStack TableのReact Tableでリッチなテーブルを実装してみます。
TanStack | High Quality Open-Source Software for Web Developers

あるプロジェクトで脱jQueryの流れがあり、jQueryベースのプラグイン「DataTables」に代わるライブラリを探していて、React Tableにたどり着きました。

本記事の内容は、ほとんど公式サイトのガイド通り、かつ、雑な解説となっておりますが、、初導入時の記憶としてメモを残したいと思います。

  • React 18.1
  • React Table 8.2.2

ここではユーザ情報ををTableで表示する、シンプルな例を取り上げます。
また、コード量が多くなるので、要点を絞り紹介しています。

React Tableのインストール

npmコマンドを使ってReact Tableをインストールします。

$ npm install @tanstack/react-table
「TanStack TableのReact Tableでリッチなテーブルを実装してみる」のつづきを読む

LaravelでPHPUnitを使ったHTTPテスト

Laravelにデフォルトで組み込まれている「PHPUnit」を使ってユニットテスト（単体テスト）を実施してみます。
今回は、Webアプリケーションに正しくアクセスできているか、HTTPテストを実施します。

公開済みのLaravelプロジェクトを対象とします。

  • Laravel 6.20.44
  • PHPUnit 7.5.20

テスト用スクリプトの用意

テスト用スクリプトは、サンプル「tests/Feature/ExampleTest.php」が用意されているので、これを複製し、例えば「HelloTest.php」として以下のファイルを作成します。

namespace Tests\Feature;

use Tests\TestCase;
use Illuminate\Foundation\Testing\RefreshDatabase;

class HelloTest extends TestCase
{
	public function testBasicTest()
	{
		$response = $this->get('/');
		$response->assertStatus(200);

		$response = $this->get('/about');
		$response->assertStatus(200);

		$response = $this->get('/contact');
		$response->assertStatus(200);
...
	}
}

このように記述する事で、例えばページ「/about」にリクエストした際に、正常にアクセスできているか、つまりステータスコード200を返しているかどうかテストする事ができます。
コンテンツリストやサイトマップなど仕様書から、全ページ分のコードを記述します。

「LaravelでPHPUnitを使ったHTTPテスト」のつづきを読む

Laravelサイト内で認証済みユーザのみにAPIを提供する方法

Laravelサイト内で認証済みユーザのみにAPIを提供する方法です。

以前に、Laravelサイト内外問わず、APIで認証機能を提供するしくみとしてPassportを紹介しました。
LaravelでPassportパッケージ（OAuth2）を使用したAPI認証を構築

今回は、PassportではなくSessionを用いて、Laravelサイト内に限定し、かつ、認証済みのユーザのみにAPIを提供する方法を紹介します。
SPAではないが、パフォーマンス的に部分的にAPIで情報を提供する際に有効です。

  • PHP 7.3.33
  • Laravel 6.20.44

APIでセッション認証の有効化

まず「config/auth.php」を開き、apiのドライバをwebと同じ「session」にします。

    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'session',
            'provider' => 'users',
        ],
    ],
「Laravelサイト内で認証済みユーザのみにAPIを提供する方法」のつづきを読む

GitHub Actionsを使ってレンタルサーバに自動デプロイ

GitHub Actionsを使ってレンタルサーバに自動でデプロイします。
これまで、GitHubで管理しているソースをコミット、プッシュした後、その差分を手動FTPでサーバにアップしてましたが、その部分を自動化したいと思います。

GitHub Actionsのドキュメント – GitHub Docs

ここでは、デプロイ対象のGitHubリポジトリとデプロイ先のレンタルサーバは、既存のものを利用します。

ワークフローファイル作成

GitHub Actionsの動作を設定するワークフローファイルを作成します。
今回は単純に、masterブランチにpushがあったら、ファイルをレンタルサーバにFTPアップロードします。

name: deploy
on:
  push:
    branches: [master]
jobs:
  web-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: get lastest code
        uses: actions/checkout@v3
      - name: sync files
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}

「name」は任意です。「runs-on」にはデプロイ環境を指定します。
FTPにはGitHub – SamKirkland/FTP-Deploy-Actionを使用します。
FTPのユーザ名やパスワードなどをコードに書くことはセキュリティ的にリスクがあるので、環境変数を使用します。

「GitHub Actionsを使ってレンタルサーバに自動デプロイ」のつづきを読む

Laravelでコレクション多次元データから任意のキーのみ取り出す方法

Laravelで多次元データから任意のキーのみ取り出す方法です。

例えば、ユーザテーブルから複雑なクエリビルダで以下のデータを取得したとします。

$users = User::get_fukuzatsu();
Log::debug($users);

[
	{
		"id": 1,
		"name": "山田太郎",
		"kana": "ヤマダタロウ",
		"tel": "11122223333",
		"age": 30,
		"sex": 1,
		"mail": "taro@xxxxx"
		"postcode": "1112222",
		...
	},
	{
		"id": 2,
		"name": "山田花子",
		"kana": "ヤマダハナコ",
		"tel": "44455556666",
		"age": 25,
		"sex": 2,
		"mail": "hanako@xxxxx"
		"postcode": "4445555",
		...
	},
	...
]

このデータの電話番号など一部データを、APIで外部に展開します。ここで、以下の課題があります。

  • 全てのデータを出すにはデータ量が多い
  • プライバシーポリシー的に出せない情報がある
  • だからと言って、クエリビルダが複雑な事もあり、電話番号などキーを絞ったクエリ「get_fukuzatsu2」などを複製するのもスマートじゃない
「Laravelでコレクション多次元データから任意のキーのみ取り出す方法」のつづきを読む

LaravelでREST API開発

最近、Vue.jsやReactなどを使用したSPA開発がトレンドで、API開発も需要も高まってきてます。
Laravelでは、APIに必要なルートやコントローラを簡単に生成できるしくみが用意されています。

今回はLaravelでAPIの開発を始める際の基礎をみてみます。
ちなみに、Laravel 6.xがインストール済みであることを前提とします。
また、任意の「Sample」データに対してAPIを開発するとします。

コントローラ作成

以下のコマンドで、APIに必要な関数を含んだコントローラ「app/Http/Controllers/API/SampleController.php」を作成することができます。

$ php artisan make:controller API/SampleController --api

作成されたコントローラの中身は以下のようになってます。

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class SampleController extends Controller
{
	public function index()
	{
			//
	}

	public function store(Request $request)
	{
			//
	}

	public function show($id)
	{
			//
	}

	public function update(Request $request, $id)
	{
			//
	}

	public function destroy($id)
	{
			//
	}
}
「LaravelでREST API開発」のつづきを読む

Laravel×Reactの開発環境構築

Laravel×Reactの開発環境構築を構築します。

今回試した環境は以下の通りです。

  • Laravel 6.20.44
  • Node.js 14.16.1
  • React 18.1

Laravelはインストール済みの状態から解説します。

初期LaravelにReactのインストール

初期のLaravel環境に対してReactをインストール場合、laravel/uiパッケージを利用すると便利です。ターミナルから以下のコマンドを実行します。

$ php artisan ui react

または

$ php artisan preset react

Laravelの初期状態はVue.jsがプリセットとなっています。
このコマンドを実行する事で、プリセットがReactに変更され、React開発スタートに必要なファイルが追加、変更されます。
具体的には「resources/js/components/Example.js」などが追加され、「package.json」や「webpack.min.js」などの内容が変更されます。
一方で「resources/js/components/ExampleComponent.vue」などのVue.js関連の初期ファイルは削除されます。

次に「package.json」を元にReactパッケージをインストールします。

$ npm install

基本的にReactのインストールは以上です。

但し、既にLaravelの開発が進行している場合、既存ファイルが自動で変更、削除されると困という場合はこちらの方法はお勧めできません。

「Laravel×Reactの開発環境構築」のつづきを読む

Windows 11のPowerShellを5.1から7へアップグレード

とうとうWindows 11デビューしました。
想像していた通り、いくつか環境構築がこれまでのようにうまくいかず。。
「この時間返して。。今後もOSが変わるたびに、この試練を突破しないといけないのかな。。経済損失ってどれぐらいだろう。。」
など考えながら作業しております。

さて、新PCのWindows 11 Homeのセットアップを終え、環境構築の作業に入ろうと思い、PowerShellを起動したら、以下のメッセージが表示されました。

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows

Windows Updateで最新の状態とかにしてくれないんですかね。

コマンドで現在のバージョンを調べてみると5.1のようです。

PS C:\Users\username> $PSVersionTable

Name                           Value
----                           -----
PSVersion                      5.1.22000.653
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.22000.653
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

PowerShellのバージョンが古いことで、いくつか実行できないコマンドもあるようです。

「Windows 11のPowerShellを5.1から7へアップグレード」のつづきを読む

WindowsでWSL2のプロセス「Vmmem」のメモリ使用量を制限する

Windows 10で、Docker Desktopで使ってるWSL2のプロセス「Vmmem」のメモリ使用量を制限する方法です。

WSL2を使うようになってから、ローカル開発環境にアクセスするのが重く、また、その度に私のロースペックノートPCのファンがフル回転します。。
高負荷の原因はロースペックだと考えていましたが、調べてみるとプロセス「Vmmem」を制御すれば改善しそうです。

ローカル環境で作業中に、タスクマネージャーを確認してみました。

Vmmemにより、メモリが4.5GBほど消費しています。作業を続けているとメモリ使用量は増え続け、時には全体の使用率が95%を超える場面もあります。

「WindowsでWSL2のプロセス「Vmmem」のメモリ使用量を制限する」のつづきを読む

Monthly Archives