Function Compute:パブリックレイヤーの使用例

ステップ 1：イベント関数の作成

「[関数の作成]」ページで、以下のパラメーターを設定し、それ以外の項目はデフォルト値のままにしてください。詳細については、「イベント関数の作成」をご参照ください。

ステップ 2：関数コードの追加

関数詳細ページで[コード] タブをクリックし、index.js の内容を次のコードに置き換えてから、[デプロイ] をクリックします。

const fs = require('fs');
const puppeteer = require('puppeteer');

function autoScroll(page) {
  return page.evaluate(() => {
      return new Promise((resolve, reject) => {
          var totalHeight = 0;
          var distance = 100;
          var timer = setInterval(() => {
              var scrollHeight = document.body.scrollHeight;
              window.scrollBy(0, distance);
              totalHeight += distance;
              if (totalHeight >= scrollHeight) {
                  clearInterval(timer);
                  resolve();
              }
          }, 100);
      })
  });
}

exports.handler = async (event, context, callback) => {
  console.log('Node version is: ' + process.version);

  try {
    const browser = await puppeteer.launch({
        headless: true,
        args: [
            '--disable-gpu',
            '--disable-dev-shm-usage',
            '--disable-setuid-sandbox',
            '--no-first-run',
            '--no-zygote',
            '--no-sandbox'
        ]
    });

    // 1. クエリ文字列からターゲット URL を読み取ります。デフォルトでは Serverless Devs のホームページを使用します。
    let url = 'https://www.serverless-devs.com';
    if (event.queryStringParameters && event.queryStringParameters.url) {
        url = event.queryStringParameters.url;
    }
    if (!url.startsWith('https://') && !url.startsWith('http://')) {
        url = 'http://' + url;
    }

    const page = await browser.newPage();
    await page.emulateTimezone('Asia/Shanghai');
    await page.goto(url, { waitUntil: 'networkidle2' });
    await page.setViewport({ width: 1200, height: 800 });

    // 2. スクリーンショットを撮る前にページ全体をスクロールします。
    await autoScroll(page);

    // 3. フルページの PNG スクリーンショットを /tmp/example に保存します。
    let path = '/tmp/example';
    let contentType = 'image/png';
    await page.screenshot({ path: path, fullPage: true, type: 'png' });

    await browser.close();

    const screenshot = fs.readFileSync(path);

    // 4. スクリーンショットを Base64 エンコードされた HTTP レスポンスボディとして返します。
    const response = {
        statusCode: 200,
        headers: {
            'Content-Type': contentType
        },
        body: screenshot.toString('base64'),
        isBase64Encoded: true
    };

    callback(null, response);
  } catch (err) {
    const errorResponse = {
        statusCode: 500,
        headers: {
            'Content-Type': 'text/plain'
        },
        body: err.message
    };
    callback(null, errorResponse);
  }
};

ステップ 3：Puppeteer パブリックレイヤーのアタッチ

Puppeteer17x 公式パブリックレイヤーを関数にアタッチします。詳細な手順については、「Function Compute コンソールで共通レイヤーを設定する」をご参照ください。

ステップ 4：関数のテスト

HTTP トリガーを作成します。トリガーの [構成] 列で、パブリックエンドポイント URL をコピーし、ブラウザに貼り付けます。手順については、「トリガーを作成する」をご参照ください。

Serverless Devs Web サイトのフルページの PNG スクリーンショットがキャプチャされ、ローカルマシンに自動的にダウンロードされます。

ステップ 1：Web 関数の作成

[関数の作成] ページで、以下のようにパラメーターを設定し、その他はすべてデフォルト値のままとします。詳細については、「Web 関数を作成する」をご参照ください。

関数が作成されたら、WebIDE でサンプルファイル Program.cs を開きます。

このサンプルコードは、4 つの主要な動作を設定します。

• ① サーバーは 0.0.0.0:9000 でリッスンします。カスタムランタイムサービスは、127.0.0.1 または localhost ではなく、0.0.0.0:CAPort または *:CAPort でリッスンする必要があります。詳細については、「原則」をご参照ください。

• ② / ルートは、文字列 "Hello World! " を返します。

• ③ /invoke ルートは、関数呼び出しを処理します。詳細については、「Web 関数」をご参照ください。

• ④ /initialize ルートは、インスタンスの起動時に 1 回実行される Initializer ライフサイクルフックに対応します。詳細については、「関数インスタンスのライフサイクルフック」をご参照ください。

ステップ 2：関数のテスト

ルートのテスト

トリガーの[構成]列で、パブリックエンドポイントの URL をコピーし、ブラウザに直接貼り付けます（パスのサフィックスは不要です）。応答はローカルマシンに自動的にダウンロードされます。

invoke ルートと initialize ルートのテスト

パブリックエンドポイントに /invoke または /initialize を追加し、POST リクエストを送信します。

curl -XPOST <public-endpoint>/invoke
curl -XPOST <public-endpoint>/initialize

次の図に実行結果を示します。