Pemantauan performa web serverless menggunakan Cloud Functions

---

Tutorial ini menjelaskan cara membuat aplikasi pemantauan performa web menggunakan teknologi serverless Google Cloud.

Performa memainkan peran utama dalam keberhasilan aplikasi web apa pun. Jika situs Anda berperforma buruk, pendaftaran Anda dan retensi pengguna yang lebih rendah mungkin akan terjadi, hal ini mungkin akan memengaruhi sasaran bisnis Anda. Performa harus menjadi kriteria keberhasilan utama saat mendesain, mem-build, dan menguji aplikasi web Anda.

Namun, performa halaman juga dapat berubah dari waktu ke waktu seiring berkembangnya aplikasi Anda. Developer dapat menambahkan atau memperbarui gambar dan skrip, atau infrastruktur penayangan aplikasi yang mendasarinya sendiri dapat berubah. Oleh karena itu, penting untuk memantau performa halaman secara rutin. Biasanya, Anda menyimpan metrik performa untuk mengaktifkan histori analisis. Selain itu, membuat pemberitahuan juga biasa dilakukan jika performa halaman berada di bawah batas yang ditentukan.

Tujuan

• Buat Cloud Function yang menggunakan Chrome headless untuk mengumpulkan metrik performa halaman web.
• Simpan metrik di Cloud Storage.
• Buat Cloud Function lain, yang dipicu oleh peristiwa pembuatan Cloud Storage, untuk menganalisis metrik halaman.
• Simpan hasil analisis di Firestore.
• Buat Cloud Function lain, yang dipicu oleh peristiwa pembuatan Firestore, untuk memublikasikan pemberitahuan ke Pub/Sub jika performa halaman buruk.
• Buat tugas Cloud Scheduler untuk memicu Cloud Function pertama secara berkala.
• Verifikasi output untuk mengetahui keberhasilan dan skenario kegagalan.

Biaya

Tutorial ini menggunakan komponen Google Cloud yang dapat ditagih, termasuk:

• Cloud Functions
• Cloud Scheduler
• Cloud Storage
• Firestore
• Pub/Sub
• Container Registry
• Cloud Build

Gunakan kalkulator harga untuk membuat perkiraan biaya berdasarkan penggunaan yang Anda proyeksikan.

Sebelum memulai

1. Login ke akun Google Cloud Anda. Jika Anda baru menggunakan Google Cloud, buat akun untuk mengevaluasi performa produk kami dalam skenario dunia nyata. Pelanggan baru juga mendapatkan kredit gratis senilai $300 untuk menjalankan, menguji, dan men-deploy workload.

2. Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.

   Catatan: Jika tidak berencana untuk menyimpan resource yang Anda buat dalam prosedur ini, buatlah project, bukan memilih project yang ada. Setelah menyelesaikan langkah ini, Anda dapat menghapus project, yang menghapus semua resource yang terkait dengan project ini.

   Buka pemilih project

3. Pastikan penagihan telah diaktifkan untuk project Google Cloud Anda.

4. Enable the Cloud Functions, Cloud Scheduler, Pub/Sub, and Cloud Build APIs.

   Enable the APIs

5. Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.

   Catatan: Jika tidak berencana untuk menyimpan resource yang Anda buat dalam prosedur ini, buatlah project, bukan memilih project yang ada. Setelah menyelesaikan langkah ini, Anda dapat menghapus project, yang menghapus semua resource yang terkait dengan project ini.

   Buka pemilih project

6. Pastikan penagihan telah diaktifkan untuk project Google Cloud Anda.

7. Enable the Cloud Functions, Cloud Scheduler, Pub/Sub, and Cloud Build APIs.

   Enable the APIs

Arsitektur

Operasi pemantauan performa web biasanya bersifat stateless dan berumur pendek. Pemicu juga sering kali berbasis peristiwa, yang terjadi sesuai jadwal atau dipicu sebagai bagian dari beberapa proses lainnya, seperti pipeline pengujian otomatis. Karakteristik ini menjadikan arsitektur serverless sebagai pilihan yang menarik untuk menerapkan aplikasi analisis web.

Dalam tutorial ini, Anda menggunakan berbagai bagian stack serverless Google Cloud, termasuk Cloud Functions, Firestore, Cloud Scheduler, dan Pub/Sub. Anda tidak perlu mengelola infrastruktur untuk salah satu layanan tersebut, dan Anda hanya membayar sesuai penggunaan. Inti aplikasi diimplementasikan menggunakan Cloud Functions, yang menyediakan lingkungan eksekusi tanpa server yang skalabel dan berbasis peristiwa. Dengan Cloud Functions, Anda dapat membuat dan menghubungkan aplikasi menggunakan bagian logika independen yang dikaitkan secara longgar.

Diagram berikut menunjukkan arsitektur solusi serverless yang Anda buat dalam tutorial ini.

Mempersiapkan lingkungan

Sebelum membuat lingkungan serverless, Anda akan mendapatkan kode dari GitHub, menetapkan variabel, dan menyiapkan resource yang diperlukan nanti untuk dianalisis dan disimpan.

Mendapatkan kode dan menetapkan variabel lingkungan

1. Di konsol Google Cloud, buka Cloud Shell.

   Buka Cloud Shell

2. Clone repositori yang berisi kode untuk Cloud Functions yang digunakan dalam tutorial ini:

   git clone https://github.com/GoogleCloudPlatform/solutions-serverless-web-monitoring.git
   

3. Ubah ke direktori fungsi:

   cd solutions-serverless-web-monitoring/functions
   

4. Tetapkan project ID dan nomor project saat ini sebagai variabel shell:

   export PROJECT=$DEVSHELL_PROJECT_ID
   export PROJECT_NUM=$(gcloud projects list \
       --filter="$PROJECT" \
       --format="value(PROJECT_NUMBER)")
   

5. Tetapkan region deployment default untuk Cloud Functions. Contoh berikut menetapkan region ke us-east1, tetapi Anda dapat mengubahnya ke region tempat Cloud Functions tersedia.

   export REGION=us-east1
   gcloud config set functions/region $REGION
   

Membuat bucket Cloud Storage

Di bagian ini, Anda akan membuat bucket Cloud Storage untuk menyimpan data performa halaman yang dikumpulkan. Anda dapat memilih lokasi atau kelas penyimpanan mana pun, tetapi sebaiknya buat bucket di lokasi yang sama dengan Cloud Functions yang akan menggunakan bucket itu.

1. Di Cloud Shell, ekspor variabel shell untuk nama bucket Cloud Storage yang akan menyimpan metrik. Nama bucket harus unik secara global, jadi perintah berikut menggunakan nomor project Google Cloud Anda sebagai akhiran pada nama bucket.

   export METRICS_BUCKET=page-metrics-$PROJECT_NUM
   

2. Gunakan alat gsutil untuk membuat bucket:

   gsutil mb -l $REGION gs://$METRICS_BUCKET
   

3. Update file env-vars.yaml dengan nama bucket. File ini berisi variabel lingkungan yang akan Anda teruskan ke Cloud Functions nanti.

   sed -i "s/\[YOUR_METRICS_BUCKET\]/$METRICS_BUCKET/" env-vars.yaml
   

Membuat koleksi Firestore

Di bagian selanjutnya, Anda akan menganalisis metrik performa halaman. Di bagian ini, Anda akan membuat koleksi Firestore untuk menyimpan hasil dari setiap analisis.

1. Di konsol Google Cloud, buka halaman Firestore.

   Buka halaman Firestore

2. Jika Anda belum pernah membuat database Firestore sebelumnya, lakukan langkah-langkah berikut:

   1. Klik Select Native mode untuk mengaktifkan Firestore.
   2. Pilih lokasi regional yang dekat dengan region tempat Cloud Functions akan dijalankan.
   3. Klik Create database.

   Perlu waktu beberapa saat untuk menyelesaikan konfigurasi.

3. Klik Mulai Koleksi, lalu tetapkan ID koleksi ke page-metrics.

4. Klik Save.

Buat topik dan langganan Pub/Sub

Biasanya, Anda ingin memberi tahu sistem dan pihak yang berkepentingan jika analisis menunjukkan bahwa performa halaman buruk. Di bagian ini, Anda akan membuat topik Pub/Sub yang akan berisi pesan yang menjelaskan performa yang buruk.

1. Di Cloud Shell, buat topik Pub/Sub bernama performance-alerts:

   gcloud pubsub topics create performance-alerts
   

2. Buat langganan ke topik. Anda menggunakan langganan untuk memverifikasi bahwa pesan pemberitahuan dipublikasikan ke topik.

   gcloud pubsub subscriptions create performance-alerts-sub \
       --topic performance-alerts
   

Mengumpulkan metrik performa halaman

Banyak situs menggunakan JavaScript untuk merender konten halaman secara dinamis. Hal ini membuat analisis performa menjadi lebih rumit karena klien harus mengemulasikan browser agar dapat memuat halaman web sepenuhnya. Runtime Node.js untuk Cloud Functions memiliki dukungan untuk Chrome headless, yang menyediakan fungsi browser web lengkap di lingkungan serverless.

Puppeteer adalah library Node.js yang dibuat oleh tim Chrome DevTools yang menyediakan API tingkat tinggi untuk mengontrol Chrome headless. Secara default, Puppeteer menginstal browser versi terbaru bersama library tersebut. Oleh karena itu, Anda dapat menambahkan Puppeteer sebagai dependensi ke Cloud Function sebagai cara mudah untuk menggunakan Chrome headless dalam fungsi.

Mengukur dan menganalisis performa halaman web adalah bidang yang besar dan kompleks. Agar lebih mudah, dalam tutorial ini Anda menggunakan Puppeteer untuk mengumpulkan beberapa metrik performa halaman tingkat atas. Namun, Anda juga dapat menggunakan Puppeteer dan Chrome DevTools Protocol (CDP) untuk mengumpulkan informasi yang lebih mendetail, seperti rekaman aktivitas linimasa. Anda juga dapat menampilkan pengalaman pengguna akhir secara lebih baik dengan mengemulasi kemacetan jaringan dan melakukan throttling CPU. Untuk pengantar yang bagus tentang menganalisis performa halaman web, lihat situs developer web Chrome.

Perhatikan bahwa ada banyak faktor yang memengaruhi waktu muat halaman web, termasuk karakteristik performa klien. Penting untuk menetapkan dasar pengukuran menggunakan konfigurasi CPU dan RAM pada Cloud Function.

Cuplikan berikut dari file tracer/index.js menunjukkan cara menggunakan Puppeteer untuk memuat halaman web:

// launch Puppeteer and start a Chrome DevTools Protocol (CDP) session
// with performance tracking enabled.
browser = await puppeteer.launch({
  headless: true,
  args: ['--no-sandbox']
});
const page = await browser.newPage();
const client = await page.target().createCDPSession();
await client.send('Performance.enable');

// browse to the page, capture and write the performance metrics
console.log('Fetching url: '+url.href);
await page.goto(url.href, {
  'waitUntil' : 'networkidle0'
});
const performanceMetrics = await client.send('Performance.getMetrics');
options = createUploadOptions('application/json', page.url());
await writeToGcs(metricsBucket, filename, JSON.stringify(performanceMetrics), options);

• Di cloud Shell, deploy trace Cloud Function:

  gcloud functions deploy trace \
      --trigger-http \
      --runtime nodejs10 \
      --memory 1GB \
      --source tracer \
      --env-vars-file env-vars.yaml \
      --quiet
  

  Diperlukan waktu beberapa menit untuk men-deploy Cloud Function.

  Parameter deployment menentukan bahwa fungsi tersebut harus memiliki pemicu HTTP, harus menggunakan runtime Node.js 10, dan harus memiliki memori sebesar 1 GB. Jumlah memori ini diperlukan untuk menjalankan Chrome headless. Variabel lingkungan disediakan ke fungsi menggunakan file env-vars.yaml

Secara default, Cloud Functions yang dipicu HTTP memungkinkan pemanggilan yang tidak diautentikasi. Oleh karena itu, Anda harus mengamankan fungsi rekaman aktivitas.

• Hapus peran IAM cloudfunctions.invoker untuk allUsers:

  gcloud beta functions remove-iam-policy-binding trace \
      --member allUsers \
      --role roles/cloudfunctions.invoker
  

Menganalisis metrik

Tujuan umum dari latihan pemantauan performa web adalah melacak performa terhadap beberapa tolok ukur yang ditentukan. Jika metrik tertentu melebihi batas yang diharapkan, hal tersebut dapat menunjukkan masalah pada rilis software terbaru, atau masalah dengan infrastruktur yang mendasarinya.

Di bagian ini, Anda akan membuat Cloud Function di Python untuk mengurai metrik halaman dan mempertahankan hasilnya ke koleksi Firestore. Fungsi ini mengevaluasi metrik FirstMeaningfulPaint terhadap batas yang diharapkan, dan menandai hasil analisis sebagai masalah jika nilai minimum terlampaui. FirstMeaningfulPaint adalah metrik yang berfokus pada pengguna yang menjelaskan secara luas kapan suatu halaman menjadi berguna bagi pengguna. Anda menggunakan pemicu Cloud Storage untuk menjalankan fungsi analisis setiap kali file baru ditulis ke bucket yang berisi metrik.

Cuplikan berikut dari file analyzer/main.py menunjukkan fungsi:

def analyze(data, context):
  """Function entry point, triggered by creation of an object in a GCS bucket.

  The function reads the content of the triggering file, analyses its contents,
  and persists the results of the analysis to a new Firestore document.

  Args:
    data (dict): The trigger event payload.
    context (google.cloud.functions.Context): Metadata for the event.
  """
  page_metrics = get_gcs_file_contents(data)
  max_time_meaningful_paint = int(os.environ.get('MAX_TIME_MEANINGFUL_PAINT'))
  analysis_result = analyze_metrics(data, page_metrics,
                                    max_time_meaningful_paint)
  docref = persist(analysis_result, data['name'])
  logging.info('Created new Firestore document %s/%s describing analysis of %s',
               docref.parent.id, docref.id, analysis_result['input_file'])

• Men-deploy analyze Cloud Function:

  gcloud functions deploy analyze \
      --trigger-resource gs://$METRICS_BUCKET \
      --trigger-event google.storage.object.finalize \
      --runtime python37 \
      --source analyzer \
      --env-vars-file env-vars.yaml
  

  Fungsi ini dipicu oleh peristiwa finalize di bucket metrik, yang dikirim setiap kali objek dibuat dalam bucket. Fungsi ini menggunakan runtime Python 3.7.

Memperingatkan saat terjadi kegagalan

Biasanya, Anda ingin mengambil tindakan jika analisis metrik menunjukkan halaman yang berperforma buruk.

Di bagian ini, Anda akan membuat Cloud Function untuk mengirim pesan ke topik Pub/Sub jika performa halaman tidak memuaskan. Fungsi ini dipicu setiap kali dokumen dibuat di koleksi Firestore. Pihak yang berminat dapat berlangganan topik Pub/Sub dan mengambil tindakan yang sesuai. Misalnya, aplikasi dukungan dapat berlangganan pesan Pub/Sub dan mengirim email, memicu pager dukungan, atau membuka bug.

Cuplikan berikut dari file alerter/main.py menunjukkan fungsi:

def generate_alert(data, context):
  """Cloud Function entry point, triggered by a change to a Firestore document.

  If the triggering document indicates a Failed status, send the document to
  configured PubSub topic.

  Args:
    data (dict): The event payload.
    context (google.cloud.functions.Context): Metadata for the event.
  """
  doc_fields = data['value']['fields']
  status = doc_fields['status']['stringValue']
  if 'FAIL' in status:
    global publish_client
    if not publish_client:
      publish_client = pubsub.PublisherClient()

    logging.info('Sending alert in response to %s status in document %s',
                 status, context.resource)
    project = os.environ.get('GCP_PROJECT')
    topic = os.environ.get('ALERT_TOPIC')
    fqtn = 'projects/{}/topics/{}'.format(project, topic)
    msg = json.dumps(data['value']).encode('utf-8')
    publish_client.publish(fqtn, msg)

Perhatikan bahwa notifikasi hanya dikirim jika kolom status menunjukkan kegagalan.

• Men-deploy alert Cloud Function:

  gcloud functions deploy alert \
      --trigger-event providers/cloud.firestore/eventTypes/document.create \
      --trigger-resource "projects/$PROJECT/databases/(default)/documents/page-metrics/{any}" \
      --runtime python37 \
      --source alerter \
      --env-vars-file env-vars.yaml \
      --entry-point generate_alert
  

  Fungsi ini dipicu oleh peristiwa document.create dalam koleksi Firestore page-metrics. Akhiran {any} adalah karakter pengganti yang menunjukkan bahwa fungsi harus dipicu setiap kali dokumen dibuat dalam koleksi.

Menjadwalkan analisis

Sebaiknya pantau performa halaman secara rutin. Misalnya, Anda mungkin ingin menganalisis halaman tertentu setiap jam, setiap hari, atau setiap minggu. Di bagian ini, Anda akan membuat tugas Cloud Scheduler untuk menjalankan pipeline analisis secara berkala dengan memicu fungsi trace.

Tugas Cloud Scheduler dijalankan menggunakan akun layanan yang telah diberi peran IAM cloudfunctions.invoker yang diperlukan untuk fungsi trace.

Terkadang halaman web tidak merespons dengan benar, atau waktu permintaan habis, sehingga percobaan ulang tidak dapat dihindari dengan aplikasi analisis web. Oleh karena itu, penting untuk memiliki logika percobaan ulang di aplikasi Anda. Cloud Functions mendukung percobaan ulang untuk fungsi latar belakang.

Percobaan ulang tidak tersedia untuk Cloud Functions yang dipicu HTTP, sehingga Anda tidak dapat menggunakan Cloud Functions untuk mencoba kembali fungsi trace. Namun, Cloud Scheduler mendukung percobaan ulang. Untuk informasi selengkapnya tentang cara mengonfigurasi parameter percobaan ulang, lihat dokumentasi RetryConfig.

1. Pastikan ketiga Cloud Functions telah di-deploy dengan benar dan menunjukkan status ACTIVE.

   gcloud functions list
   

2. Buat akun layanan baru yang akan digunakan sebagai identitas untuk menjalankan tugas Cloud Scheduler.

   gcloud iam service-accounts create tracer-job-sa
   

3. Berikan peran IAM cloudfunctions.invoker kepada akun layanan baru untuk fungsi trace.

   gcloud beta functions add-iam-policy-binding trace \
       --role roles/cloudfunctions.invoker \
       --member "serviceAccount:tracer-job-sa@$PROJECT.iam.gserviceaccount.com"
   

4. Membuat tugas Cloud Scheduler:

   gcloud scheduler jobs create http traceWithRetry \
       --uri="https://$REGION-$PROJECT.cloudfunctions.net/trace" \
       --http-method=POST \
       --message-body="{\"url\":\"http://www.example.com\"}" \
       --headers="Content-Type=application/json" \
       --oidc-service-account-email="tracer-job-sa@$PROJECT.iam.gserviceaccount.com" \
       --schedule="0 3 * * *" \
       --time-zone="UTC" \
       --max-retry-attempts=3 \
       --min-backoff=30s
   

   Karena tugas akan memanggil fungsi trace yang dipicu HTTP, perintah tersebut akan menentukan jenis tugas sebagai http, dan menyediakan URL pemicu fungsi sebagai nilai uri. Halaman yang akan dianalisis, dalam hal ini www.example.com, disediakan dalam flag message-body. Flag oidc-service-account-email menentukan akun layanan yang akan digunakan untuk autentikasi. Perintah tersebut menunjukkan jumlah percobaan ulang untuk mencoba menggunakan tanda max-retry-attempts, dan nilai yang diteruskan dengan flag schedule menetapkan jadwal eksekusi ke pukul 03.00 UTC setiap hari.

Memverifikasi hasil

Di bagian ini, Anda akan memverifikasi bahwa Anda mendapatkan perilaku yang diharapkan untuk kondisi berhasil dan gagal.

Memverifikasi keberhasilan

Tugas Cloud Scheduler tidak akan berjalan hingga waktu terjadwal berikutnya, yang dalam hal ini adalah pukul 03.00 UTC. Untuk langsung melihat hasilnya, Anda dapat memicu run secara manual.

1. Tunggu 90 detik hingga tugas penjadwal selesai diinisialisasi.

2. Jalankan tugas Cloud Scheduler secara manual:

   gcloud scheduler jobs run traceWithRetry
   

3. Tunggu sekitar 30 detik hingga pipeline fungsi selesai.

4. Buat daftar konten bucket metrik untuk menunjukkan bahwa metrik halaman telah dikumpulkan:

   gsutil ls -l gs://$METRICS_BUCKET
   

5. Di konsol Google Cloud, buka halaman Cloud Logging viewer:

   Buka halaman Logging

   Anda melihat pesan log dari masing-masing Cloud Functions: trace, analyze, dan alert. Diperlukan waktu beberapa saat agar log mengalir, sehingga Anda mungkin perlu memuat ulang ke panel log.

   

6. Catat ID dokumen Firestore, yang tercantum setelah teks Created new Firestore document page-metrics/

7. Di konsol Google Cloud, buka halaman Firestore:

   Buka halaman Firestore

8. Periksa dokumen yang berisi hasil analisis. Nilai dokumen menunjukkan status PASS dan berisi metrik performa halaman terbaru.

9. Di Cloud Shell, pastikan tidak ada pesan pemberitahuan yang dikirim ke topik Pub/Sub dengan mencoba menarik pesan dari langganan:

   gcloud pubsub subscriptions pull \
       projects/$PROJECT/subscriptions/performance-alerts-sub \
       --auto-ack
   

   Anda tidak melihat item yang tercantum.

Memverifikasi kegagalan

1. Picu fungsi rekaman aktivitas secara manual. Kali ini, Anda memberikan halaman Tutorial Google Cloud sebagai URL. Halaman ini memiliki banyak konten dinamis yang meningkatkan waktu muat halaman melebihi batas maksimum yang diharapkan.

   gcloud functions call trace \
       --data='{"url":"https://cloud.google.com/docs/tutorials"}'
   

   Anda memiliki izin yang memadai untuk memanggil fungsi karena Anda memiliki peran IAM Owner atau Editor project.

2. Tunggu sekitar 30 detik hingga pipeline fungsi selesai.

3. Buat daftar konten bucket metrik untuk memverifikasi bahwa metrik tambahan telah dikumpulkan:

   gsutil ls -l gs://$METRICS_BUCKET
   

   Sekarang Anda akan melihat dua item di setiap bucket.

4. Di konsol Google Cloud, buka halaman penampil Cloud Logging dan filter untuk log Cloud Function:

   Buka halaman Logging

   Anda melihat error dari fungsi analyze yang menunjukkan bahwa halaman melebihi waktu pemuatan maksimum yang diizinkan. Sekali lagi, Anda mungkin perlu memuat ulang panel log untuk melihat pesan terbaru.

   

5. Catat ID dokumen Firestore.

6. Di konsol Google Cloud, buka halaman Firestore:

   Buka halaman Firestore

7. Temukan dokumen yang menjelaskan analisis yang gagal.

   Kolom status ditandai sebagai FAIL.

8. Di Cloud Shell, pastikan pesan pemberitahuan dikirim ke topik Pub/Sub dengan mengambil pesan dari langganan.

   gcloud pubsub subscriptions pull \
       projects/$PROJECT/subscriptions/performance-alerts-sub \
       --auto-ack
   

   Kali ini, Anda akan melihat konten pesan.

Pembersihan

Menghapus project

Perhatian: Menghapus project memiliki efek berikut:
• Semua hal dalam project akan dihapus. Jika menggunakan project yang sudah ada untuk tugas dalam dokumen ini, saat Anda menghapusnya, pekerjaan lain yang telah Anda lakukan dalam project tersebut juga akan terhapus.
• Project ID kustom hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang ingin digunakan di masa mendatang. Untuk mempertahankan URL yang menggunakan project ID, seperti URL appspot.com, hapus resource yang dipilih di dalam project, bukan menghapus seluruh project.
1. Di konsol Google Cloud, buka halaman Manage resource.

   Buka Manage resource

2. Pada daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
3. Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

Langkah selanjutnya

• Pelajari lebih lanjut teknologi serverless Google Cloud.
• Pelajari tutorial Cloud Functions lainnya.
• Tonton video dari Google I/O '18 yang menjelaskan penggunaan lain untuk Puppeteer dan Chrome headless.
• Pelajari arsitektur referensi, diagram, dan praktik terbaik tentang Google Cloud. Lihat Cloud Architecture Center kami.