Browsersync で XAMPP の PHP と `.htaccess` の挙動を確認する( `gulp-connect-php` 使用)

経緯

XAMPP の PHP と .htaccess の挙動を確認するために http-proxy を使用する方法を探っていましたが、 https アクセスに対応できなかったので元の gulp-connect-php を使用する方法を探ってみました。

コード

browsersync.js

const gulp = require('gulp');
const browserSync = require('browser-sync');
const connect = require('gulp-connect-php');
const dotenv = require('dotenv').config();

const browsersync = () => {
    connect.server({
        bin: process.env.PHP_BIN,
        ini: process.env.PHP_INI,
        base: rootDir
    }, () =>{
        browserSync({
            proxy: process.env.PROXY_HOST,
            https: true,
            startPath: process.env.ROOT_PATH
        });
    });
};

.env

PHP_BIN=C:/xampp/php/php.exe
PHP_INI=C:/xampp/php/php.ini
PROXY_HOST=localhost
ROOT_PATH=/PATH/TO/APP/

http-proxy を使用したときと似たようなイメージです。

• gulp-connect-php の base を XAMPP のドキュメントルートである htdocs を相対パスで遡ったパス
• Browsersync でアクセスするときは startPath にプロジェクトのルートディレクトリを指定

この形で Gulp タスクを実行。

無事に https で PHP プログラム、 .htaccess のリダイレクトが効いていることが確認できました。

ということで、変更点も最も少ないのでこれを採用。 http-proxy は未使用となりました。

参考

• gulp-connect-php – npm