Buat pipeline screenshot serverless dengan Puppeteer & .NET 6 - Function Compute

Topik ini memberikan contoh penggunaan lapisan umum resmi.

Catatan penggunaan

Untuk melihat versi terbaru dan petunjuk penggunaan lapisan umum resmi, lihat awesome-layers.

Contoh 1: Program contoh untuk menangkap tangkapan layar halaman web berdasarkan Node.js 16 dan Puppeteer

Puppeteer adalah pustaka Node.js yang menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium melalui protokol DevTools. Puppeteer adalah browser Chrome tanpa kepala (headless) yang mendukung berbagai proses otomatisasi seperti penangkapan tangkapan layar halaman web secara otomatis, pembuatan PDF, pengiriman formulir, pengujian UI, dan simulasi input keyboard.

Dalam contoh ini, Puppeteer digunakan untuk mengimplementasikan program contoh yang menangkap tangkapan layar halaman web.

Pilih Use Built-in Runtime untuk membuat fungsi.
Untuk informasi lebih lanjut, lihat Buat Fungsi. Pada halaman Create Function, konfigurasikan parameter berikut dan pertahankan nilai default dari parameter lainnya.
- Request Type: Pilih HTTP Requests.
- Runtime: Pilih Node.js 16 dari daftar drop-down.
- Memory Capacity: Pilih 1 GB.

Di halaman detail fungsi, klik tab Code, edit kode fungsi di file index.js, lalu klik Deploy.

Kode contoh:

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);
      })
  });
}

module.exports.handler = function (request, response, context) {
  console.log('Node version is: ' + process.version);
  (async () => {
    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 = request.queries['url'];

    if (!url) {
      url = 'https://www.serverless-devs.com';
    }

    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();

    response.setStatusCode(200);
    response.setHeader('content-type', contentType);
    response.send(fs.readFileSync(path))
  })().catch(err => {
    response.setStatusCode(500);
    response.setHeader('content-type', 'text/plain');

    response.send(err.message);
  });
};

Pada kode contoh sebelumnya: Pertama, parameter query diuraikan untuk mendapatkan URL halaman web yang ingin Anda tangkap screenshot-nya. Jika penguraian gagal, homepage Serverless Devs digunakan. Kemudian, Puppeteer digunakan untuk menangkap screenshot halaman web dan menyimpan screenshot ke folder /tmp/example dari instance yang sedang berjalan. Terakhir, jalur tersebut dikembalikan sebagai badan respons dari permintaan HTTP.

Konfigurasikan lapisan umum Puppeteer untuk fungsi tersebut.
Untuk informasi lebih lanjut, lihat Konfigurasikan Lapisan Publik di Konsol Function Compute. Gunakan lapisan umum resmi Puppeteer17x.
Penting
Jika lingkungan runtime Anda bukan Node.js 16, Anda harus menambahkan variabel lingkungan. Untuk informasi lebih lanjut, lihat Nodejs-Puppeteer17x README.
Di halaman detail fungsi, klik tab Trigger Management (URL). Di kolom Configurations dari trigger, klik URL tes untuk mengunduh skrip konfigurasi. Setelah skrip dijalankan, Anda dapat menggunakan URL tes untuk melakukan tes di browser.
Penting
Sebelum Anda menggunakan URL tes untuk melakukan tes, klik URL tes. Di panel yang muncul, unduh dan jalankan skrip konfigurasi yang sesuai dengan sistem operasi Anda.

Contoh 2: Implementasi runtime kustom .NET 6 berbasis lapisan umum

Buat fungsi dengan memilih Use Custom Runtime.
Untuk informasi lebih lanjut, lihat Buat Fungsi. Pada halaman Create Function, konfigurasikan parameter berikut dan pertahankan nilai default dari parameter lainnya.
- Request Type: Pilih HTTP Requests.
- Runtime: Pilih .NET 6.0.
Setelah fungsi dibuat, Anda dapat melihat kode contoh Program.cs di IDE web.
- ①: Program contoh ini mendengarkan port 9000 dari 0.0.0.0. Layanan yang dimulai dalam runtime kustom harus mendengarkan 0.0.0.0:CAPort atau *:CAPort dan tidak dapat mendengarkan 127.0.0.1 atau localhost. Untuk informasi lebih lanjut, lihat Prinsip Dasar.
- ②: Tambahkan rute / dan kembalikan string "Hello World!".
- ③: Tambahkan rute /invoke yang menggunakan jalur penanganan acara. Untuk informasi lebih lanjut, lihat Penanganan Acara
- ④: Tambahkan rute /initialize, yaitu jalur yang sesuai dengan hook Initializer dari fungsi. Hook Initializer dieksekusi sekali selama inisialisasi program contoh. Untuk informasi lebih lanjut, lihat Hook Siklus Hidup untuk Instance Fungsi
Tes fungsi tersebut.
Penting
Sebelum Anda menggunakan URL tes untuk melakukan tes, klik URL tes. Di panel yang muncul, unduh dan jalankan skrip konfigurasi yang sesuai dengan sistem operasi Anda.
1. Anda dapat menggunakan URL tes pada tab Trigger Management (URL) untuk melakukan tes. Dalam hal ini, tidak ada informasi jalur yang ditambahkan.
  Gambar berikut menunjukkan hasil eksekusi.
2. Tambahkan jalur /invoke untuk melakukan tes. Metode perutean adalah POST dan Anda dapat langsung menggunakan perintah curl -XPOST untuk pengujian.
  Gambar berikut menunjukkan hasil eksekusi.
3. Tambahkan jalur /initialize untuk melakukan tes.
  Gambar berikut menunjukkan hasil eksekusi.
  Catatan
  Di bagian Instance Lifecycle Hook dari halaman Configurations, konfigurasikan Initializer Hook. Anda tidak perlu memanggil hook Initializer. Function Compute secara otomatis memanggil hook setelah instance dimulai.