Cara men-deploy semua framework JavaScript ke Cloud Run

1. Pengantar

Ringkasan

Dalam codelab ini, deploy delapan aplikasi JavaScript ke Cloud Run:

• SSR Angular - berdasarkan Angular
• Nuxt.js - berdasarkan Vue.js
• Next.js - berdasarkan React
• Remix - berdasarkan React
• SvelteKit - berdasarkan Svelte
• SolidStart - berbasis Solid.js
• Astro
• Qwik

Yang akan Anda pelajari

• Cara men-deploy framework JavaScript yang didukung Cloud Build secara otomatis
• Cara men-deploy framework JavaScript yang memerlukan konfigurasi

Prasyarat

• Anda login ke terminal Cloud Shell.
• Anda memiliki project Google Cloud dengan penagihan yang diaktifkan dan izin untuk men-deploy ke Cloud Run
  • Anda dapat mengonfirmasi hal ini jika sebelumnya telah men-deploy layanan Cloud Run. Misalnya, Anda dapat mengikuti panduan memulai men-deploy layanan web Node.js dari kode sumber untuk memulai.

2. Mengaktifkan Cloud Shell

1. Buka terminal Cloud Shell: https://shell.cloud.google.com/?show=terminalJika ini adalah pertama kalinya Anda memulai Cloud Shell, Anda akan melihat layar perantara yang menjelaskan apa itu Cloud Shell. Jika Anda melihat layar perantara, klik Continue.Hanya perlu waktu beberapa saat untuk melakukan penyediaan dan terhubung ke Cloud Shell.
2. Jalankan perintah berikut di Cloud Shell untuk menetapkan project gcloud Anda:

   gcloud config set project <PROJECT_ID>
   

   Ganti <PROJECT_ID> dengan project ID Anda. Contoh:

   gcloud config set project js-frameworks
   

   Jika diminta untuk memberikan otorisasi, klik Authorize.

3. Mengaktifkan API

Sebelum Anda dapat mulai menggunakan codelab ini, ada beberapa API yang perlu diaktifkan. Codelab ini memerlukan penggunaan API berikut. Anda dapat mengaktifkan API tersebut dengan menjalankan perintah berikut:

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

Kemudian, Anda dapat menetapkan variabel lingkungan yang akan digunakan di seluruh codelab ini.

4. Mengonfigurasi region default

Anda dapat menetapkan wilayah secara terpisah untuk setiap deployment. Perintah ini akan menetapkan region default ke us-central1 sehingga Anda tidak perlu menetapkannya untuk setiap region.

gcloud config set run/region us-central1

5. Mengonfigurasi git

Beberapa library secara default mengharapkan git digunakan untuk kontrol versi. Jika Anda sudah mengonfigurasi git di komputer Anda (contoh: Anda menjalankan lab ini secara lokal), Anda tidak perlu menjalankan langkah-langkah ini.

git config --global user.email "[e-mail]"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. SSR Angular (Angular)

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Buat aplikasi Angular yang menggunakan Rendering Sisi Server (SSR)

   npx @angular/cli new angular-app --ssr
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd angular-app
   

4. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://angular-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Menghapus project Angular secara lokal

   cd ..
   rm -rf angular-app
   

2. Menghapus layanan Angular Cloud Run

   gcloud run services delete angular-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

7. Nuxt.js (Vue.js)

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Membuat aplikasi Nuxt.js

   npx nuxi init nuxt-app
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd nuxt-app
   

4. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Menghapus project Nuxt.js secara lokal

   cd ..
   rm -rf nuxt-app
   

2. Menghapus layanan Cloud Run Nuxt.js

   gcloud run services delete nuxt-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

8. Next.js (React)

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Buat aplikasi Next.js

   npx create-next-app next-app
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd next-app
   

4. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://next-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Hapus project Next.js secara lokal

   cd ..
   rm -rf next-app
   

2. Hapus layanan Cloud Run Next.js

   gcloud run services delete next-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

9. Remix (React)

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Membuat aplikasi Remix

   npx create-remix remix-app
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd remix-app
   

4. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://remix-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Menghapus project Remix secara lokal

   cd ..
   rm -rf remix-app
   

2. Menghapus layanan Remix Cloud Run

   gcloud run services delete remix-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

10. Pembersihan Cloud Shell

Jika Anda tidak menggunakan Cloud Shell atau hanya men-deploy satu aplikasi, langkah ini bersifat opsional

Cloud Shell menawarkan direktori beranda persisten berkapasitas 5 GB dan berjalan di Google Cloud.

Untuk men-deploy kedelapan framework dengan Cloud Shell, Anda harus menyediakan ruang untuk aplikasi yang tersisa.

Menghapus project di Cloud Shell tidak akan menghapus layanan Cloud Run yang telah Anda deploy.

Untuk menghapus aplikasi yang telah Anda buat, jalankan perintah berikut:

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Svelte)

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Membuat aplikasi SvelteKit

   npx create-svelte svelte-app
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd svelte-app
   

4. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://svelte-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Hapus project SvelteKit secara lokal

   cd ..
   rm -rf svelte-app
   

2. Menghapus layanan Cloud Run SvelteKit

   gcloud run services delete svelte-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

12. SolidStart (Solid)

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Membuat aplikasi SolidStart

   npx create-solid solid-app
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd solid-app
   

4. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://solid-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Hapus project SolidStart secara lokal

   cd ..
   rm -rf solid-app
   

2. Hapus layanan Cloud Run SolidStart

   gcloud run services delete solid-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

13. Astro

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Membuat aplikasi Astro

   npx create-astro astro-app
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd astro-app
   

4. Tambahkan adaptor Astro untuk Node.js

   npx astro add node
   

5. Perbarui skrip start di package.json

   npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
   

6. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Catatan: Astro tidak didukung secara otomatis oleh Cloud Run karena Astro tidak menggunakan lingkungan Node.js secara default. Perintah npm pkg set di atas akan mengupdate skrip start di package.json menjadi HOST=0.0.0.0 node ./dist/server/entry.mjs. Jika Anda mengetahui perintah untuk memulai aplikasi, tetapkan perintah tersebut sebagai skrip start. Cloud Build akan mencoba menjalankan aplikasi Anda dengan apa pun yang Anda tetapkan sebagai skrip start.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://astro-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Menghapus project Astro secara lokal

   cd ..
   rm -rf astro-app
   

2. Menghapus layanan Astro Cloud Run

   gcloud run services delete astro-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

14. Qwik

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Membuat aplikasi Qwik

   npx create-qwik
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.
3. Buka folder project baru yang Anda buat

   cd qwik-app
   

4. Tambahkan adapter Qwik untuk Cloud Run

   npm run qwik add cloud-run
   

5. Men-deploy aplikasi

   gcloud run deploy --allow-unauthenticated
   

   Saat diminta untuk memasukkan preferensi Anda, tekan tombol Enter untuk menerima setelan default.

Catatan: Qwik menggunakan Dockerfile untuk menentukan cara membangun dan menjalankan project. Jika framework yang Anda pilih tidak didukung secara otomatis oleh Cloud Run, Anda dapat menggunakan Dockerfile untuk men-deploy framework pilihan Anda seperti yang dilakukan Qwik. Cloud Build akan mencari Dockerfile sebelum mencoba menggunakan Buildpack untuk men-deploy aplikasi secara otomatis.

Buka aplikasi Anda

Deployment akan memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

https://qwik-app-xxxxxxxxxx-uc.a.run.app

Buka URL yang diberikan di tab browser baru untuk melihat aplikasi yang di-deploy.

Pembersihan Opsional

1. Menghapus project Qwik secara lokal

   cd ..
   rm -rf qwik-app
   

2. Menghapus layanan Qwik Cloud Run

   gcloud run services delete qwik-app
   

   Saat ditanya apakah Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

15. Selamat!

Selamat, Anda telah menyelesaikan codelab.

Sebaiknya tinjau dokumentasi tentang Panduan memulai: Deploy ke Cloud Run dari repositori git agar build Anda di masa mendatang dapat di-deploy secara otomatis dengan setiap push ke kontrol versi.

Yang kita bahas

• Cara men-deploy framework JavaScript yang didukung Cloud Build secara otomatis
  • SSR Angular - berdasarkan Angular
  • Nuxt.js - berdasarkan Vue.js
  • Next.js - berdasarkan React
  • Remix - berdasarkan React
  • SvelteKit - berdasarkan Svelte
  • SolidStart - berbasis Solid.js
• Cara men-deploy framework JavaScript yang memerlukan konfigurasi
  • Astro
  • Qwik

16. Pembersihan

Untuk menghindari biaya yang tidak disengaja (misalnya, jika layanan Cloud Run ini tidak sengaja dipanggil lebih banyak kali daripada alokasi pemanggilan Cloud Run bulanan Anda di tingkat gratis), Anda dapat menghapus tugas Cloud Run atau menghapus project yang Anda buat di Langkah 1.

Untuk menghapus layanan Cloud Run, buka Konsol Cloud Run di https://console.cloud.google.com/run/ dan hapus layanan Cloud Run.

Jika Anda memilih untuk menghapus seluruh project, Anda dapat membuka https://console.cloud.google.com/cloud-resource-manager, memilih project yang Anda buat di Langkah 2, lalu memilih Hapus. Jika menghapus project, Anda harus mengubah project di Cloud SDK. Anda dapat melihat daftar semua project yang tersedia dengan menjalankan gcloud projects list.