WordPress 플레이그라운드 및 WebAssembly로 브라우저 내 WordPress 환경 빌드

PHP로 구동되는 전체 WordPress는 WebAssembly가 포함된 브라우저에서만 실행

Adam Zieliński

Thomas Nattestad

WordPress 플레이그라운드가 처음 표시되면 아마도 화려한 배경만 제외하면 평범한 사이트와 같습니다. 무엇이든 하지만 실제로 보고 있는 것은 전체 WordPress 기술 스택입니다. 브라우저에서 직접 실행되는 PHP 및 데이터베이스를 포함합니다.

이 게시물에서는 아담 지엘린스키(WordPress 플레이그라운드 책임자)와 토마스 나테테스트드(Thomas Nattestad)가 (V8 제품 관리자)의 내용:

• WordPress Playground가 WordPress 개발자에게 어떤 도움이 될 수 있는지 알아보세요.
• 작동 방식
• WordPress의 미래에 미치는 영향

WordPress를 설치하지 않고 사용하고, 앱에 삽입하고, JavaScript로 제어할 수도 있습니다.

이 페이지에 삽입된 WordPress를 사용하고 playground.wordpress.net 무료로 제공됩니다. 이 클라우드 인프라와 비용이 들지 않는 지원도 필요 없습니다. 다른 사람이 방문할 수 없습니다. 일시적인 문제이기도 합니다. 사용자가 받는 즉시 페이지를 새로고침하면 없어집니다 이러한 사이트를 원하는 만큼 가져올 수 있으며 프로토타입을 제작하고, 플러그인을 사용해 보고, 아이디어를 신속히 탐색하는 데 많은 시간을 할애할 수 있었습니다.

이 도구를 사용하면 코드 테스트를 통해 다양한 환경에서 기본 제공 PHP 및 WordPress 버전 전환기:

WordPress Playground는 WordPress를 사용하는 완전히 새로운 방법입니다. 그것의 완전한 힘, 앱에 포함해야만 잠금 해제됩니다. 가장 쉬운 방법은 <iframe>의 WordPress Playground를 사용하고 쿼리 매개변수 API를 참조하세요. 공식 쇼케이스에서 합니다. 예를 들어 펜던트 테마 및 Coblocks 플러그인(삽입된 iframe) 는 https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

iframe을 사용하면 쉽게 시작할 수 있지만 기본 구성 옵션을 선택합니다. 그게 더 필요하다면 또 찾아보세요. 강력한 API입니다.

WordPress Playground JavaScript 클라이언트를 사용하여 삽입된 사이트를 완벽하게 제어할 수 있습니다.

파일 시스템과 PHP를 포함하여 전체 WordPress 사이트를 제어할 수 있습니다. 전체 API를 사용하여 @wp-playground/client npm 패키지에서 찾을 수 있습니다. 다음 예시에서는 이를 사용하는 방법을 보여줍니다. 다음을 확인합니다. 대화형 튜토리얼에서 더 많은 예시를 확인해 보세요.

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 Playground는 모놀리식이 아닙니다. WebAssembly PHP 출시 WordPress와는 별도로 사용할 수 있습니다. 웹의 경우 @php-wasm/web npm을 사용할 수 있습니다. 작은 번들 크기에 최적화된 패키지로 제한하고 Node.js에서는 @php-wasm/node에서 더 많은 PHP 확장 프로그램을 사용할 수 있습니다. 아담은 전자를 사용하여 대화형 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 변환기와 브라우저 내 서버가 있습니다.

WebAssembly 바이너리로 실행되는 PHP

PHP는 브라우저에서 바로 작동하지 않습니다. WordPress 플레이그라운드 은 전용 파이프라인 WebAssembly로 PHP 인터프리터 빌드 Emscripten을 사용합니다. vanilla PHP 빌드는 지나치게 복잡하지 않습니다. 여기에서 함수 서명을 조정하고 거기에 config 변수를 강제 적용하고 애플리케이션을 몇 개의 작은 패치가 있습니다. 이를 직접 빌드하는 방법은 다음과 같습니다.

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

그러나 Vanilla PHP 빌드는 브라우저에서 그다지 유용하지 않습니다. 서버로 PHP에는 요청 본문을 전달하는 JavaScript API가 없고, 파일을 채우거나 php://stdin 스트림을 채웁니다. WordPress Playground를 빌드하여 처음부터 만드는 것입니다. WebAssembly 바이너리는 전용 PHP API 모듈 C와 A로 작성된 JavaScript PHP 클래스를 writeFile() 또는 run()와 같은 메서드를 노출합니다.

모든 PHP 버전은 정적 .wasm 파일이므로 PHP 버전은 실제로 꽤 지루합니다. 단순히 브라우저에서 예를 들어 php_8_2.wasm 대신 php_7_3.wasm를 사용합니다.

SQL 변환 레이어로 지원되는 데이터베이스

WordPress에는 MySQL이 필요합니다. 하지만 MySQL의 WebAssembly 버전이 없음 브라우저에서 실행할 수 있습니다. 따라서 WordPress Playground가 제공하는 PHP와 함께 네이티브 SQLite 드라이버와 SQLite를 사용합니다.

그런데 WordPress를 다른 데이터베이스에서 실행하려면 어떻게 해야 할까요?

공식적인 비하인드 스토리는 SQLite 데이터베이스 통합 플러그인은 모든 MySQL 쿼리를 가로채 SQLite 언어로 다시 작성합니다. 2.0 출시 새로운 WordPress Playground 기반의 번역 레이어 SQLite on WordPress가 WordPress 단위 테스트 도구 모음의 99% 를 통과할 수 있게 합니다.

웹 서버는 브라우저 내에 위치함

일반 WordPress에서 Blog라는 링크를 클릭하면 HTTP 요청이 시작됩니다. 원격 백엔드에 요청을 보내 blog 페이지를 가져옵니다. 하지만 WordPress 플레이그라운드에는 원격 백엔드가 없습니다. 여기에는 서비스 워커 모든 발신 요청을 가로채 브라우저 내 PHP로 전달하는 실행되는 스테이트리스(Stateless) 컨테이너를 웹 작업자.

네트워킹은 WebSocket을 통해 지원됨

네트워킹에 관한 한, WebAssembly 프로그램은 JavaScript API입니다. 이는 안전 기능이지만 문제가 될 수도 있습니다. 어떻게 PHP가 사용하는 하위 수준 동기 네트워킹 코드를 고수준 비동기 API를 어떻게 사용해야 할까요?

WordPress Playground의 경우 답변은 WebSocket - TCP 소켓 프록시, 비동기화 및 딥 패치 PHP 내부(예: php_select) 복잡하지만 리워드가 있습니다. 이 Node.js를 대상으로 하는 PHP 빌드는 웹 API를 요청하고, Composer 패키지를 설치할 수 있고, MySQL 서버에 연결할 수도 있습니다

WordPress는 브라우저보다 더 많은 곳에서 사용할 수 있습니다.

이제 WordPress를 WebAssembly에서 실행할 수 있으므로 Node.js에서도 실행할 수 있습니다. 동일한 V8 엔진입니다! 물론 StackBlitz를 사용하면 Node.js를 브라우저에 직접 사용하므로 WordPress와 PHP를 실행할 수 있습니다. WebAssembly로 컴파일되고 Node.js에서 실행되며 WebAssembly 실행 중 브라우저에서 이동할 수 있습니다. WebAssembly는 서버리스 공간과 향후에는 해당 인프라에서도 실행될 수 있습니다.

미래에는 설정이 필요 없는 대화형 공동작업 WordPress 앱이 등장할 것입니다.

코드 편집기로 바로 이동하여 바로 빌드를 시작할 수 있습니다. 심지어 여러분의 일상에 Google Docs 등에서 멀티플레이어 편집 세션을 시작할 수 있습니다. 또한 이렇게 하면 클릭 한 번으로 애플리케이션을 원활하게 배포할 수 있습니다. 애플리케이션을 다양한 호스팅 서비스에 업로드할 수 있습니다. 로컬 버전

이것은 단지 겉보기에 불과합니다. 대화형 튜토리얼, 라이브 플러그인 데모, 스테이징 사이트, 에지 서버의 분산식 WordPress, 사용할 수 있습니다.

미래는 흥미진진하며, 여러분은 미래에 동참할 수 있습니다. 아이디어 및 참여 WordPress Playground의 핵심입니다. 다음 페이지를 방문하세요. GitHub 저장소에서 #meta-플레이그라운드에서 안녕하세요 WordPress.org Slack 채널에서 무료로 [e-mail]의 Adam에게 문의하세요.