Cara men-deploy semua framework JavaScript ke Cloud Run

1. Pengantar

Ringkasan

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

• Angular SSR - berdasarkan Angular
• Nuxt.js - berdasarkan Vue.js
• Next.js - berdasarkan React
• Remix - berdasarkan React
• SvelteKit - berdasarkan Svelte
• SolidStart - berdasarkan 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 men-deploy layanan web Node.js dari panduan memulai 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 ID project Anda. Contoh:

   gcloud config set project js-frameworks
   

   Jika diminta untuk memberi otorisasi, klik Authorize.

3. Mengaktifkan API

Sebelum Anda dapat mulai menggunakan codelab ini, ada beberapa API yang perlu Anda aktifkan. 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. Konfigurasi region default

Anda dapat menetapkan region satu per satu untuk setiap deployment. Perintah ini akan menetapkan region default ke us-central1 sehingga Anda tidak perlu menyetelnya untuk setiap region.

gcloud config set run/region us-central1

5. Mengonfigurasi git

Beberapa library memperkirakan git akan digunakan untuk kontrol versi secara default. Jika git sudah dikonfigurasi di mesin 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. Membuat 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 memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

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

Buka URL yang disediakan di tab browser baru untuk melihat aplikasi yang telah 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 diminta jika 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 memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

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

Buka URL yang disediakan di tab browser baru untuk melihat aplikasi yang telah 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 diminta jika Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

8. Next.js (Bereaksi)

1. Buka direktori tempat Anda ingin membuat aplikasi Angular

   cd ~
   

2. Membuat 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 memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

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

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

Pembersihan Opsional

1. Menghapus project Next.js secara lokal

   cd ..
   rm -rf next-app
   

2. Menghapus layanan Cloud Run Next.js

   gcloud run services delete next-app
   

   Saat diminta jika Anda ingin melanjutkan, tekan tombol Enter untuk melanjutkan.

9. Remix (Bereaksi)

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 memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

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

Buka URL yang disediakan di tab browser baru untuk melihat aplikasi yang telah 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 diminta jika 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 di-deploy 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 (Lengkap)

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 memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

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

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

Pembersihan Opsional

1. Menghapus project SvelteKit secara lokal

   cd ..
   rm -rf svelte-app
   

2. Menghapus layanan SvelteKit Cloud Run

   gcloud run services delete svelte-app
   

   Saat diminta jika 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 memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

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

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

Pembersihan Opsional

1. Menghapus project SolidStart secara lokal

   cd ..
   rm -rf solid-app
   

2. Menghapus layanan SolidStart Cloud Run

   gcloud run services delete solid-app
   

   Saat diminta jika 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. Menambahkan 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 otomatis didukung oleh Cloud Run karena Astro tidak menggunakan lingkungan Node.js secara default. Perintah npm pkg set di atas memperbarui skrip start di package.json menjadi HOST=0.0.0.0 node ./dist/server/entry.mjs. Jika Anda mengetahui perintah tersebut 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 memerlukan waktu beberapa menit. Setelah selesai, Cloud Run akan menampilkan URL seperti:

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

Buka URL yang disediakan di tab browser baru untuk melihat aplikasi yang telah 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 diminta jika 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. Menambahkan adaptor 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 Buildpacks untuk men-deploy aplikasi secara otomatis.

Buka aplikasi Anda

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

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

Buka URL yang disediakan di tab browser baru untuk melihat aplikasi yang telah 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 diminta jika 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 sehingga build Anda berikutnya dapat di-deploy secara otomatis pada setiap push ke kontrol versi.

Yang kita bahas

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

16. Pembersihan

Untuk menghindari tagihan yang tidak disengaja, (misalnya, jika layanan Cloud Run ini secara tidak sengaja dipanggil lebih sering daripada alokasi panggilan Cloud Run bulanan Anda di paket gratis), Anda dapat menghapus tugas Cloud Run atau menghapus project yang Anda buat di Langkah 1.

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

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