diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml index e802824..d4aa9de 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/[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) diff --git a/src/app/board/api/screenshot/route.ts b/src/app/board/api/screenshot/route.ts index 000114f..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,19 +12,37 @@ type RequestBodyType = { stickers: StickerStyle[] } +let browser: Browser | null = null + const initializeBrowser = async () => { - const browser = await puppeteer.launch({ args: ['--no-sandbox'] }) - const page = await browser.newPage() + browser = await puppeteer.launch({ + args: [ + '--no-sandbox', + '--disable-setuid-sandbox', + '--disable-gpu', + '--no-zygote', + '--no-first-run', + '--disable-default-apps', + ], + defaultViewport: null, + }) +} + +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, @@ -38,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') @@ -61,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() } } }