codesandbox-thumbnails-lambda.js

const path = require('path');
const puppeteer = require('puppeteer');
const AWS = require('aws-sdk');

const s3Config = {
  apiVersion: '2006-03-01',
  region: 'eu-central-1',
  bucket: 'codesandbox-thumbnails',
};
const puppeteerConfig = {
  headless: true,
  executablePath: path.join(__dirname, 'bin', 'headless_shell.compiled'),
  args: ['--no-sandbox', '--single-process'],
};

const local = 'LOCAL' in process.env;

exports.handler = function(event, context) {
  const sandboxId = event.sandboxId;

  let browser;
  let page;
  let resolve;
  let response;

  // console.log('chromium path:', puppeteerConfig.executablePath);

  function setBrowser(_browser) {
    browser = _browser;
    return Promise.resolve();
  }

  function getVersion() {
    return browser.version();
  }

  function logVersion(version) {
    console.log('version:', version);
    return Promise.resolve;
  }

  function newPage() {
    return browser.newPage();
  }

  function setPage(_page) {
    page = _page;
    return Promise.resolve();
  }

  function setViewport() {
    return page.setViewport({ width: 1024, height: 768 });
  }

  function setupWaitForPageLoad() {
    let requestCount = 0;
    let timer = null;

    function onPageLoaded() {
      // console.log('page loaded (hopefully)');
      resolve();
    }

    page.on('request', msg => {
      requestCount += 1;
      // console.log('request:', msg.url, requestCount);
      if (timer !== null) {
        clearTimeout(timer);
        timer = null;
      }
    });

    page.on('response', msg => {
      requestCount -= 1;
      // console.log('response:', msg.url, requestCount, '/', msg.status, '/', msg.ok);
      if (requestCount === 0) {
        timer = setTimeout(onPageLoaded, 5000);
      }
      if (requestCount < 0) {
        requestCount = 0;
      }
    });

    return Promise.resolve();
  }

  function gotoPage() {
    return page.goto(`https://${sandboxId}.codesandbox.io/`);
  }

  function waitForPageLoad() {
    return new Promise(function(_resolve) {
      resolve = _resolve;
    });
  }

  function takeScreenshot() {
    return page.screenshot();
  }

  function uploadScreenshot(screenshot) {
    if (local) {
      AWS.config.loadFromPath('./aws_sdk.json');
    }

    const S3 = new AWS.S3({
      apiVersion: s3Config.apiVersion,
      region: s3Config.region,
    });

    const uploadParams = {
      ACL: 'public-read',
      Bucket: s3Config.bucket,
      Key: `${sandboxId}.png`,
      Body: screenshot,
      ContentType: 'image/png',
    };

    return S3.upload(uploadParams).promise();
  }

  function setUploadResponse(_response) {
    response = _response;
    return Promise.resolve();
  }

  function closeBrowser() {
    return browser.close();
  }

  function done() {
    context.done(null, response);
  }

  puppeteer
    .launch(puppeteerConfig)
    .then(setBrowser)
    // .then(getVersion)
    // .then(logVersion)
    .then(newPage)
    .then(setPage)
    .then(setViewport)
    .then(setupWaitForPageLoad)
    .then(gotoPage)
    .then(waitForPageLoad)
    .then(takeScreenshot)
    .then(uploadScreenshot)
    .then(setUploadResponse)
    .then(closeBrowser)
    .then(done);
};

if (local) {
  exports.handler(
    { sandboxId: 'vue' },
    {
      done: function(err, data) {
        console.log('response:', data);
      },
    }
  );
}