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 公式パブリックレイヤーを関数にアタッチします。詳細な手順については、「FC コンソールでの共通レイヤーの設定」をご参照ください。

手順 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 ルートは、インスタンスの起動中に一度だけ実行される Initializer ライフサイクルフックに対応します。詳細については、「関数インスタンスのライフサイクルフック」をご参照ください。

手順 2：関数のテスト

ルートのテスト

トリガーの 設定 列で、インターネットエンドポイント URL をコピーし、ブラウザに直接貼り付けます (パスのサフィックスなし)。レスポンスは自動的にローカルマシンにダウンロードされます。

invoke と initialize ルートのテスト

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

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

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