Merge pull request #1873 from Automattic/fix/1838-cloudflare-serve-wordpress

Serve WordPress from the Cloudflare runtime

Author: chubes4

packages/runtime-cloudflare/src/php-wasm-universal.d.ts

@@ -1,4 +1,19 @@
 declare module "@php-wasm/universal" {
+  export interface PHPRequest {
+    method?: string
+    url: string
+    headers?: Record<string, string>
+    body?: string | Uint8Array
+  }
+
+  export interface PHPResponseData {
+    readonly headers: Record<string, string[]>
+    readonly bytes: Uint8Array
+    readonly errors: string
+    readonly exitCode: number
+    readonly httpStatusCode: number
+  }
+
   export class PHP {
     constructor(runtimeId: number)
     run(request: { code: string }): Promise<{ bytes: Uint8Array; text: string }>
@@ -21,5 +36,6 @@ declare module "@php-wasm/universal" {
 
   export class PHPRequestHandler {
     getPrimaryPhp(): Promise<PHP>
+    request(request: PHPRequest): Promise<PHPResponseData>
   }
 }

packages/runtime-cloudflare/src/request-routing.ts

@@ -0,0 +1,15 @@
+export type WorkerRequestRoute =
+  | { kind: "wordpress" }
+  | { kind: "health" }
+  | { kind: "r2-state" }
+  | { kind: "r2-mutate" }
+  | { kind: "probe"; phase: string }
+
+export function routeWorkerRequest(request: Request): WorkerRequestRoute {
+  const phase = new URL(request.url).searchParams.get("phase")
+  if (phase === null) return { kind: "wordpress" }
+  if (phase === "health") return { kind: "health" }
+  if (phase === "r2-state") return { kind: "r2-state" }
+  if (phase === "r2-mutate") return { kind: "r2-mutate" }
+  return { kind: "probe", phase }
+}

packages/runtime-cloudflare/src/request-translation.ts

@@ -0,0 +1,28 @@
+import type { PHPRequest, PHPResponseData } from "@php-wasm/universal"
+
+export async function toPHPRequest(request: Request): Promise<PHPRequest> {
+  const url = new URL(request.url)
+  const headers: Record<string, string> = {}
+  request.headers.forEach((value, name) => { headers[name] = value })
+  const body = request.method === "GET" || request.method === "HEAD"
+    ? undefined
+    : new Uint8Array(await request.arrayBuffer())
+
+  return {
+    method: request.method as PHPRequest["method"],
+    url: `${url.pathname}${url.search}`,
+    headers,
+    ...(body ? { body } : {}),
+  }
+}
+
+export function toFetchResponse(request: Request, response: PHPResponseData): Response {
+  const headers = new Headers()
+  for (const [name, values] of Object.entries(response.headers)) {
+    for (const value of values) headers.append(name, value)
+  }
+  const body = request.method === "HEAD" || [204, 205, 304].includes(response.httpStatusCode)
+    ? null
+    : response.bytes as unknown as BodyInit
+  return new Response(body, { status: response.httpStatusCode, headers })
+}

packages/runtime-cloudflare/src/worker.ts

@@ -1,11 +1,13 @@
-import { loadPHPRuntime, PHP } from "@php-wasm/universal"
+import { loadPHPRuntime, PHP, type PHPRequestHandler } from "@php-wasm/universal"
 import { decodeRemoteZip, decodeZip } from "@php-wasm/stream-compression"
 import { bootWordPressAndRequestHandler, type WordPressInstallMode } from "@wp-playground/wordpress"
 // The PHP-WASM package publishes this Emscripten loader without TypeScript declarations.
 // @ts-expect-error The adjacent Wasm declaration covers the compiled binary import.
 import { dependenciesTotalSize, init } from "../../../node_modules/@php-wasm/web-8-5/asyncify/php_8_5.js"
 import phpWasmModule from "../../../node_modules/@php-wasm/web-8-5/asyncify/8_5_8/php_8_5.wasm"
 import { CLOUDFLARE_RUNTIME_HEALTH_MARKER, CLOUDFLARE_RUNTIME_HEALTH_SCHEMA, cloudflareRuntimeHealthResponse } from "./health-envelope.js"
+import { routeWorkerRequest } from "./request-routing.js"
+import { toFetchResponse, toPHPRequest } from "./request-translation.js"
 import markdownDatabaseIntegrationRuntime from "../assets/markdown-database-integration-runtime.zip"
 import markdownPrimaryBootstrapIndex from "../assets/markdown-primary-bootstrap-index.sqlite"
 import wordpressInstallSeed from "../assets/wordpress-install-seed.sqlite"
@@ -60,7 +62,7 @@ if (empty($option_rows)) {
 }
 $changes = $runtime->flush();
 echo json_encode(['revisionValue' => $value, 'previousPostFound' => !empty($previous_rows), 'postId' => $post_id, 'wordpressVersion' => $wp_version, 'canonicalChanges' => $changes]);`
-let bootPromise: Promise<{ php: PHP; wordpressVersion: string }> | undefined
+let bootPromise: Promise<{ php: PHP; requestHandler: PHPRequestHandler; wordpressVersion: string }> | undefined
 
 interface Env {
   WORDPRESS_STATE: DurableObjectNamespace
@@ -69,25 +71,29 @@ interface Env {
 
 export default {
   async fetch(request: Request, env: Env): Promise<Response> {
-    const phase = new URL(request.url).searchParams.get("phase")
-    if (phase === "r2-state" || phase === "r2-mutate") {
-      const expectedMethod = phase === "r2-mutate" ? "POST" : "GET"
+    const route = routeWorkerRequest(request)
+    if (route.kind === "r2-state" || route.kind === "r2-mutate") {
+      const expectedMethod = route.kind === "r2-mutate" ? "POST" : "GET"
       if (request.method !== expectedMethod) {
-        return new Response(`WordPress state ${phase === "r2-mutate" ? "mutation" : "read"} requires ${expectedMethod}.`, { status: 405 })
+        return new Response(`WordPress state ${route.kind === "r2-mutate" ? "mutation" : "read"} requires ${expectedMethod}.`, { status: 405 })
       }
       const coordinator = env.WORDPRESS_STATE.getByName("default")
-      return phase === "r2-state"
+      return route.kind === "r2-state"
         ? coordinator.fetch(new Request("https://coordinator/state"))
         : runSerializedMarkdownMutation(env, coordinator)
     }
-    if (phase) return runBootProbe(phase)
+    if (route.kind === "probe") return runBootProbe(route.phase)
 
     const runtime = await (bootPromise ??= bootWordPressRuntime(
       "do-not-attempt-installing",
       true,
-      true,
+      false,
       new Uint8Array(wordpressInstallSeed),
+      undefined,
+      undefined,
+      new URL(request.url).origin,
     ))
+    if (route.kind === "wordpress") return toFetchResponse(request, await runtime.requestHandler.request(await toPHPRequest(request)))
     const phpVersion = (await runtime.php.run({ code: "<?php echo PHP_VERSION;" })).text.trim()
     return cloudflareRuntimeHealthResponse({
       schema: CLOUDFLARE_RUNTIME_HEALTH_SCHEMA,
@@ -517,7 +523,8 @@ async function bootWordPressRuntime(
   databaseSeed?: Uint8Array,
   markdownFiles?: RuntimeFile[],
   markdownIndexSeed?: Uint8Array,
-): Promise<{ php: PHP; wordpressVersion: string }> {
+  siteUrl = SITE_URL,
+): Promise<{ php: PHP; requestHandler: PHPRequestHandler; wordpressVersion: string }> {
   const requestHandler = await bootWordPressAndRequestHandler({
     createPhpRuntime,
     constants: {
@@ -550,15 +557,15 @@ async function bootWordPressRuntime(
     } : undefined,
     maxPhpInstances: 1,
     phpVersion: "8.5",
-    siteUrl: SITE_URL,
+    siteUrl,
     wordPressZip: streamWordPressFiles ? undefined : fetchArchive(WORDPRESS_ARCHIVE_URL, "wordpress.zip"),
     sqliteIntegrationPluginZip: includeSqlite ? fetchArchive(SQLITE_INTEGRATION_ARCHIVE_URL, "sqlite-database-integration.zip") : undefined,
     wordpressInstallMode,
   })
   const php = await requestHandler.getPrimaryPhp()
   const wordpressVersion = (await php.run({ code: "<?php require '/wordpress/wp-includes/version.php'; echo $wp_version;" })).text.trim()
   if (!wordpressVersion) throw new Error("WordPress boot completed without a detected version.")
-  return { php, wordpressVersion }
+  return { php, requestHandler, wordpressVersion }
 }
 
 function initialMarkdownFiles(): RuntimeFile[] {

scripts/cloudflare-local-gate.mjs

@@ -13,9 +13,10 @@ child.stderr.on("data", (chunk) => { output += chunk })
 
 try {
   await waitForServer()
+  await assertWordPressPage(url, "front page")
   await assertHealthResponse()
-  await assertHealthResponse()
-  console.log("Cloudflare local runtime gate passed: two HTTP 200 health envelopes returned.")
+  await assertWordPressPage(`${url}wp-admin/`, "WordPress admin route")
+  console.log("Cloudflare local runtime gate passed: front page, explicit health envelope, and admin route returned.")
 } finally {
   child.kill("SIGTERM")
   await new Promise((resolve) => child.once("exit", resolve))
@@ -32,10 +33,18 @@ async function waitForServer() {
 }
 
 async function assertHealthResponse() {
-  const response = await fetch(url)
+  const response = await fetch(`${url}?phase=health`)
   if (response.status !== 200) throw new Error(`Expected HTTP 200, received ${response.status}: ${await response.text()}`)
   const body = await response.json()
   if (body.schema !== "wp-codebox/cloudflare-runtime-health/v1" || body.marker !== "wp-codebox-cloudflare-runtime-health" || body.phpVersion !== "8.5.8" || typeof body.wordpressVersion !== "string" || body.execution?.schema !== "wp-codebox/runtime-command-result/v1" || body.execution?.status !== "ok") {
     throw new Error(`Unexpected Cloudflare runtime health envelope: ${JSON.stringify(body)}`)
   }
 }
+
+async function assertWordPressPage(target, label) {
+  const response = await fetch(target)
+  const body = await response.text()
+  if (response.status !== 200 || !response.headers.get("content-type")?.includes("text/html") || !/<html[\s>]/i.test(body)) {
+    throw new Error(`Expected an HTML ${label}, received ${response.status}: ${body}`)
+  }
+}

tests/cloudflare-runtime.test.ts

@@ -4,6 +4,8 @@ import test from "node:test"
 import { decodeZip } from "@php-wasm/stream-compression"
 import { RUNTIME_COMMAND_RESULT_SCHEMA } from "../packages/runtime-core/src/runtime-contracts.js"
 import { CLOUDFLARE_RUNTIME_HEALTH_MARKER, CLOUDFLARE_RUNTIME_HEALTH_SCHEMA, cloudflareRuntimeHealthResponse } from "../packages/runtime-cloudflare/src/health-envelope.js"
+import { routeWorkerRequest } from "../packages/runtime-cloudflare/src/request-routing.js"
+import { toFetchResponse, toPHPRequest } from "../packages/runtime-cloudflare/src/request-translation.js"
 
 test("Cloudflare health response preserves the Codebox execution envelope", async () => {
   const health = {
@@ -25,6 +27,42 @@ test("Cloudflare health response preserves the Codebox execution envelope", asyn
   assert.deepEqual(payload.execution.json, health)
 })
 
+test("Cloudflare routing reserves phases while the phase-less route serves WordPress", () => {
+  assert.deepEqual(routeWorkerRequest(new Request("https://worker.example/")), { kind: "wordpress" })
+  assert.deepEqual(routeWorkerRequest(new Request("https://worker.example/?phase=health")), { kind: "health" })
+  assert.deepEqual(routeWorkerRequest(new Request("https://worker.example/?phase=r2-state")), { kind: "r2-state" })
+  assert.deepEqual(routeWorkerRequest(new Request("https://worker.example/?phase=r2-mutate")), { kind: "r2-mutate" })
+  assert.deepEqual(routeWorkerRequest(new Request("https://worker.example/?phase=seeded-wordpress")), { kind: "probe", phase: "seeded-wordpress" })
+})
+
+test("Cloudflare translates Fetch requests and PHP responses without losing browser data", async () => {
+  const headers = new Headers({ "content-type": "application/octet-stream", "x-request-id": "first" })
+  headers.append("x-request-id", "second")
+  const request = new Request("https://worker.example/wp-admin/admin-ajax.php?action=save", {
+    method: "POST",
+    headers,
+    body: new Uint8Array([0, 1, 255]),
+  })
+  const phpRequest = await toPHPRequest(request)
+
+  assert.equal(phpRequest.method, "POST")
+  assert.equal(phpRequest.url, "/wp-admin/admin-ajax.php?action=save")
+  assert.equal(phpRequest.headers?.["x-request-id"], "first, second")
+  assert.deepEqual(Array.from(phpRequest.body as Uint8Array), [0, 1, 255])
+
+  const response = toFetchResponse(request, {
+    httpStatusCode: 201,
+    headers: { "content-type": ["application/octet-stream"], "set-cookie": ["first=1; Path=/", "second=2; Path=/"] },
+    bytes: new Uint8Array([255, 1, 0]),
+    errors: "",
+    exitCode: 0,
+  })
+  const responseHeaders = response.headers as Headers & { getSetCookie?: () => string[] }
+  assert.equal(response.status, 201)
+  assert.deepEqual(Array.from(new Uint8Array(await response.arrayBuffer())), [255, 1, 0])
+  assert.deepEqual(responseHeaders.getSetCookie?.() ?? [response.headers.get("set-cookie")], ["first=1; Path=/", "second=2; Path=/"])
+})
+
 test("Cloudflare runtime declares the paid-plan WordPress boot CPU budget", async () => {
   const config = JSON.parse(await readFile(new URL("../packages/runtime-cloudflare/wrangler.jsonc", import.meta.url), "utf8")) as { limits?: { cpu_ms?: number } }
   assert.equal(config.limits?.cpu_ms, 300_000)