From 079e5b6413656663c3665e26a3ebee22127d612f Mon Sep 17 00:00:00 2001 From: junseublim <junslim11@gmail.com> Date: Mon, 30 Dec 2024 01:11:58 +0900 Subject: [PATCH 1/5] feat: remove unnecessary dependencies --- .../[boardId]/decorate/_components/DecorateScreenshot.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx index 6c96b60..fb3256e 100644 --- a/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx +++ b/src/app/board/[boardId]/decorate/_components/DecorateScreenshot.tsx @@ -32,7 +32,7 @@ const DecorateScreenshot = () => { getBoard(boardId).then((board) => { setBoardName(board.title) }) - }, [boardId]) + }, []) useEffect(() => { const takePreview = async () => { @@ -55,7 +55,7 @@ const DecorateScreenshot = () => { } takePreview() - }, [boardId, polaroidIds]) + }, []) const takeScreenshot = () => { setIsLoadingDownload(true) From 6a30a79d1dd2f5e70b4c609586f3866424f13371 Mon Sep 17 00:00:00 2001 From: junseublim <junslim11@gmail.com> Date: Mon, 30 Dec 2024 01:12:18 +0900 Subject: [PATCH 2/5] feat: remove unnecessary dependencies --- .github/workflows/cicd.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml index e802824..f536eb6 100644 --- a/.github/workflows/cicd.yml +++ b/.github/workflows/cicd.yml @@ -3,7 +3,7 @@ name: Deploy to AWS EC2 on: push: branches: - - develop + - feature/screenshot-performance release: types: [published] From 1b3cc236a99d9cb3b7b114f7d9f48bb4dc94e7fe Mon Sep 17 00:00:00 2001 From: junseublim <junslim11@gmail.com> Date: Mon, 30 Dec 2024 18:37:16 +0900 Subject: [PATCH 3/5] feat: puppeteer performance --- .github/workflows/cicd.yml | 2 +- src/app/board/api/screenshot/route.ts | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml index f536eb6..4210315 100644 --- a/.github/workflows/cicd.yml +++ b/.github/workflows/cicd.yml @@ -46,4 +46,4 @@ jobs: - name: Delete existing container run: docker rm -f polabo-fe || true - name: Run container - run: docker run -d -p 3000:3000 --name polabo-fe ${{ vars.DOCKER_IMAGE }} + run: docker run -d -p 3000:3000 --shm-size=1g --name polabo-fe ${{ vars.DOCKER_IMAGE }} diff --git a/src/app/board/api/screenshot/route.ts b/src/app/board/api/screenshot/route.ts index 000114f..e28c1e9 100644 --- a/src/app/board/api/screenshot/route.ts +++ b/src/app/board/api/screenshot/route.ts @@ -13,7 +13,17 @@ type RequestBodyType = { } const initializeBrowser = async () => { - const browser = await puppeteer.launch({ args: ['--no-sandbox'] }) + const browser = await puppeteer.launch({ + args: [ + '--no-sandbox', + '--disable-setuid-sandbox', + '--disable-gpu', + '--no-zygote', + '--no-first-run', + '--disable-default-apps', + ], + defaultViewport: null, + }) const page = await browser.newPage() await page.setViewport({ width: 1080, From 8ccc204e8010e2c579ea4b1d451fb6e6c617ac86 Mon Sep 17 00:00:00 2001 From: junseublim <junslim11@gmail.com> Date: Mon, 30 Dec 2024 18:50:55 +0900 Subject: [PATCH 4/5] feat: use single browser instance --- src/app/board/api/screenshot/route.ts | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/app/board/api/screenshot/route.ts b/src/app/board/api/screenshot/route.ts index e28c1e9..d0d3931 100644 --- a/src/app/board/api/screenshot/route.ts +++ b/src/app/board/api/screenshot/route.ts @@ -1,5 +1,5 @@ import { NextResponse } from 'next/server' -import puppeteer, { Browser } from 'puppeteer' +import puppeteer, { Browser, Page } from 'puppeteer' import { StickerStyle } from '@/types' import { createPolaroidSearchParams, @@ -12,8 +12,10 @@ type RequestBodyType = { stickers: StickerStyle[] } +let browser: Browser | null = null + const initializeBrowser = async () => { - const browser = await puppeteer.launch({ + browser = await puppeteer.launch({ args: [ '--no-sandbox', '--disable-setuid-sandbox', @@ -24,17 +26,23 @@ const initializeBrowser = async () => { ], defaultViewport: null, }) - const page = await browser.newPage() +} + +const openPage = async () => { + if (browser === null) { + await initializeBrowser() + } + + const page = await browser!.newPage() await page.setViewport({ width: 1080, height: 1920, }) - return { browser, page } + return page } export async function POST(request: Request) { - let browser: Browser | null = null - + let page: Page | null = null try { const { boardId, @@ -48,9 +56,7 @@ export async function POST(request: Request) { boardId, )}/screenshot?${polaroidParams}&${stickerParams}` - const { browser: initializedBrowser, page } = await initializeBrowser() - browser = initializedBrowser - + page = await openPage() await page.goto(url, { waitUntil: 'networkidle2' }) const element = await page.$('div#screenshot_target') @@ -71,7 +77,7 @@ export async function POST(request: Request) { return new NextResponse('Error taking screenshot', { status: 500 }) } finally { if (browser) { - await browser.close() + await page?.close() } } } From 5f5205083a52e5f5f50caab7af4c927a4ca5bf4a Mon Sep 17 00:00:00 2001 From: junseublim <junslim11@gmail.com> Date: Mon, 30 Dec 2024 19:41:07 +0900 Subject: [PATCH 5/5] feat: reset deploy branch back to develop --- .github/workflows/cicd.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml index 4210315..d4aa9de 100644 --- a/.github/workflows/cicd.yml +++ b/.github/workflows/cicd.yml @@ -3,7 +3,7 @@ name: Deploy to AWS EC2 on: push: branches: - - feature/screenshot-performance + - develop release: types: [published]