WebAssembly가 포함된 브라우저에서만 실행되는 PHP 기반 전체 WordPress
WordPress 플레이그라운드를 처음 볼 때는 화려한 배경을 제외하면 평범한 사이트처럼 보일 수 있습니다. 뭐든 그렇지 않죠. 실제로 보고 있는 것은 브라우저에서 직접 실행되는 PHP 및 데이터베이스를 포함한 전체 WordPress 기술 스택입니다.
이 게시물에서 아담 지엘린스키 (WordPress 플레이그라운드 책임자)와 토마스 나테스타드(V8 제품 관리자)는 다음 내용을 살펴봅니다.
- WordPress 플레이그라운드가 WordPress 개발자에게 도움이 되는 방법
- 작동 방식
- WordPress의 미래에 미치는 영향
설치 없이 WordPress를 사용하고, 앱에 삽입하고, JavaScript로 제어할 수도 있습니다.
playground.wordpress.net에 삽입된 WordPress를 무료로 사용하고 맞춤설정할 수 있습니다. 이 사이트는 전적으로 내 브라우저에 존재하므로 다른 사람이 방문할 수 없으므로 클라우드 인프라 및 지원 비용을 지불할 필요가 없습니다. 이는 일시적인 조치이기도 합니다. 페이지를 새로고침하면 즉시 사라집니다. 이러한 사이트는 프로토타입을 제작하고, 플러그인을 시험해 보며, 빠르게 아이디어를 탐색할 때 필요한 만큼 사용할 수 있습니다.
기본 제공되는 PHP 및 WordPress 버전 전환기를 사용하여 다양한 환경에서 코드를 테스트하는 데 사용할 수도 있습니다.
WordPress 플레이그라운드는 WordPress를 사용하는 완전히 새로운 방법입니다. 그러나 이 백도어의 모든 기능은 앱에 포함해야 합니다. 가장 쉬운 방법은 <iframe>에 WordPress 플레이그라운드를 삽입하고 쿼리 매개변수 API를 사용하여 구성하는 것입니다.
공식 쇼케이스가 하는 일입니다. 예를 들어 Pendant 테마와 Coblocks 플러그인을 선택하면 삽입된 iframe이 https://playground.wordpress.net/?theme=pendant&plugin=coblocks를 가리키도록 업데이트됩니다.
iframe을 사용하면 쉽게 시작할 수 있지만, 기본 구성 옵션으로만 제한됩니다. 이보다 더 강력한 API가 필요하다면 더 강력한 API를 사용하세요
WordPress Playground JavaScript 클라이언트를 사용하면 삽입된 사이트를 완벽하게 제어할 수 있습니다.
@wp-playground/client npm 패키지를 통해 제공되는 전체 API를 사용하여 파일 시스템과 PHP를 포함한 전체 WordPress 사이트를 제어할 수 있습니다. 다음 예에서는 사용 방법을 보여줍니다. 더 많은 예는 대화형 튜토리얼을 확인하세요.
import {
connectPlayground,
login,
connectPlayground,
} from '@wp-playground/client';
const client = await connectPlayground(
document.getElementById('wp'), // An iframe
{ loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();
// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');
// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });
// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);
WordPress 없이도 WebAssembly PHP 사용
WordPress 플레이그라운드는 모놀리식이 아닙니다. WebAssembly PHP는 WordPress와 별개로 출시되므로 별도로 사용할 수도 있습니다. 웹의 경우 작은 번들 크기에 최적화된 @php-wasm/web npm 패키지를 사용할 수 있으며, Node.js에서는 더 많은 PHP 확장 프로그램을 제공하는 @php-wasm/node를 사용할 수 있습니다. Adam은 전자를 사용하여 대화형 PHP 스니펫을 이 WP_HTML_Tag_Processor 튜토리얼에 추가했습니다. 아래에 사용 방법을 간단히 살펴보세요.
import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
requestHandler: {
documentRoot: '/www',
},
});
// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });
// Or use the familiar HTTP concepts:
const response = php.request({
method: 'POST',
relativeUrl: '/index.php',
data: { name: 'John' },
});
console.log(response.text); // Hello John
이 시점에서 어떻게 작동할까요?라는 생각이 듭니다. 좋은 질문이에요. 내부로 들어가서 알아보겠습니다. 안전벨트를 매세요!
내부적으로는 WebAssembly PHP, SQL 변환기 및 브라우저 내 서버가 있습니다.
PHP는 WebAssembly 바이너리로 실행
PHP는 처음부터 브라우저에서만 작동하지 않습니다. WordPress 플레이그라운드는 Emscripten을 사용하여 WebAssembly에 대한 PHP 인터프리터를 빌드하는 전용 파이프라인을 개발했습니다. vanilla PHP는 지나치게 복잡하지 않습니다. 여기에서 함수 서명을 조정하고 여기에서 구성 변수를 강제 적용한 다음 작은 패치 몇 개를 적용하면 됩니다. 직접 빌드하는 방법은 다음과 같습니다.
git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2
그러나 바닐라 PHP 빌드는 브라우저에서 그다지 유용하지 않습니다. 서버 소프트웨어인 PHP에는 요청 본문을 전달하거나 파일을 업로드하거나 php://stdin 스트림을 채우는 JavaScript API가 없습니다. WordPress Playground를 처음부터
빌드해야 했습니다. WebAssembly 바이너리는 C로 작성된 전용 PHP API 모듈과 writeFile() 또는 run()와 같은 메서드를 노출하는 JavaScript PHP 클래스와 함께 제공됩니다.
모든 PHP 버전은 정적 .wasm 파일이므로 PHP 버전 전환기는 실제로 매우 지루합니다. 단순히 브라우저에 php_8_2.wasm 대신 php_7_3.wasm를 다운로드하라고 지시합니다.
데이터베이스는 SQL 변환 레이어로 지원됨
WordPress를 사용하려면 MySQL이 필요합니다. 하지만 브라우저에서 실행할 수 있는 MySQL의 WebAssembly 버전은 없습니다. 따라서 WordPress Playground는 기본 SQLite 드라이버와 함께 PHP를 제공하고 SQLite를 사용합니다.
그런데 WordPress를 다른 데이터베이스에서 실행하려면 어떻게 해야 할까요?
내부적으로 공식 SQLite Database Integration 플러그인은 모든 MySQL 쿼리를 가로채 SQLite 언어로 다시 작성합니다. 2.0 버전에서는 SQLite 기반 WordPress가 WordPress 단위 테스트 모음의 99% 를 통과할 수 있도록 새로운 WordPress Playground 기반 번역 레이어를 제공합니다.
웹 서버는 브라우저 내부에 있습니다.
일반적인 WordPress에서 블로그와 같은 링크를 클릭하면 원격 백엔드에 대한 HTTP 요청이 시작되어 blog 페이지를 가져옵니다. 그러나 WordPress 플레이그라운드에는 원격 백엔드가 없습니다. 모든 발신 요청을 가로채서 별도의 웹 워커에서 실행되는 브라우저 내 PHP 인스턴스에 전달하는 서비스 워커가 있습니다.
WebSocket을 통해 네트워킹이 지원됨
네트워킹과 관련하여 WebAssembly 프로그램은 JavaScript API 호출로 제한됩니다. 이는 안전 관련 기능이기도 하지만 어려운 과제이기도 합니다. PHP에서 사용하는 하위 수준의 동기식 네트워킹 코드를 자바스크립트에서 사용할 수 있는 높은 수준의 비동기 API와 함께 어떻게 지원하나요?
WordPress 플레이그라운드에서는 WebSocket to TCP 소켓 프록시, Asyncify, 딥 PHP 내부(예: php_select) 패치 작업을 수행해야 합니다. 복잡하지만 보상은 있습니다. Node.js를 타겟팅하는 PHP 빌드는 웹 API를 요청하고, 작성기 패키지를 설치할 수 있으며, MySQL 서버에 연결할 수도 있습니다.
WordPress는 브라우저보다 더 많은 위치에서 사용할 수 있습니다
이제 WordPress를 WebAssembly에서 실행할 수 있으므로 V8 엔진과 동일한 Node.js 서버에서도 실행할 수 있습니다. 물론 StackBlitz를 사용하면 브라우저에서 직접 Node.js를 실행할 수도 있습니다. 즉, WebAssembly에 컴파일된 WordPress와 PHP를 실행하여 Node.js에서 실행하고, 이 파일은 브라우저에서 실행되는 WebAssembly로 컴파일됩니다. 또한 서버리스 공간에서 WebAssembly의 인기가 폭발적으로 증가하고 있으며, 향후 해당 인프라에서도 WebAssembly가 실행될 수 있습니다.
미래에는 설정 작업이 필요 없고 대화형 공동작업이 가능한 WordPress 앱이 도입될 것입니다.
코드 편집기로 바로 이동하여 모든 설정이 완료된 후 바로 빌드를 시작할 수 있다고 상상해 보세요. 간단한 링크를 공유하고 Google Docs와 같은 멀티플레이어 편집 세션을 시작할 수도 있습니다. 그리고 작업이 완료되면 클릭 한 번으로 로컬에 아무것도 설치하지 않고도 다양한 호스팅 서비스에 창작물을 원활하게 배포할 수 있습니다.
이 정도만 간략하게 소개하면 됩니다. 대화형 튜토리얼, 라이브 플러그인 데모, 스테이징 사이트, 에지 서버의 분산된 WordPress, 스마트폰에서 플러그인 빌드 등을 볼 수 있습니다.
흥미진진한 미래에 여러분의 참여가 가능합니다. 여러분의 아이디어와 참여가 WordPress 플레이그라운드의 산소입니다. GitHub 저장소를 방문하여 #meta-playground WordPress.org Slack 채널에서 인사하고 adam@adamziel.com을 통해 Adam에게 연락해 보세요.