사이드카-브라우저샷 소개

6961 단어 puppeteerlaravelphpaws
올해 초 저는 새로운 Laravel 패키지를 출시했습니다. sidecar-browsershot 이라고 합니다. 그것이 무엇을 하는지, 내부적으로 어떻게 작동하는지, 무엇을 사용할 수 있는지는 다음과 같습니다.

이름에서 알 수 있듯이 패키지는 Sidecar for Laravel - Laravel에서 배포 및 실행하는 패키지AWS Lambdas와 PHP로 제어하는 ​​패키지Browsershot를 결합합니다.

Browsershot을 사용하려면 일반적으로 서버에 Node와 Google Chrome이 설치되어 있어야 합니다. 서버에 설치된 소프트웨어를 제어할 수 없거나 서버에서 Chrome을 실행할 리소스가 충분하지 않은 경우 문제가 될 수 있습니다(브라우저 부팅 및 실행은 CPU를 많이 사용하는 작업).
여기에서 sidecar-browsershot 단계를 수행하면 Node와 Chrome이 모두 필요하지 않습니다. 모든 것은 AWS Lambda에서 실행됩니다. 🤯

패키지를 설치하고 사이드카를 설정한 후에는 Browsershot에 대한 호출을 BrowsershotLambda로 교체하기만 하면 됩니다. 다음은 sidecar-browsershot을 사용하는 데 필요한 코드 변경 사항을 설명하는 코드 예제입니다.

use Spatie\Browsershot\Browsershot;
use Wnx\SidecarBrowsershot\BrowsershotLambda;

// Run Chrome on your server and create a screenshot.
Browsershot::url('https://example.com')
    ->save('screenshot.jpg');

// Run Chrome on AWS Lambda and create a screenshot.
BrowsershotLambda::url('https://example.com')
    ->save('screenshot.jpg');


깔끔하죠?

인형극 하지만 어떻게 작동합니까?



패키지에는 원래 Spatie 패키지에서 BrowsershotLambda -class를 확장하는 Browsershot -class가 포함되어 있습니다.
BrowsershotLambda는 callBrowser -메소드를 덮어쓰고 이름에서 알 수 있듯이 브라우저 호출 방식을 변경합니다.
Puppeteer와 Chrome을 로컬에서 실행하는 대신 호출이 BrowsershotFunction -class에 위임되어 AWS Lambda에서 Google Chrome을 실행합니다.

패키지의 BrowsershotFunction는 거인의 어깨 위에 있으며 Spatie의 JavaScript 코드#와 자체 JavaScript를 결합하여 모든 것이 잘 작동하도록 합니다.

(chrome-aws-lambda-layer는 퍼즐에서 중요한 부분입니다. 이 AWS Lambda 레이어는 Google Chrome의 Brotli 압축 버전으로 AWS의 한계에 거의 맞지 않습니다. 이 레이어 덕분에 sidecar-browsershot이 작동합니다.)

크롬-aws-람다-레이어 프로덕션용으로 사용할 준비가 되었습니까?



예. 네 그렇습니다! 2021년 9월부터 #에서 사용하고 있으며 아무런 문제가 발생하지 않았습니다.

아주 드문 경우지만 AWS Lambda 요청이 시간 초과된 후 API 요청을 완료하기 위해 로컬 Chrome 설치로 다시 돌아갑니다. (여기서 문제는 웹사이트 사용자가 스크린샷을 찍으려고 했고 응답하는 데 1분 이상 걸렸습니다.)

이 게시물을 작성하는 시점에서 패키지가 16000회 이상 다운로드되었습니다.
내 눈에는 이 패키지가 프로젝트 중 하나에서 발생하는 문제를 해결하는 데 도움이 될 수 있는 충분한 유효성 검사여야 합니다. 시도해 보세요.
가장 좋은 점은 AWS가 Lambda를 위한 넉넉한 프리 티어를 제공한다는 것입니다. 한 달에 수천 개의 Lambda를 실행하지 않으면 sidecar-browsershot을 실행하는 데 비용을 지불하지 않습니다.

3.screeenly.com 하지만 정확히 왜 Browsershot이 필요할까요?



스스로에게 물어볼 수 있습니다. 이 패키지가 필요한 이유는 무엇입니까? 내 앱에서 Google Chrome 인스턴스에 액세스해야 하는 이유는 무엇인가요?

PHP로 인보이스용 PDF를 만들어야 했던 적이 있습니까? 작성한 CSS가 사용한 패키지에서 제대로 렌더링되지 않아 답답하셨습니까?
Browsershot과 Puppeteer가 여기서 도움이 될 수 있습니다. 이미 익숙한 프레임워크에서 HTML 및 CSS를 작성하고 다음과 같이 Browsershot에 전달합니다.

$htmlForInvoice = <<<HTML
    <div class="flex items-center">
        <div>
            Website Design
        </div>
        <div>
            $1000
        </div>
    </div>
    <!-- Obviously more HTML needed … -->
HTML;

BrowsershotLambda::html($htmlForInvoice)->pdf('invoice.pdf');


그러면 HTML, CSS 및 JavaScript가 실제 브라우저에서 렌더링되고 PDF로 저장됩니다.

아니면 블로그나 웹사이트용 오픈 그래프 이미지를 생성하고 싶습니까? 좋아하는 CSS 프레임워크에서 이미지 디자인을 생성하고 HTML을 Browsershot에 전달합니다.

$htmlForOpenGraphImage = <<<HTML
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" type="text/css" href="https://rsms.me/inter/inter.css">

    <style>
    #container {
      font-family: 'Inter';
      width: 1200px;
      height: 600px;
    }
    </style>

    <section id="container" class="flex flex-col justify-between p-12 bg-gray-900">
      <h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-100">
        example.com
      </h2>
      <h1 class="text-6xl font-extrabold tracking-tight text-gray-100">
        The Title of your Article
      </h1>
      <footer class="text-gray-300 text-xl font-medium">
        5 min read
      </footer>
    </section>
HTML;

BrowsershotLambda::html($htmlForOpenGraphImage)
    ->windowSize(1200, 600)
    ->screenshot('open-graph-image.jpg');


이것은 빙산의 일각에 불과합니다. Browsershot과 Puppeteer를 사용하기 시작하면 더 많은 사용 사례가 떠오를 것입니다.

# 감사의 말



사이드카를 구축하고 #을 현실로 만드는 데 도움을 준 것에 감사드립니다.
처음에 Browsershot 패키지를 만든 Spatie에게 감사드립니다.
그리고 AWS Lambda에서 Browsershot을 실행하는 방법을 공유해 주신 Adrian Brown에게도 큰 감사를 드립니다. 그의 통찰력은 이 패키지를 개발하는 데 중요한 역할을 했습니다.

사이드카 및 sidecar-browsershot 사용 방법에 대해 자세히 알아보려면 2022년 2월부터 sidecar-browsershot를 확인하세요.
플러터 레이아웃 💫 🌌 ✨
【Angular Material】Expansion Panel로 표시되는 아이콘을 변경하고 싶다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage