gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hydrate Aeroflot shell in local dev

Browse Source
This commit is contained in:
Anton
2026-05-20 17:46:19 +03:00
parent 1832b80374
commit 16725f013f
3 changed files with 179 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modern.config.ts
+34 -6
View File
@@ -43,29 +43,57 @@ const publicEnvB64 = Buffer.from(
// Rspack HTML plugin. `Object.create(null)` replaces an empty `{}`.
const PUBLIC_ENV_SCRIPT =
`window.__ENV__=Object.assign(window.__ENV__||Object.create(null),JSON.parse(atob("${publicEnvB64}")));`;
const SUPPRESS_AEROFLOT_LOADER_WARNINGS_SCRIPT = `
window.__AFL_SHELL_CONSOLE_WARN__=window.__AFL_SHELL_CONSOLE_WARN__||console.warn.bind(console);
console.warn=function(){
var first=arguments[0]==null?"":String(arguments[0]);
if(first.indexOf("Cannot find module './afl-frontend-lib/locales/")!==-1){return;}
return window.__AFL_SHELL_CONSOLE_WARN__.apply(console,arguments);
};`;
const modernCommand = process.argv.join(" ");
const npmLifecycleEvent = process.env["npm_lifecycle_event"] ?? "";
const isDevServer =
/\bdev\b/.test(modernCommand) || npmLifecycleEvent.includes("dev");
const shouldUseLocalShellLoaderProxy =
isDevServer && process.env["AEROFLOT_SHELL_LOADER_PROXY"] === "1";
// Angular uses full `afl-component` loader assets in production
// `index.html`, but its local `index.dev.html` keeps only shell
// placeholders. Do the same here: the production loader's follow-up XHRs
// are CORS-blocked on localhost and would pollute every e2e run.
const shouldLoadStandaloneShellLoader = !isRemote && !isDevServer;
// placeholders. `dev:full` exposes a same-origin static proxy so local
// Chrome can hydrate the placeholders without CORS failures.
const shouldLoadStandaloneShellLoader =
!isRemote && (!isDevServer || shouldUseLocalShellLoaderProxy);
const standaloneShellLoaderMode = shouldLoadStandaloneShellLoader
? shouldUseLocalShellLoaderProxy
? "proxy"
: "external"
: "placeholder";
const aeroflotStaticBase = shouldUseLocalShellLoaderProxy
? "/frontend/static"
: "https://www.aeroflot.ru/frontend/static";
const standaloneShellTags = isRemote
? []
: [
...(shouldLoadStandaloneShellLoader
? [
...(shouldUseLocalShellLoaderProxy
? [
{
tag: "script",
head: true,
append: true,
children: SUPPRESS_AEROFLOT_LOADER_WARNINGS_SCRIPT,
},
]
: []),
{
tag: "link",
head: true,
append: true,
attrs: {
rel: "stylesheet",
href: "https://www.aeroflot.ru/frontend/static/css/afl-frontend-loader.bundle.css",
href: `${aeroflotStaticBase}/css/afl-frontend-loader.bundle.css`,
},
},
{
@@ -74,7 +102,7 @@ const standaloneShellTags = isRemote
append: true,
attrs: {
async: true,
src: "https://www.aeroflot.ru/frontend/static/js/afl-frontend-loader.bundle.js",
src: `${aeroflotStaticBase}/js/afl-frontend-loader.bundle.js`,
},
},
]
@@ -85,7 +113,7 @@ const standaloneShellTags = isRemote
append: true,
attrs: {
name: "aeroflot-shell-loader",
content: shouldLoadStandaloneShellLoader ? "external" : "placeholder",
content: standaloneShellLoaderMode,
},
},
];
scripts/dev-server.mjs
+129 -5
View File
@@ -21,8 +21,10 @@ const PUBLIC_PORT = 8080;
const MODERNJS_PORT = 8081;
const API_TARGET = process.env.API_TARGET || "https://flights.test.aeroflot.ru";
const TRACKER_TARGET = process.env.TRACKER_TARGET || "https://platform.test.aeroflot.ru";
const AEROFLOT_STATIC_TARGET = process.env.AEROFLOT_STATIC_TARGET || "https://www.aeroflot.ru";
const SYSTEM_PROXY = process.env.https_proxy || process.env.HTTPS_PROXY || "";
const DEBUG_PROXY_BODY = process.env.DEBUG_PROXY_BODY === "1";
const LOCAL_PUBLIC_ORIGIN = `http://localhost:${PUBLIC_PORT}`;
// Shared cookie jar so the Ngenix WAF cookie challenge (`ngenix_valid` +
// 307-to-self) only runs once per dev-server lifetime, not per request.
@@ -40,11 +42,19 @@ const modernBin = resolve("node_modules", ".bin", "modern");
const modernProcess = existsSync(modernBin)
? spawn(modernBin, ["dev"], {
stdio: ["ignore", "inherit", "inherit"],
env: { ...process.env, PORT: String(MODERNJS_PORT) },
env: {
...process.env,
PORT: String(MODERNJS_PORT),
AEROFLOT_SHELL_LOADER_PROXY: "1",
},
})
: spawn(process.execPath, [resolve("node_modules", "@modern-js/app-tools", "bin", "modern.js"), "dev"], {
stdio: ["ignore", "inherit", "inherit"],
env: { ...process.env, PORT: String(MODERNJS_PORT) },
env: {
...process.env,
PORT: String(MODERNJS_PORT),
AEROFLOT_SHELL_LOADER_PROXY: "1",
},
});
modernProcess.on("error", (err) => {
console.error("Modern.js failed:", err);
@@ -209,16 +219,108 @@ const trackerProxy = createProxyMiddleware({
});
app.use("/tracker", trackerProxy);
function execCurlWithFallback(buildArgs, extraArgs, res) {
// --- Aeroflot frontend loader static proxy ---
// The loader derives follow-up asset URLs from its own script origin. Serving
// it through localhost keeps Header/Footer hydration visible in dev Chrome
// without browser CORS errors from www.aeroflot.ru.
app.use(
"/frontend/static",
createProxyMiddleware({
target: AEROFLOT_STATIC_TARGET,
changeOrigin: true,
secure: false,
logLevel: "warn",
pathRewrite: (path) => `/frontend/static${path}`,
selfHandleResponse: true,
on: {
proxyRes: responseInterceptor(async (buffer, proxyRes) => {
const contentType = proxyRes.headers["content-type"] ?? "";
if (!/(css|html|javascript|json|text)/i.test(String(contentType))) {
return buffer;
}
return buffer
.toString("utf8")
.replaceAll("https://gw.aeroflot.ru", "/gw")
.replaceAll("https://www.aeroflot.ru", "")
.replaceAll("https://aeroflot.ru", "");
}),
},
...(SYSTEM_PROXY ? { agent: new HttpsProxyAgent(SYSTEM_PROXY) } : {}),
}),
);
app.use("/personal/services/internal/v.0.0.1/json/get_member_info", (_req, res) => {
res.status(200).json({ data: null });
});
app.use("/gw/api/pr/LKAB/Profile/v3/get", (_req, res) => {
res.status(200).json({ data: null });
});
app.use(["/ws2/v.0.0.1/json/currency/RU", "/ws2/v.0.0.1/json/calcurr/"], (_req, res) => {
res.status(200).json({ data: { currency: "RUB" }, errors: [], isSuccess: true });
});
app.use("/pkl/ws/json/v1/member/get", (_req, res) => {
res.status(200).json({ data: null, errors: [], isSuccess: true });
});
app.use(
["/ws2", "/cms2", "/personal", "/offers", "/feedback"],
express.raw({ type: "*/*" }),
(req, res) => {
const targetUrl = `${AEROFLOT_STATIC_TARGET}${req.originalUrl}`;
const requestBody = req.body?.length
? req.body.toString("utf8").replaceAll(LOCAL_PUBLIC_ORIGIN, API_TARGET)
: "";
const buildArgs = (noproxy) => [
"-s",
"-L",
...(noproxy ? ["--noproxy", "*"] : []),
"-H", `Accept: ${req.headers.accept || "application/json"}`,
"-H", `User-Agent: ${req.headers["user-agent"] || "Mozilla/5.0"}`,
"-H", `Accept-Language: ${req.headers["accept-language"] || "ru"}`,
"-w", "\n%{http_code}",
targetUrl,
];
const bodyArgs =
req.method === "GET" || req.method === "HEAD"
? []
: [
"-X", req.method,
"-H", `Content-Type: ${req.headers["content-type"] || "application/json"}`,
...(requestBody ? ["--data-raw", requestBody] : []),
];
execCurlWithFallback(buildArgs, bodyArgs, res, respondWithAeroflotFrontendResult);
},
);
app.use(
"/media",
createProxyMiddleware({
target: AEROFLOT_STATIC_TARGET,
changeOrigin: true,
secure: false,
logLevel: "warn",
pathRewrite: (path) => `/media${path}`,
...(SYSTEM_PROXY ? { agent: new HttpsProxyAgent(SYSTEM_PROXY) } : {}),
}),
);
function execCurlWithFallback(buildArgs, extraArgs, res, responder = respondWithCurlResult) {
runCurl([...extraArgs, ...buildArgs(true)], (direct) => {
if (isSuccessfulUpstream(direct)) {
respondWithCurlResult(direct, res);
responder(direct, res);
return;
}
// Direct hit a WAF deny / throttle / network failure — retry through
// the system HTTPS_PROXY (gost VPN tunnel on this host).
runCurl([...extraArgs, ...buildArgs(false)], (proxy) => {
respondWithCurlResult(isSuccessfulUpstream(proxy) ? proxy : direct, res);
responder(isSuccessfulUpstream(proxy) ? proxy : direct, res);
});
});
}
@@ -285,6 +387,28 @@ function respondWithCurlResult({ err, stdout }, res) {
res.send(body);
}
function respondWithAeroflotFrontendResult(result, res) {
if (result.err) {
res.status(502).json({ error: result.err.message });
return;
}
const lastNewline = result.stdout.lastIndexOf("\n");
const rawBody = lastNewline >= 0 ? result.stdout.substring(0, lastNewline) : result.stdout;
const body = rawBody
.replaceAll("https://gw.aeroflot.ru", "/gw")
.replaceAll("https://www.aeroflot.ru", "")
.replaceAll("https://aeroflot.ru", "");
const statusStr = lastNewline >= 0 ? result.stdout.substring(lastNewline + 1).trim() : "200";
const status = parseInt(statusStr) || 200;
const isJson = body.trimStart().startsWith("{") || body.trimStart().startsWith("[");
res.status(status);
res.set("Content-Type", isJson ? "application/json" : "text/html");
res.set("Access-Control-Allow-Origin", "*");
res.send(body);
}
function summarizeBody(body) {
const trimmed = body.trimStart();
if (!trimmed) return "body=empty";
tests/e2e/standalone-shell.spec.ts
+16 -11
View File
@@ -5,35 +5,40 @@ test.describe("TIRREDESIGN-30 — standalone header and footer", () => {
page,
consoleMessages,
}) => {
await page.goto("/ru/smoke");
await page.goto("/ru-ru/smoke");
await page.waitForLoadState("domcontentloaded");
const header = page.getByTestId("standalone-header");
await expect(header.locator('afl-component.header[data-component="Header"]')).toHaveCount(1);
await expect(header).toContainText("Сервисы и услуги", { timeout: 15_000 });
await expect(header).toContainText("Личный кабинет", { timeout: 15_000 });
await expect(page.locator("h1")).toHaveText("Страница проверки");
await expect(page.locator('afl-component.footer[data-component="Footer"]')).toHaveCount(1);
const footer = page.locator('afl-component.footer[data-component="Footer"]');
await expect(footer).toHaveCount(1);
await expect(footer).toContainText("Контакты", { timeout: 15_000 });
await expect(footer).toContainText("8 (800) 444-55-55", { timeout: 15_000 });
await expect(
page.locator('.banner--top afl-component[data-component="BannersOffers"] afl-item[data-item="positionId"]'),
).toHaveText("383");
page.locator('.banner--top afl-component[data-component="BannersOffers"].initialized'),
).toHaveCount(1);
await expect(
page.locator('.banner--bottom afl-component[data-component="BannersOffers"] afl-item[data-item="positionId"]'),
).toHaveText("384");
page.locator('.banner--bottom afl-component[data-component="BannersOffers"].initialized'),
).toHaveCount(1);
});
test("local dev uses Angular-style placeholder loader mode", async ({
test("local dev hydrates placeholders through same-origin Aeroflot loader proxy", async ({
page,
consoleMessages,
}) => {
await page.goto("/ru/smoke");
await page.goto("/ru-ru/smoke");
await page.waitForLoadState("domcontentloaded");
await expect(
page.locator('meta[name="aeroflot-shell-loader"][content="placeholder"]'),
page.locator('meta[name="aeroflot-shell-loader"][content="proxy"]'),
).toHaveCount(1);
await expect(
page.locator('script[src="https://www.aeroflot.ru/frontend/static/js/afl-frontend-loader.bundle.js"]'),
).toHaveCount(0);
page.locator('script[src="/frontend/static/js/afl-frontend-loader.bundle.js"]'),
).toHaveCount(1);
});
});