在浏览器上使用 Browser PHP 运行 Laravel

如何使用仅Node Browser PHP和PHP WASM包设置Laravel项目。

您可以通过此链接找到CodeSandbox演示或通过此Github 代码库获取源代码。在Capsules或X上了解更多信息。

首先，值得一提的是，PHP主要是一种服务器端脚本语言，这篇文章可能不会吸引纯粹的PHP爱好者。然而，这源于一个简单的问题：PHP脚本如何在客户端执行？Browser PHP就是这个想法的结果。

Browser PHP提供了一组命令，可以在Node命令行界面中执行PHP，或在Node中启动PHP服务器。例如，用于在CodeSandbox中运行Laravel项目的完美选择。

此包是实验性的，并且仍在持续开发中。它是为了从浏览器访问PHP功能而创建的。因此，强烈建议您只在开发环境中使用它。

本文建议创建一个没有PHP可执行文件的Laravel项目。从Browser PHP包开始，并提供Composer。以下是步骤：

创建一个temp目录并安装browser-php

mkdir temp

cd temp

npm install browser-php

browser-php会在vendor/bin目录中安装composer

现在，您需要在package.json文件中将php和composer提供给npm。

temp/package.json

  "scripts" : {
       "php" : "php",
       "composer" : "php --disable-functions vendor/bin/composer"
  }

• disable-functions 表示通知 vendor/bin/composer 关闭 proc_open、popen、curl_exec 和 curl_multi_exec 这几个函数。实际上，在 php-wasm 中它们并不存在。

npm run composer

> composer
> php --disable-functions vendor/bin/composer

   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.7.1 2024-02-09 15:26:28

如今，Composer 可以使用，是时候创建一个新的 Laravel 项目了。

npm run composer create-project -- --no-scripts --ignore-platform-reqs laravel/laravel ../laravel

• no-scripts 帮助避免出现 PHP not found 错误。在 composer.json 文件中列出的脚本需要 PHP 可执行文件。
• ignore-platform-reqs 会静默掉与缺少 PHP 扩展相关的错误。

  ...

  - Installing spatie/flare-client-php (1.4.4): Extracting archive
  - Installing spatie/ignition (1.12.0): Extracting archive
  - Installing spatie/laravel-ignition (2.4.2): Extracting archive
    0 [>---------------------------]    0 [->--------------------------]
65 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
83 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.

🎉 Laravel 项目已经创建成功！

为了将 browser-php 应用于现有的 Laravel 项目，需要完成一些小型任务。新创建的项目将作为基础，但最初需要删除 temp 目录并安装 browser-php。

rm -rf temp 

cd laravel

npm install --save-dev browser-php

在 composer.json 文件中的脚本也可以进行清理。

laravel/composer.json

"scripts": {
    "post-autoload-dump": [
       "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump"
    ]
},

为能够运行 artisan，需要应用 umask(577)。这将给予 artisan 文件权限。

laravel/artisan

#!/usr/bin/env php
<?php

umask(577);

define('LARAVEL_START', microtime(true));

...

npm run php artisan inspire

> php
> php artisan inspire

  “ Act only according to that maxim whereby you can, at the same time, will that it should become a universal law. ”
  — Immanuel Kant

现在完全可以看到设置 Laravel 项目的结果了。为此，将 .env.example 文件复制到 .env，然后使用新可用的 artisan 运行 key:generate 命令。

cp .env.example .env && npm run php artisan key:generate

> php
> php artisan key:generate

   INFO  Application key set successfully.

browser-php 中的新脚本 serve 会在 localhost:2222 上启动一个 PHP 服务器。

"scripts" : {
    "serve": "serve",
}

npm run build && npm run serve

> build
> serve

   PHP server is listening on localhost:2222

很好……但是为什么？原因是要启用在 CodeSandbox 上显示 Capsules Codes 文章的功能！要启动 Laravel 项目在 CodeSandbox 上，请按照以下步骤操作

npm run install --save-dev browser-php

package.json

"scripts": {
	  "dev": "vite",
	  "build": "vite build",
	  "php" : "php",
	  "serve" : "vite & serve",
	  "composer" : "php --disable-functions vendor/bin/composer"
},

.env

APP_URL="<https://localhost>::2222"

BROWSER_PHP_HOST="<https://localhost>"
BROWSER_PHP_PORT=2222

vite.config.js

server : { host : 'localhost' }

.codesandbox/tasks.json

{
    "$schema" : "<https://codesandbox.io/schemas/tasks.json>",
    "setupTasks" : [
        { "name" : "Install Node Dependencies", "command" : "npm install" },
        { "name" : "Install PHP Dependencies", "command" : "npm run composer install -- --ignore-platform-reqs --no-scripts" },
        { "name" : "Prepare Environment Variables", "command" : "cp .env.example .env && npm run php artisan key:generate" }
    ],
    "tasks" : {
        "dev" : { "name" : "Start Dev and PHP Server", "command" : "npm run serve", "preview" : { "port" : 2222 }, "runAtStart": true }
    }
  }

那么，关于演示一个问题或拉取请求又如何？一个好的演示可能比长篇描述更有价值。

很高兴这个帮助到了。