feat(static-assets): introduce StaticAssetHostService and enhance static asset handling and i18n

- Added StaticAssetHostService to manage static asset host resolution with caching.
- Updated StaticAssetService and StaticDashboardService to utilize the new static asset host resolver.
- Enhanced StaticWebController to pass request host information for improved asset handling.
- Refactored static asset interfaces to support new functionality.
- Integrated CORS headers and cache policies for better asset management.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

be/apps/core/src/modules/infrastructure/static-web/static-asset-host.service.ts

@@ -0,0 +1,91 @@
+import { createLogger } from '@afilmory/framework'
+import { SystemSettingService } from 'core/modules/configuration/system-setting/system-setting.service'
+import { injectable } from 'tsyringe'
+
+@injectable()
+export class StaticAssetHostService {
+  private readonly logger = createLogger('StaticAssetHostService')
+  private readonly cache = new Map<string, string | null>()
+
+  constructor(private readonly systemSettingService: SystemSettingService) {}
+
+  async getStaticAssetHost(requestHost?: string | null): Promise<string | null> {
+    const cacheKey = this.buildCacheKey(requestHost)
+    if (this.cache.has(cacheKey)) {
+      return this.cache.get(cacheKey) ?? null
+    }
+
+    const resolved = await this.resolveStaticAssetHost(requestHost)
+    this.cache.set(cacheKey, resolved ?? null)
+    return resolved ?? null
+  }
+
+  private buildCacheKey(requestHost?: string | null): string {
+    if (!requestHost) {
+      return '__default__'
+    }
+    return requestHost.trim().toLowerCase()
+  }
+
+  private async resolveStaticAssetHost(requestHost?: string | null): Promise<string | null> {
+    try {
+      const settings = await this.systemSettingService.getSettings()
+      const baseDomain = settings.baseDomain?.trim().toLowerCase()
+      if (!baseDomain) {
+        return null
+      }
+
+      if (this.isLocalDomain(baseDomain)) {
+        const port = this.extractPort(requestHost)
+        return port ? `//static.${baseDomain}:${port}` : `//static.${baseDomain}`
+      }
+
+      return `//static.${baseDomain}`
+    } catch (error) {
+      this.logger.warn('Failed to load system settings for static asset host', error)
+      return null
+    }
+  }
+
+  private isLocalDomain(baseDomain: string): boolean {
+    if (baseDomain === 'localhost') {
+      return true
+    }
+
+    if (baseDomain.endsWith('.localhost')) {
+      return true
+    }
+
+    if (/^\d{1,3}(?:\.\d{1,3}){3}$/.test(baseDomain)) {
+      return true
+    }
+
+    return false
+  }
+
+  private extractPort(requestHost?: string | null): string | null {
+    if (!requestHost) {
+      return null
+    }
+
+    const host = requestHost.trim()
+    if (!host) {
+      return null
+    }
+
+    if (host.startsWith('[')) {
+      const closingIndex = host.indexOf(']')
+      if (closingIndex !== -1 && closingIndex + 1 < host.length && host[closingIndex + 1] === ':') {
+        return host.slice(closingIndex + 2)
+      }
+      return null
+    }
+
+    const segments = host.split(':')
+    if (segments.length <= 1) {
+      return null
+    }
+
+    return segments.at(-1)
+  }
+}

be/apps/core/src/modules/infrastructure/static-web/static-asset.service.ts

@@ -31,6 +31,11 @@ export interface StaticAssetServiceOptions {
   loggerName?: string
   rewriteAssetReferences?: boolean
   assetLinkRels?: Iterable<string>
+  staticAssetHostResolver?: (requestHost?: string | null) => Promise<string | null>
+}
+
+export interface StaticAssetRequestOptions {
+  requestHost?: string | null
 }
 
 export interface ResolvedStaticAsset {
@@ -42,18 +47,25 @@ export interface ResolvedStaticAsset {
 export abstract class StaticAssetService {
   protected readonly logger: PrettyLogger
   private readonly assetLinkRels: ReadonlySet<string>
+  private readonly staticAssetHostResolver?: (requestHost?: string | null) => Promise<string | null>
 
   private staticRoot: string | null | undefined
+  private staticAssetHosts = new Map<string, string | null>()
   private warnedMissingRoot = false
 
   protected constructor(private readonly options: StaticAssetServiceOptions) {
     this.logger = createLogger(options.loggerName ?? this.constructor.name)
     this.assetLinkRels = new Set(
       options.assetLinkRels ? Array.from(options.assetLinkRels, (rel) => rel.toLowerCase()) : DEFAULT_ASSET_LINK_RELS,
     )
+    this.staticAssetHostResolver = options.staticAssetHostResolver
   }
 
-  async handleRequest(fullPath: string, headOnly: boolean): Promise<Response | null> {
+  async handleRequest(
+    fullPath: string,
+    headOnly: boolean,
+    options?: StaticAssetRequestOptions,
+  ): Promise<Response | null> {
     const staticRoot = await this.resolveStaticRoot()
     if (!staticRoot) {
       return null
@@ -65,7 +77,7 @@ export abstract class StaticAssetService {
       return null
     }
 
-    return await this.createResponse(target, headOnly)
+    return await this.createResponse(target, headOnly, options)
   }
 
   protected get routeSegment(): string {
@@ -78,10 +90,10 @@ export abstract class StaticAssetService {
 
   protected async decorateDocument(_document: StaticAssetDocument, _file: ResolvedStaticAsset): Promise<void> {}
 
-  protected rewriteStaticAssetReferences(document: StaticAssetDocument): void {
+  protected rewriteStaticAssetReferences(document: StaticAssetDocument, staticAssetHost: string | null): void {
     const prefixAttr = (element: Element, attr: string) => {
       const current = element.getAttribute(attr)
-      const next = this.prefixStaticAssetPath(current)
+      const next = this.applyStaticAssetPrefixes(current, staticAssetHost)
       if (next !== null && next !== current) {
         element.setAttribute(attr, next)
       }
@@ -106,7 +118,7 @@ export abstract class StaticAssetService {
 
     document.querySelectorAll('img[srcset], source[srcset]').forEach((element) => {
       const current = element.getAttribute('srcset')
-      const next = this.prefixSrcset(current)
+      const next = this.prefixSrcset(current, staticAssetHost)
       if (next !== null && next !== current) {
         element.setAttribute('srcset', next)
       }
@@ -148,7 +160,12 @@ export abstract class StaticAssetService {
     return value === trimmed ? prefixed : value.replace(trimmed, prefixed)
   }
 
-  private prefixSrcset(value: string | null): string | null {
+  private applyStaticAssetPrefixes(value: string | null, staticAssetHost: string | null): string | null {
+    const prefixed = this.prefixStaticAssetPath(value)
+    return this.prefixStaticAssetHost(prefixed, staticAssetHost)
+  }
+
+  private prefixSrcset(value: string | null, staticAssetHost: string | null): string | null {
     if (!value) {
       return value
     }
@@ -160,13 +177,27 @@ export abstract class StaticAssetService {
       }
 
       const [url, ...rest] = trimmed.split(/\s+/)
-      const prefixed = this.prefixStaticAssetPath(url) ?? url
+      const prefixed = this.applyStaticAssetPrefixes(url, staticAssetHost) ?? url
       return [prefixed, ...rest].join(' ').trim()
     })
 
     return parts.join(', ')
   }
 
+  private prefixStaticAssetHost(value: string | null, staticAssetHost: string | null): string | null {
+    if (!value || !staticAssetHost) {
+      return value
+    }
+
+    const trimmed = value.trim()
+    if (!trimmed.startsWith(this.routeSegment)) {
+      return value
+    }
+
+    const rewrote = `${staticAssetHost}${trimmed}`
+    return value === trimmed ? rewrote : value.replace(trimmed, rewrote)
+  }
+
   private async resolveStaticRoot(): Promise<string | null> {
     if (this.staticRoot !== undefined) {
       return this.staticRoot
@@ -307,9 +338,13 @@ export abstract class StaticAssetService {
     return relativePath !== '' && !relativePath.startsWith('..') && !isAbsolute(relativePath)
   }
 
-  private async createResponse(file: ResolvedStaticAsset, headOnly: boolean): Promise<Response> {
+  private async createResponse(
+    file: ResolvedStaticAsset,
+    headOnly: boolean,
+    options?: StaticAssetRequestOptions,
+  ): Promise<Response> {
     if (this.isHtml(file.relativePath)) {
-      return await this.createHtmlResponse(file, headOnly)
+      return await this.createHtmlResponse(file, headOnly, options)
     }
 
     const mimeType = lookupMimeType(file.absolutePath) || 'application/octet-stream'
@@ -319,6 +354,7 @@ export abstract class StaticAssetService {
     headers.set('last-modified', file.stats.mtime.toUTCString())
 
     this.applyCacheHeaders(headers, file.relativePath)
+    this.applyCorsHeaders(headers)
 
     if (headOnly) {
       return new Response(null, { headers, status: 200 })
@@ -329,14 +365,19 @@ export abstract class StaticAssetService {
     return new Response(body, { headers, status: 200 })
   }
 
-  private async createHtmlResponse(file: ResolvedStaticAsset, headOnly: boolean): Promise<Response> {
+  private async createHtmlResponse(
+    file: ResolvedStaticAsset,
+    headOnly: boolean,
+    options?: StaticAssetRequestOptions,
+  ): Promise<Response> {
     const html = await readFile(file.absolutePath, 'utf-8')
-    const transformed = await this.transformIndexHtml(html, file)
+    const transformed = await this.transformIndexHtml(html, file, options)
     const headers = new Headers()
     headers.set('content-type', 'text/html; charset=utf-8')
     headers.set('content-length', `${Buffer.byteLength(transformed, 'utf-8')}`)
     headers.set('last-modified', file.stats.mtime.toUTCString())
     this.applyCacheHeaders(headers, file.relativePath)
+    this.applyCorsHeaders(headers)
 
     if (headOnly) {
       return new Response(null, { headers, status: 200 })
@@ -345,12 +386,17 @@ export abstract class StaticAssetService {
     return new Response(transformed, { headers, status: 200 })
   }
 
-  private async transformIndexHtml(html: string, file: ResolvedStaticAsset): Promise<string> {
+  private async transformIndexHtml(
+    html: string,
+    file: ResolvedStaticAsset,
+    options?: StaticAssetRequestOptions,
+  ): Promise<string> {
     try {
       const document = DOM_PARSER.parseFromString(html, 'text/html') as unknown as StaticAssetDocument
       await this.decorateDocument(document, file)
       if (this.shouldRewriteAssetReferences(file)) {
-        this.rewriteStaticAssetReferences(document)
+        const staticAssetHost = await this.getStaticAssetHost(options?.requestHost)
+        this.rewriteStaticAssetReferences(document, staticAssetHost)
       }
       return document.documentElement.outerHTML
     } catch (error) {
@@ -359,6 +405,35 @@ export abstract class StaticAssetService {
     }
   }
 
+  private async getStaticAssetHost(requestHost?: string | null): Promise<string | null> {
+    if (!this.staticAssetHostResolver) {
+      return null
+    }
+
+    const cacheKey = this.buildStaticAssetHostCacheKey(requestHost)
+    if (this.staticAssetHosts.has(cacheKey)) {
+      return this.staticAssetHosts.get(cacheKey) ?? null
+    }
+
+    try {
+      const resolved = await this.staticAssetHostResolver(requestHost)
+      this.staticAssetHosts.set(cacheKey, resolved ?? null)
+      return resolved ?? null
+    } catch (error) {
+      this.logger.warn('Failed to resolve static asset host', error)
+      this.staticAssetHosts.set(cacheKey, null)
+    }
+
+    return null
+  }
+
+  private buildStaticAssetHostCacheKey(requestHost?: string | null): string {
+    if (!requestHost) {
+      return '__default__'
+    }
+    return requestHost.trim().toLowerCase()
+  }
+
   private shouldTreatAsImmutable(relativePath: string): boolean {
     if (this.isHtml(relativePath)) {
       return false
@@ -374,6 +449,12 @@ export abstract class StaticAssetService {
     headers.set('surrogate-control', policy.cdn)
   }
 
+  private applyCorsHeaders(headers: Headers): void {
+    headers.set('access-control-allow-origin', '*')
+    headers.set('access-control-allow-methods', 'GET, HEAD, OPTIONS')
+    headers.set('access-control-allow-headers', 'content-type')
+  }
+
   private resolveCachePolicy(relativePath: string): { browser: string; cdn: string } {
     if (this.isHtml(relativePath)) {
       return {

be/apps/core/src/modules/infrastructure/static-web/static-dashboard.service.ts

@@ -5,6 +5,7 @@ import { injectable } from 'tsyringe'
 
 import type { StaticAssetDocument } from './static-asset.service'
 import { StaticAssetService } from './static-asset.service'
+import { StaticAssetHostService } from './static-asset-host.service'
 
 const MODULE_DIR = fileURLToPath(new URL('.', import.meta.url))
 
@@ -36,11 +37,12 @@ const STATIC_DASHBOARD_ROOT_CANDIDATES = Array.from(
 
 @injectable()
 export class StaticDashboardService extends StaticAssetService {
-  constructor() {
+  constructor(private readonly staticAssetHostService: StaticAssetHostService) {
     super({
       routeSegment: STATIC_DASHBOARD_ROUTE_SEGMENT,
       rootCandidates: STATIC_DASHBOARD_ROOT_CANDIDATES,
       loggerName: 'StaticDashboardService',
+      staticAssetHostResolver: (requestHost) => staticAssetHostService.getStaticAssetHost(requestHost),
     })
   }
 

be/apps/core/src/modules/infrastructure/static-web/static-web.controller.ts

@@ -101,7 +101,9 @@ export class StaticWebController {
   private async serve(context: Context, service: StaticAssetService, headOnly: boolean): Promise<Response> {
     const pathname = context.req.path
     const normalizedPath = this.normalizeRequestPath(pathname, service)
-    const response = await service.handleRequest(normalizedPath, headOnly)
+    const response = await service.handleRequest(normalizedPath, headOnly, {
+      requestHost: this.resolveRequestHost(context),
+    })
     if (response) {
       return response
     }
@@ -191,6 +193,25 @@ export class StaticWebController {
     return trimmed
   }
 
+  private resolveRequestHost(context: Context): string | null {
+    const forwardedHost = context.req.header('x-forwarded-host')?.trim()
+    if (forwardedHost) {
+      return forwardedHost
+    }
+
+    const host = context.req.header('host')?.trim()
+    if (host) {
+      return host
+    }
+
+    try {
+      const url = new URL(context.req.url)
+      return url.host
+    } catch {
+      return null
+    }
+  }
+
   private isReservedTenant({ root = false }: { root?: boolean } = {}): boolean {
     const tenantContext = getTenantContext()
     if (!tenantContext) {

be/apps/core/src/modules/infrastructure/static-web/static-web.module.ts

@@ -1,14 +1,16 @@
 import { Module } from '@afilmory/framework'
 import { SiteSettingModule } from 'core/modules/configuration/site-setting/site-setting.module'
+import { SystemSettingModule } from 'core/modules/configuration/system-setting/system-setting.module'
 import { ManifestModule } from 'core/modules/content/manifest/manifest.module'
 
+import { StaticAssetHostService } from './static-asset-host.service'
 import { StaticDashboardService } from './static-dashboard.service'
 import { StaticWebController } from './static-web.controller'
 import { StaticWebService } from './static-web.service'
 
 @Module({
-  imports: [SiteSettingModule, ManifestModule],
+  imports: [SiteSettingModule, SystemSettingModule, ManifestModule],
   controllers: [StaticWebController],
-  providers: [StaticWebService, StaticDashboardService],
+  providers: [StaticAssetHostService, StaticWebService, StaticDashboardService],
 })
 export class StaticWebModule {}