使用說明

關于官方公共層的最新版本和使用說明，請參見awesome-layers。

示例一：基于Node.js 16和Puppeteer實現網頁截圖示例程序

Puppeteer可以控制Chrome（或Chromium）實現很多自動化流程，例如網頁截圖、PDF生成、表單的自動提交、UI自動化測試或鍵盤輸入模擬等。實際上，Puppeteer實現了一個基于Node.js的headless Chrome瀏覽器。

本示例使用Puppeteer完成一個網頁截圖示例程序。

1. 創建事件函數。

   在創建函數頁面，設置以下配置項，其余配置項保持默認值即可。具體操作，請參見創建事件函數。

   • 創建函數方式選擇事件函數。

   • 運行環境選擇Node.js 16。

   • 內存規格選擇1024 MB。

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'
           ]
       });
   
       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 });
       await autoScroll(page);
   
       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);
   
       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);
     }
   };

   上述示例代碼解析如下：

   1. 解析query參數獲取需要截圖的URL地址，如果解析失敗則默認使用Serverless Devs官網主頁。

   2. 使用Puppeteer對該網頁進行截圖，并保存到運行實例的/tmp/example文件夾中，然后將該路徑作為HTTP請求的返回體直接返回。

3. 為函數配置Puppeteer公共層。

   具體操作，請參見通過控制臺配置官方公共層。選擇官方公共層Puppeteer17x。

   

4. 創建HTTP觸發器，在觸發器配置信息列查看公網訪問地址，單擊復制該地址，然后在瀏覽器中使用該測試地址進行測試。

   關于創建HTTP觸發器的詳細操作，請參見創建觸發器。

   

   測試成功后，將Serverless Devs官網進行截圖并自動下載該png文件到本地。

   

示例二：基于公共層快速實現.NET 6自定義運行時

1. 創建Web函數。

   在創建函數頁面，設置以下配置項，其余配置項保持默認值即可。具體操作，請參見創建Web函數。

   

   創建完成后，您可以在Web IDE界面查看示例代碼Program.cs。示例代碼解析如下：

   • ①：該示例監聽了0.0.0.0的9000端口。Custom Runtime啟動的服務一定要監聽0.0.0.0:CAPort或*:CAPort端口，不能監聽127.0.0.1或localhost。更多信息，請參見Custom Runtime基本原理。

   • ②：添加路由/，直接返回字符串"Hello World!"。

   • ③：添加路由/invoke，該路由為使用事件請求處理程序的路徑。更多信息，請參見Web函數。

   • ④：添加路由/initialize，該路由為函數初始化回調程序對應的路徑。該回調程序的方法會在示例初始化時執行一次。更多信息，請參見函數實例生命周期回調。

2. 測試函數。

   1. 在觸發器配置信息列查看公網訪問地址，單擊復制該地址，然后在瀏覽器中使用該測試地址進行測試。此時，不添加任何PATH信息。

      

      執行成功后，自動下載附件到本地。

   2. 使用Curl工具，在上一步獲取的公網訪問地址后添加/invoke或/initialize路徑進行測試。該路由方法為POST，支持直接使用curl -XPOST命令測試。

      執行結果如下所示。