Pic-a-daily: Lab 6—Orkestrasi dengan Workflows

1. Ringkasan

Di lab sebelumnya, Anda telah membuat aplikasi Pic-a-daily versi berbasis peristiwa yang menggunakan Cloud Function yang dipicu Google Cloud Storage untuk layanan Analisis Gambar, container Cloud Run yang dipicu GCS melalui Pub/Sub untuk layanan Thumbnail, dan Eventarc untuk memicu layanan Pengumpul Sampah Gambar di Cloud Run. Ada juga layanan Kolase yang dipicu Cloud Scheduler:

d93345bfc235f81e.png

Di lab ini, Anda akan membuat aplikasi versi yang diorkestrasi. Daripada menggunakan berbagai jenis peristiwa yang mengalir melalui sistem, Anda akan menggunakan Workflows untuk mengorkestrasi dan memanggil layanan sebagai berikut:

b763efcbf5589747.png

Yang akan Anda pelajari

  • App Engine
  • Cloud Firestore
  • Cloud Functions
  • Cloud Run
  • Workflows

2. Penyiapan dan Persyaratan

Penyiapan lingkungan mandiri

  1. Login ke Cloud Console lalu buat project baru atau gunakan kembali project yang sudah ada. (Jika belum memiliki akun Gmail atau Google Workspace, Anda harus membuatnya.)

96a9c957bc475304.png

b9a10ebdf5b5a448.png

a1e3c01a38fa61c2.png

Ingat project ID, nama unik di semua project Google Cloud (maaf, nama di atas telah digunakan dan tidak akan berfungsi untuk Anda!) Project ID tersebut selanjutnya akan dirujuk di codelab ini sebagai PROJECT_ID.

  1. Selanjutnya, Anda harus mengaktifkan penagihan di Cloud Console untuk menggunakan resource Google Cloud.

Menjalankan operasi dalam codelab ini seharusnya tidak memerlukan banyak biaya, bahkan mungkin tidak sama sekali. Pastikan untuk mengikuti petunjuk yang ada di bagian "Membersihkan" yang memberi tahu Anda cara menonaktifkan resource sehingga tidak menimbulkan penagihan di luar tutorial ini. Pengguna baru Google Cloud memenuhi syarat untuk mengikuti program Uji Coba Gratis senilai$300 USD.

Mulai Cloud Shell

Meskipun Google Cloud dapat dioperasikan dari jarak jauh menggunakan laptop Anda, dalam codelab ini, Anda akan menggunakan Google Cloud Shell, lingkungan command line yang berjalan di Cloud.

Dari Konsol GCP, klik ikon Cloud Shell di toolbar kanan atas:

bce75f34b2c53987.png

Hanya perlu waktu beberapa saat untuk penyediaan dan terhubung ke lingkungan. Jika sudah selesai, Anda akan melihat tampilan seperti ini:

f6ef2b5f13479f3a.png

Mesin virtual ini berisi semua alat pengembangan yang Anda perlukan. Layanan ini menawarkan direktori beranda tetap sebesar 5 GB dan beroperasi di Google Cloud, sehingga sangat meningkatkan performa dan autentikasi jaringan. Semua pekerjaan Anda di lab ini dapat dilakukan hanya dengan browser.

3. Pengantar Workflows

90fcd42d556e310e.jpeg

Anda dapat menggunakan Workflows untuk membuat alur kerja serverless yang menautkan serangkaian tugas serverless dalam urutan yang Anda tentukan. Anda dapat menggabungkan kecanggihan API Google Cloud, produk serverless seperti Cloud Functions dan Cloud Run, serta panggilan ke API eksternal untuk membuat aplikasi serverless yang fleksibel.

Seperti yang Anda harapkan dari pengorkestrasi, Workflows memungkinkan Anda menentukan alur logika bisnis dalam bahasa definisi alur kerja berbasis YAML/JSON dan menyediakan Workflows Execution API dan UI Workflows untuk memicu alur tersebut.

Selain sebagai pengelola, fitur ini juga memiliki fitur bawaan dan yang dapat dikonfigurasi berikut:

  • Penanganan error dan percobaan ulang yang fleksibel antar-langkah untuk eksekusi langkah yang andal.
  • Penguraian JSON dan penerusan variabel antar-langkah untuk menghindari kode tambahan.
  • Formula ekspresi untuk keputusan memungkinkan eksekusi langkah bersyarat.
  • Sub-alur kerja untuk Alur Kerja modular dan yang dapat digunakan kembali.
  • Dukungan untuk layanan eksternal memungkinkan orkestrasi layanan di luar Google Cloud.
  • Dukungan autentikasi untuk layanan Google Cloud dan eksternal untuk eksekusi langkah yang aman.
  • Konektor ke layanan Google Cloud seperti Pub/Sub, Firestore, Tasks, Secret Manager untuk integrasi yang lebih mudah.

Terlebih lagi, Workflows adalah produk serverless yang terkelola sepenuhnya. Tidak ada server yang perlu dikonfigurasi atau diskalakan dan Anda hanya membayar sesuai penggunaan.

4. Mengaktifkan API

Dalam lab ini, Anda akan menghubungkan layanan Cloud Functions dan Cloud Run dengan Workflows. Anda juga akan menggunakan App Engine, Cloud Build, Vision API, dan layanan lainnya.

Di Cloud Shell, pastikan semua layanan yang diperlukan telah diaktifkan:

gcloud services enable \
  appengine.googleapis.com \
  cloudbuild.googleapis.com \
  cloudfunctions.googleapis.com \
  compute.googleapis.com \
  firestore.googleapis.com \
  run.googleapis.com \
  vision.googleapis.com \
  workflows.googleapis.com \

Setelah beberapa saat, Anda akan melihat operasi selesai dengan berhasil:

Operation "operations/acf.5c5ef4f6-f734-455d-b2f0-ee70b5a17322" finished successfully.

5. Mendapatkan kode

Dapatkan kode, jika Anda belum melakukannya di codelab sebelumnya:

git clone https://github.com/GoogleCloudPlatform/serverless-photosharing-workshop

Anda akan memiliki struktur folder berikut yang relevan untuk lab ini:

frontend
 |
workflows
 |
 ├── functions
 ├── |── trigger-workflow
 ├── |── vision-data-transform
 ├── services
 ├── |── collage
 ├── |── thumbnails
 ├── workflows.yaml

Berikut adalah folder yang relevan:

  • frontend berisi frontend App Engine yang akan kita gunakan kembali dari Lab 4.
  • functions berisi Cloud Functions yang dibuat untuk Alur Kerja.
  • services berisi layanan Cloud Run yang diubah untuk Alur Kerja.
  • workflows.yaml adalah file definisi Alur kerja.

6. Menjelajahi YAML Workflows

workflows.yaml menentukan Alur Kerja dalam serangkaian langkah. Mari kita bahas untuk memahaminya lebih baik.

Di awal alur kerja, ada beberapa parameter yang diteruskan. Nilai tersebut akan diteruskan oleh dua Cloud Functions yang memicu Workflows. Kita akan membahas fungsi ini nanti, tetapi begini cara memulai Alur Kerja:

d44a5e18aa9d4660.png

Dalam YAML, Anda dapat melihat bahwa parameter ini ditetapkan ke variabel dalam langkah init seperti nama file dan bucket yang memicu peristiwa, serta URL beberapa layanan Cloud Functions dan Cloud Run yang akan dipanggil Workflows:

main:
  params: [args]
  steps:
    - init:
        assign:
          - file: ${args.file}
          - bucket: ${args.bucket}
          - gsUri: ${"gs://" + bucket + "/" + file}
          - projectId: ${sys.get_env("GOOGLE_CLOUD_PROJECT_ID")}
          - urls: ${args.urls}

Selanjutnya, Alur Kerja memeriksa jenis peristiwa. Ada 2 jenis peristiwa yang didukung: object.finalize (dipancarkan saat file disimpan di bucket Cloud Storage) dan object.delete (dipancarkan saat file dihapus). Hal lainnya akan memunculkan pengecualian peristiwa tidak didukung.

dd1f450983655619.png

Berikut adalah langkah-langkah, dalam definisi alur kerja YAML, tempat kita memeriksa jenis peristiwa penyimpanan file:

    - eventTypeSwitch:
        switch:
            - condition: ${args.eventType == "google.storage.object.finalize"}
              next: imageAnalysisCall
            - condition: ${args.eventType == "google.storage.object.delete"}
              next: pictureGarbageCollectionGCS
    - eventTypeNotSupported:
        raise: ${"eventType " + args.eventType + " is not supported"}
        next: end

Perhatikan cara Workflows mendukung pernyataan switch dan penanganan pengecualian, dengan instruksi switch dan berbagai kondisinya, serta instruksi raise untuk memunculkan error saat peristiwa tidak dikenali.

Selanjutnya, mari kita lihat imageAnalysisCall. Ini adalah serangkaian panggilan dari Workflows untuk memanggil Vision API guna menganalisis gambar, mengubah data respons Vision API untuk mengurutkan label objek yang dikenali dalam gambar, memilih warna dominan, memeriksa apakah gambar aman untuk ditampilkan, lalu menyimpan metadata ke Cloud Firestore.

Perhatikan bahwa semuanya dilakukan di Workflows, kecuali Vision Transform Cloud Functions (yang akan kita deploy nanti):

ca2ad16b9cbb436.png

Berikut tampilan langkah-langkah dalam YAML:

    - imageAnalysisCall:
        call: http.post
        args:
          url: https://vision.googleapis.com/v1/images:annotate
          headers:
            Content-Type: application/json
          auth:
            type: OAuth2
          body:
            requests:
            - image:
                source:
                  gcsImageUri: ${gsUri}
              features:
              - type: LABEL_DETECTION
              - type: SAFE_SEARCH_DETECTION
              - type: IMAGE_PROPERTIES
        result: imageAnalysisResponse
    - transformImageAnalysisData:
        call: http.post
        args:
          url: ${urls.VISION_DATA_TRANSFORM_URL}
          auth:
            type: OIDC
          body: ${imageAnalysisResponse.body}
        result: imageMetadata
    - checkSafety:
        switch:
          - condition: ${imageMetadata.body.safe == true}
            next: storeMetadata
        next: end
    - storeMetadata:
        call: http.request
        args:
          url: ${"https://firestore.googleapis.com/v1/projects/" + projectId + "/databases/(default)/documents/pictures/" + file + "?updateMask.fieldPaths=color&updateMask.fieldPaths=labels&updateMask.fieldPaths=created"}
          auth:
            type: OAuth2
          method: PATCH
          body:
            name: ${"projects/" + projectId + "/databases/(default)/documents/pictures/" + file}
            fields:
              color:
                stringValue: ${imageMetadata.body.color}
              created:
                timestampValue: ${imageMetadata.body.created}
              labels:
                arrayValue:
                  values: ${imageMetadata.body.labels}
        result: storeMetadataResponse

Setelah gambar dianalisis, dua langkah berikutnya adalah membuat thumbnail gambar dan kolase gambar terbaru. Hal ini dilakukan dengan men-deploy 2 layanan Cloud Run dan melakukan panggilan ke layanan tersebut dari langkah thumbnailCall dan collageCall:

76f9179323c3144.png

Langkah-langkah dalam YAML:

   - thumbnailCall:
        call: http.post
        args:
          url: ${urls.THUMBNAILS_URL}
          auth:
            type: OIDC
          body:
              gcsImageUri: ${gsUri}
        result: thumbnailResponse
    - collageCall:
        call: http.get
        args:
          url: ${urls.COLLAGE_URL}
          auth:
            type: OIDC
        result: collageResponse

Cabang eksekusi ini berakhir dengan menampilkan kode status dari setiap layanan dalam langkah finalizeCompleted:

    - finalizeCompleted:
        return:
          imageAnalysis: ${imageAnalysisResponse.code}
          storeMetadata: ${storeMetadataResponse.code}
          thumbnail: ${thumbnailResponse.code}
          collage: ${collageResponse.code}

Cabang eksekusi lainnya adalah saat file dihapus dari bucket penyimpanan utama, yang berisi versi gambar beresolusi tinggi. Di cabang ini, kita ingin menghapus thumbnail gambar, di bucket yang berisi thumbnail, dan menghapus metadatanya dari Firestore. Keduanya dilakukan dengan panggilan HTTP dari Workflows:

f172379274dcb3c2.png

Langkah-langkah dalam YAML:

    - pictureGarbageCollectionGCS:
        try:
          call: http.request
          args:
            url: ${"https://storage.googleapis.com/storage/v1/b/thumbnails-" + projectId + "/o/" + file}
            auth:
              type: OAuth2
            method: DELETE
          result: gcsDeletionResult
        except:
          as: e
          steps:
              - dummyResultInOutVar:
                  assign:
                      - gcsDeletionResult:
                          code: 200
                          body: "Workaround for empty body response"
    - pictureGarbageCollectionFirestore:
        call: http.request
        args:
          url: ${"https://firestore.googleapis.com/v1/projects/" + projectId + "/databases/(default)/documents/pictures/" + file}
          auth:
            type: OAuth2
          method: DELETE
        result: firestoreDeletionResult

Cabang penghapusan diakhiri dengan menampilkan hasil / kode dari setiap langkah:

    - deleteCompleted:
        return:
          gcsDeletion: ${gcsDeletionResult}
          firestoreDeletion: ${firestoreDeletionResult.code}

Pada langkah-langkah berikut, kita akan membuat semua dependensi eksternal Workflows: bucket, Cloud Functions, layanan Cloud Run, dan database Firestore.

7. Buat bucket

Anda memerlukan 2 bucket untuk gambar: 1 untuk menyimpan gambar beresolusi tinggi asli dan 1 untuk menyimpan thumbnail gambar.

Buat bucket regional publik (dalam hal ini di Eropa) dengan akses seragam bagi pengguna untuk mengupload gambar, menggunakan alat gsutil:

export BUCKET_PICTURES=uploaded-pictures-${GOOGLE_CLOUD_PROJECT}
gsutil mb -l EU gs://${BUCKET_PICTURES}
gsutil uniformbucketlevelaccess set on gs://${BUCKET_PICTURES}
gsutil iam ch allUsers:objectViewer gs://${BUCKET_PICTURES}

Buat bucket regional publik lain untuk thumbnail:

export BUCKET_THUMBNAILS=thumbnails-${GOOGLE_CLOUD_PROJECT}
gsutil mb -l EU gs://${BUCKET_THUMBNAILS}
gsutil uniformbucketlevelaccess set on gs://${BUCKET_THUMBNAILS}
gsutil iam ch allUsers:objectViewer gs://${BUCKET_THUMBNAILS}

Anda dapat memeriksa ulang bahwa bucket dibuat dan bersifat publik dengan membuka bagian Cloud Storage di Cloud Console:

15063936edd72f06.png

8. Transformasi Data Vision (Cloud Function)

Workflows.yaml dimulai dengan langkah-langkah init, eventTypeSwitch, eventTypeNotSupported. Hal ini memastikan peristiwa yang berasal dari bucket diarahkan ke langkah yang benar.

Untuk peristiwa object.finalize, langkah imageAnalysisCall melakukan panggilan ke Vision API untuk mengekstrak metadata gambar yang dibuat. Semua langkah ini dilakukan dalam Workflows:

daaed43a22d2b0d3.png

Selanjutnya, kita perlu mentransformasi data yang ditampilkan dari Vision API, sebelum kita dapat menyimpannya ke Firestore. Lebih spesifiknya, kita perlu:

  • Mencantumkan label yang ditampilkan untuk gambar.
  • Mengambil warna dominan gambar.
  • Tentukan apakah gambar tersebut aman.

Hal ini dilakukan dalam kode di Cloud Function dan Workflows hanya memanggil fungsi ini:

5e120e70c67779cd.png

Mempelajari kode

Cloud Function dipanggil vision-data-transform. Anda dapat memeriksa kode lengkapnya di index.js. Seperti yang dapat Anda lihat, satu-satunya tujuan fungsi ini adalah melakukan transformasi JSON ke JSON, sehingga metadata gambar dapat disimpan dengan mudah di Firestore.

Men-deploy ke Cloud Functions

Buka folder:

cd workflows/functions/vision-data-transform/nodejs

Tetapkan region pilihan Anda:

export REGION=europe-west1
gcloud config set functions/region ${REGION}

Deploy fungsi dengan:

export SERVICE_NAME=vision-data-transform
gcloud functions deploy ${SERVICE_NAME} \
  --source=. \
  --runtime nodejs10 \
  --entry-point=vision_data_transform \
  --trigger-http \
  --allow-unauthenticated

Setelah fungsi di-deploy, langkah transformImageAnalysisData Workflows akan dapat memanggil fungsi ini untuk melakukan transformasi data Vision API.

9. Menyiapkan database

Langkah berikutnya dalam Workflows adalah memeriksa keamanan gambar dari data gambar, lalu menyimpan informasi tentang gambar yang ditampilkan oleh Vision API ke dalam database Cloud Firestore, yaitu database dokumen NoSQL yang cepat, terkelola sepenuhnya, tanpa server, dan cloud-native:

6624c616bc7cd97f.png

Keduanya dilakukan di Workflows, tetapi Anda perlu membuat database Firestore agar penyimpanan metadata berfungsi.

Pertama, buat aplikasi App Engine di region tempat Anda menginginkan database Firestore (persyaratan untuk Firestore):

export REGION_FIRESTORE=europe-west2
gcloud app create --region=${REGION_FIRESTORE}

Selanjutnya, buat database Firestore di region yang sama:

gcloud firestore databases create --region=${REGION_FIRESTORE}

Dokumen akan dibuat secara terprogram dalam koleksi kami dan akan berisi 4 kolom:

  • name (string): nama file gambar yang diupload, yang juga merupakan kunci dokumen
  • labels (array string): label item yang dikenali oleh Vision API
  • color (string): kode warna heksadesimal dari warna dominan (yaitu. #ab12ef)
  • created (tanggal): stempel waktu saat metadata gambar ini disimpan
  • thumbnail (boolean): kolom opsional yang akan ada dan bernilai benar jika gambar thumbnail telah dibuat untuk gambar ini

Karena kita akan menelusuri di Firestore untuk menemukan gambar yang memiliki thumbnail, dan mengurutkannya berdasarkan tanggal pembuatan, kita perlu membuat indeks penelusuran. Anda dapat membuat indeks dengan perintah berikut:

gcloud firestore indexes composite create --collection-group=pictures \
  --field-config field-path=thumbnail,order=descending \
  --field-config field-path=created,order=descending

Perhatikan bahwa pembuatan indeks dapat memerlukan waktu hingga 10 menit.

Setelah indeks dibuat, Anda dapat melihatnya di Konsol Cloud:

43af1f5103bf423.png

Langkah storeMetadata Workflows kini dapat menyimpan metadata gambar ke Firestore.

10. Layanan thumbnail (Cloud Run)

Langkah selanjutnya dalam rangkaian ini adalah membuat thumbnail gambar. Hal ini dilakukan dalam kode di layanan Cloud Run dan Workflows memanggil layanan ini di langkah thumbnailCall:

84d987647f082b53.png

Mempelajari kode

Layanan Cloud Run ini disebut thumbnails. Anda dapat memeriksa kode lengkapnya di index.js.

Buat dan publikasikan image container

Cloud Run menjalankan container, tetapi Anda harus membangun image container terlebih dahulu (ditetapkan di Dockerfile). Google Cloud Build dapat digunakan untuk membangun image container, lalu menghostingnya ke Google Container Registry.

Buka folder:

cd workflows/services/thumbnails/nodejs

Bentukan:

export SERVICE_SRC=thumbnails
export SERVICE_NAME=${SERVICE_SRC}-service
gcloud builds submit \
  . \
  --tag gcr.io/${GOOGLE_CLOUD_PROJECT}/${SERVICE_NAME}

Setelah satu atau dua menit, build akan berhasil dan container akan di-deploy ke Google Container Registry.

Deploy ke Cloud Run

Tetapkan beberapa variabel dan konfigurasi yang diperlukan:

export BUCKET_THUMBNAILS=thumbnails-${GOOGLE_CLOUD_PROJECT}
export REGION=europe-west1
gcloud config set run/region ${REGION}
gcloud config set run/platform managed

Deploy dengan perintah berikut:

gcloud run deploy ${SERVICE_NAME} \
    --image gcr.io/${GOOGLE_CLOUD_PROJECT}/${SERVICE_NAME} \
    --no-allow-unauthenticated \
    --memory=1Gi \
    --update-env-vars BUCKET_THUMBNAILS=${BUCKET_THUMBNAILS}

Setelah layanan di-deploy, langkah thumbnailCall Workflows akan dapat memanggil layanan ini.

11. Layanan kolase (Cloud Run)

Langkah berikutnya dalam rangkaian ini adalah membuat kolase dari gambar terbaru. Hal ini dilakukan dalam kode di layanan Cloud Run dan Workflows memanggil layanan ini di langkah collageCall:

591e36149066e1ba.png

Mempelajari kode

Layanan Cloud Run ini disebut collage. Anda dapat memeriksa kode lengkapnya di index.js.

Buat dan publikasikan image container

Cloud Run menjalankan container, tetapi Anda harus membangun image container terlebih dahulu (ditetapkan di Dockerfile). Google Cloud Build dapat digunakan untuk membangun image container, lalu menghostingnya ke Google Container Registry.

Buka folder:

cd services/collage/nodejs

Bentukan:

export SERVICE_SRC=collage
export SERVICE_NAME=${SERVICE_SRC}-service
gcloud builds submit \
  . \
  --tag gcr.io/${GOOGLE_CLOUD_PROJECT}/${SERVICE_NAME}

Setelah satu atau dua menit, build akan berhasil dan container akan di-deploy ke Google Container Registry.

Deploy ke Cloud Run

Tetapkan beberapa variabel dan konfigurasi yang diperlukan:

export BUCKET_THUMBNAILS=thumbnails-${GOOGLE_CLOUD_PROJECT}
export REGION=europe-west1
gcloud config set run/region ${REGION}
gcloud config set run/platform managed

Deploy:

gcloud run deploy ${SERVICE_NAME} \
    --image gcr.io/${GOOGLE_CLOUD_PROJECT}/${SERVICE_NAME} \
    --no-allow-unauthenticated \
    --memory=1Gi \
    --update-env-vars BUCKET_THUMBNAILS=${BUCKET_THUMBNAILS}

Setelah layanan di-deploy, Anda dapat memeriksa apakah kedua layanan berjalan di bagian Cloud Run pada Cloud Console dan langkah collageCall Workflows akan dapat memanggil layanan ini:

3ae9873f4cbbf423.png

12. Deployment Workflows

Kami men-deploy semua dependensi eksternal Workflows. Semua langkah yang tersisa (finalizeCompleted, pictureGarbageCollectionGCS, pictureGarbageCollectionFirestore, deleteCompleted) dapat diselesaikan oleh Workflows itu sendiri.

Saatnya men-deploy Alur Kerja.

Buka folder yang berisi file workflows.yaml dan deploy dengan:

export WORKFLOW_REGION=europe-west4
export WORKFLOW_NAME=picadaily-workflows
gcloud workflows deploy ${WORKFLOW_NAME} \
  --source=workflows.yaml \
  --location=${WORKFLOW_REGION}

Dalam beberapa detik, Alur Kerja akan di-deploy dan Anda dapat melihatnya di bagian Workflows di Cloud Console:

94a720149e5df9c5.png

Anda dapat mengklik Alur Kerja dan mengeditnya, jika mau. Selama pengeditan, Anda akan mendapatkan representasi visual yang bagus dari Alur Kerja:

55441b158f6027f3.png

Anda juga dapat menjalankan Alur Kerja dari Cloud Console secara manual dengan parameter yang tepat. Sebagai gantinya, kita akan mengeksekusinya secara otomatis sebagai respons terhadap peristiwa Cloud Storage pada langkah berikutnya.

13. Pemicu Workflows (Cloud Functions)

Alur kerja di-deploy dan siap. Sekarang, kita perlu memicu Workflows saat file dibuat atau dihapus di bucket Cloud Storage. Ini masing-masing adalah peristiwa storage.object.finalize dan storage.object.delete.

Workflows memiliki API dan library klien untuk membuat, mengelola, dan mengeksekusi Workflows yang dapat Anda gunakan. Dalam hal ini, Anda akan menggunakan Workflows Execution API dan khususnya library klien Node.js untuk memicu Alur Kerja.

Anda akan memicu Workflows dari Cloud Function yang memantau peristiwa Cloud Storage. Karena Cloud Function hanya dapat memproses satu jenis peristiwa, Anda akan men-deploy dua Cloud Function untuk memproses peristiwa pembuatan dan penghapusan:

c4d79646de729e4.png

Mempelajari kode

Cloud Function dipanggil trigger-workflow. Anda dapat memeriksa kode lengkapnya di index.js.

Men-deploy ke Cloud Functions

Buka folder:

cd workflows/functions/trigger-workflow/nodejs

Tetapkan beberapa variabel dan konfigurasi yang diperlukan:

export BUCKET_PICTURES=uploaded-pictures-${GOOGLE_CLOUD_PROJECT}
export REGION=europe-west1
export WORKFLOW_NAME=picadaily-workflows
export WORKFLOW_REGION=europe-west4
export COLLAGE_URL=$(gcloud run services describe collage-service --format 'value(status.url)')
export THUMBNAILS_URL=$(gcloud run services describe thumbnails-service --format 'value(status.url)')
export VISION_DATA_TRANSFORM_URL=$(gcloud functions describe vision-data-transform --format 'value(httpsTrigger.url)')
gcloud config set functions/region ${REGION}

Deploy fungsi yang merespons peristiwa penyelesaian:

export SERVICE_NAME=trigger-workflow-on-finalize
gcloud functions deploy ${SERVICE_NAME} \
  --source=. \
  --runtime nodejs10 \
  --entry-point=trigger_workflow \
  --trigger-resource=${BUCKET_PICTURES} \
  --trigger-event=google.storage.object.finalize \
  --allow-unauthenticated \
  --set-env-vars GOOGLE_CLOUD_PROJECT=${GOOGLE_CLOUD_PROJECT},WORKFLOW_REGION=${WORKFLOW_REGION},WORKFLOW_NAME=${WORKFLOW_NAME},THUMBNAILS_URL=${THUMBNAILS_URL},COLLAGE_URL=${COLLAGE_URL},VISION_DATA_TRANSFORM_URL=${VISION_DATA_TRANSFORM_URL}

Deploy fungsi kedua yang merespons peristiwa penghapusan:

export SERVICE_NAME=trigger-workflow-on-delete
gcloud functions deploy ${SERVICE_NAME} \
  --source=. \
  --runtime nodejs10 \
  --entry-point=trigger_workflow \
  --trigger-resource=${BUCKET_PICTURES} \
  --trigger-event=google.storage.object.delete \
  --allow-unauthenticated \
  --set-env-vars GOOGLE_CLOUD_PROJECT=${GOOGLE_CLOUD_PROJECT},WORKFLOW_REGION=${WORKFLOW_REGION},WORKFLOW_NAME=${WORKFLOW_NAME},THUMBNAILS_URL=${THUMBNAILS_URL},COLLAGE_URL=${COLLAGE_URL},VISION_DATA_TRANSFORM_URL=${VISION_DATA_TRANSFORM_URL}

Setelah deployment selesai, Anda dapat melihat kedua fungsi di Konsol Cloud:

7d60c8b7851f39f5.png

14. Frontend (App Engine)

Pada langkah ini, Anda akan membuat frontend web di Google App Engine dari Pic-a-daily: Lab 4—Membuat frontend web yang akan memungkinkan pengguna mengupload gambar dari aplikasi web, serta menjelajahi gambar yang diupload dan thumbnail-nya.

223fb2281614d053.png

Anda dapat mempelajari App Engine lebih lanjut dan membaca deskripsi kode di Pic-a-daily: Lab 4—Membuat frontend web.

Mempelajari kode

Aplikasi App Engine ini bernama frontend. Anda dapat memeriksa kode lengkapnya di index.js.

Men-deploy ke App Engine

Buka folder:

cd frontend

Tetapkan region pilihan Anda dan ganti juga GOOGLE_CLOUD_PROJECT di app.yaml dengan project ID Anda yang sebenarnya:

export REGION=europe-west1
gcloud config set compute/region ${REGION}
sed -i -e "s/GOOGLE_CLOUD_PROJECT/${GOOGLE_CLOUD_PROJECT}/" app.yaml

Deploy:

gcloud app deploy app.yaml -q

Setelah satu atau dua menit, Anda akan diberi tahu bahwa aplikasi menyajikan traffic:

Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 8 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://GOOGLE_CLOUD_PROJECT.appspot.com]
You can stream logs from the command line by running:
  $ gcloud app logs tail -s default
To view your application in the web browser run:
  $ gcloud app browse

Anda juga dapat membuka bagian App Engine di Cloud Console untuk melihat bahwa aplikasi telah di-deploy dan menjelajahi fitur App Engine seperti pembuatan versi dan pemisahan traffic:

f4bd5f4de028bd83.png

15. Menguji Alur Kerja

Untuk menguji, buka URL App Engine default untuk aplikasi https://<YOUR_PROJECT_ID>.appspot.com/, dan Anda akan melihat UI frontend berjalan dan beroperasi.

1649ac060441099.png

Upload gambar. Tindakan ini akan memicu Workflows dan Anda dapat melihat eksekusi Workflow dalam status Active di Cloud Console:

b5a2a3d7a2bc094.png

Setelah Alur Kerja selesai, Anda dapat mengklik ID eksekusi dan melihat output dari berbagai layanan:

8959df5098c21548.png

Upload 3 gambar lagi. Anda juga akan melihat thumbnail dan kolase gambar di bucket Cloud Storage dan frontend App Engine yang diperbarui:

d90c786ff664a5dc.png

16. Membersihkan (Opsional)

Jika tidak ingin menyimpan aplikasi, Anda dapat membersihkan resource untuk menghemat biaya dan menjadi pengguna cloud yang baik secara keseluruhan dengan menghapus seluruh project:

gcloud projects delete ${GOOGLE_CLOUD_PROJECT} 

17. Selamat!

Anda membuat aplikasi versi terorkestrasi menggunakan Workflows untuk mengorkestrasi dan memanggil layanan.

Yang telah kita bahas

  • App Engine
  • Cloud Firestore
  • Cloud Functions
  • Cloud Run
  • Workflows