BETA

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

投稿日:2020-08-08
最終更新:2020-08-08

経緯

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-phpbase を XAMPP のドキュメントルートである htdocs を相対パスで遡ったパス
  • Browsersync でアクセスするときは startPath にプロジェクトのルートディレクトリを指定

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

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

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

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう