From 6619cae6cc78d250cc27f36b573cd110b341ae52 Mon Sep 17 00:00:00 2001 From: ngthanhvu Date: Sat, 1 Aug 2026 12:26:43 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20c=E1=BA=ADp=20nh=E1=BA=ADt=20l=E1=BA=A1?= =?UTF-8?q?i=20cache=20image?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 7 +-- app/components/CommentReplies.vue | 2 +- app/pages/hoi-dap.vue | 3 +- app/pages/index.vue | 7 +-- server/api/image-proxy.get.ts | 73 ++++++++++++++----------------- 5 files changed, 43 insertions(+), 49 deletions(-) diff --git a/.env.example b/.env.example index 48548f4..f2ef357 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,4 @@ -SUPABASE_URL= -SUPABASE_KEY= -GIPHY_API_KEY= \ No newline at end of file +DATABASE_URL= +REDIS_URL= +GIPHY_API_KEY= +IMAGE_CACHE_TTL=604800 \ No newline at end of file diff --git a/app/components/CommentReplies.vue b/app/components/CommentReplies.vue index 071995e..cb49df1 100644 --- a/app/components/CommentReplies.vue +++ b/app/components/CommentReplies.vue @@ -30,7 +30,7 @@ function handleVote(replyId: number, vote: number) { function formatMentions(content: string) { let html = content.replace(/@(\S+)/g, '@$1') - html = html.replace(/!\[GIF\]\((https?:\/\/[^\s)]+)\)/g, 'GIF') + html = html.replace(/!\[GIF\]\((https?:\/\/[^\s)]+)\)/g, 'GIF') return html } diff --git a/app/pages/hoi-dap.vue b/app/pages/hoi-dap.vue index 351f6e1..bb7e717 100644 --- a/app/pages/hoi-dap.vue +++ b/app/pages/hoi-dap.vue @@ -47,7 +47,7 @@ function toggle(category: string, index: number) {
-
+

Hỏi & Đáp

@@ -86,6 +86,7 @@ function toggle(category: string, index: number) { .faq-leave-active { transition: opacity 0.2s ease, max-height 0.2s ease; } + .faq-enter-from, .faq-leave-to { opacity: 0; diff --git a/app/pages/index.vue b/app/pages/index.vue index 1d654a4..aadef9e 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -723,7 +723,7 @@ useHead({ class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">

-

+

{{ movie.name }}

@@ -767,7 +767,7 @@ useHead({ class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">
-

+

{{ movie.name }}

@@ -807,7 +807,8 @@ useHead({ : 'text-red-400'" class="size-3.5 shrink-0" />
- + {{ genre.name }}
diff --git a/server/api/image-proxy.get.ts b/server/api/image-proxy.get.ts index 4a72295..20e7a8c 100644 --- a/server/api/image-proxy.get.ts +++ b/server/api/image-proxy.get.ts @@ -1,27 +1,9 @@ import { createHash } from 'crypto' import { useRedis } from '../utils/redis' -const CACHE_TTL = 604800 // 7 ngày +const CACHE_TTL = 604800 // 7 ngày (Redis) +const BROWSER_TTL = 31536000 // 1 năm (browser immutable cache) const CACHE_PREFIX = 'img:' -const DEFAULT_WIDTH = null -const DEFAULT_QUALITY = 85 - -async function getCachedWebP(redis: any, key: string): Promise { - try { - const cached = await redis.getBuffer(key) - return cached || null - } catch { - return null - } -} - -async function setCachedWebP(redis: any, key: string, data: Buffer): Promise { - try { - await redis.set(key, data, 'EX', CACHE_TTL) - } catch { - // Ignore cache write errors - } -} export default defineEventHandler(async (event) => { const url = getQuery(event).url as string @@ -34,23 +16,27 @@ export default defineEventHandler(async (event) => { throw createError({ statusCode: 400, message: 'Invalid URL protocol' }) } - const width = getQuery(event).w ? parseInt(getQuery(event).w as string) : DEFAULT_WIDTH - const quality = getQuery(event).q ? parseInt(getQuery(event).q as string) : DEFAULT_QUALITY + const width = getQuery(event).w ? parseInt(getQuery(event).w as string) : undefined + const quality = getQuery(event).q ? parseInt(getQuery(event).q as string) : 85 + const cacheKey = CACHE_PREFIX + createHash('md5').update(`${url}|${width}|${quality}`).digest('hex') - const redis = useRedis() - // Check cache - const cached = await getCachedWebP(redis, cacheKey) - if (cached) { - setResponseHeader(event, 'cache-control', 'public, max-age=604800, immutable') - setResponseHeader(event, 'content-type', 'image/webp') - setResponseHeader(event, 'x-cache', 'HIT') - setResponseHeader(event, 'access-control-allow-origin', '*') - return cached + // Check Redis cache + try { + const cached = await redis.getBuffer(cacheKey) + if (cached) { + setResponseHeader(event, 'cache-control', `public, max-age=${BROWSER_TTL}, stale-while-revalidate=86400, immutable`) + setResponseHeader(event, 'content-type', 'image/webp') + setResponseHeader(event, 'x-cache', 'HIT') + setResponseHeader(event, 'access-control-allow-origin', '*') + return cached + } + } catch { + // Redis might be down, continue to fetch } - // Fetch original image + // Fetch from upstream let response: Response try { response = await fetch(url, { @@ -59,6 +45,7 @@ export default defineEventHandler(async (event) => { 'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8', 'Referer': new URL(url).origin, 'Origin': new URL(url).origin, + 'Cache-Control': 'no-cache', }, signal: AbortSignal.timeout(15000), }) @@ -72,40 +59,44 @@ export default defineEventHandler(async (event) => { const contentType = response.headers.get('content-type') || '' - // Skip non-image content types if (!contentType.startsWith('image/')) { throw createError({ statusCode: 400, message: 'Not an image' }) } const buffer = Buffer.from(await response.arrayBuffer()) - // Convert to WebP with optional resizing (dynamic import to avoid ESM resolution in dev) + // Convert to WebP let webpBuffer: Buffer + let converted = true try { const { default: sharp } = await import('sharp') - let transform = sharp(buffer) .webp({ quality, effort: 4 }) + let transform = sharp(buffer).webp({ quality, effort: 4 }) if (width) { transform = transform.resize(width, null, { withoutEnlargement: true }) } webpBuffer = await transform.toBuffer() - } catch (error: any) { + } catch { // If conversion fails, return original + setResponseHeader(event, 'cache-control', `public, max-age=3600, stale-while-revalidate=300`) setResponseHeader(event, 'content-type', contentType) - setResponseHeader(event, 'cache-control', 'public, max-age=3600') - setResponseHeader(event, 'x-cache', 'MISS') + setResponseHeader(event, 'x-cache', 'MISS (fallback)') setResponseHeader(event, 'access-control-allow-origin', '*') return buffer } // Cache in Redis - await setCachedWebP(redis, cacheKey, webpBuffer) + try { + await redis.set(cacheKey, webpBuffer, 'EX', CACHE_TTL) + } catch { + // Ignore cache write errors + } - setResponseHeader(event, 'cache-control', 'public, max-age=604800, immutable') + setResponseHeader(event, 'cache-control', `public, max-age=${BROWSER_TTL}, stale-while-revalidate=86400, immutable`) setResponseHeader(event, 'content-type', 'image/webp') setResponseHeader(event, 'content-length', webpBuffer.length.toString()) - setResponseHeader(event, 'x-cache', 'MISS') + setResponseHeader(event, 'x-cache', converted ? 'MISS (converted)' : 'MISS') setResponseHeader(event, 'access-control-allow-origin', '*') return webpBuffer