Tentang codelab ini
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
- 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.
- Jalankan perintah berikut di Cloud Shell untuk menetapkan project
gcloud
Anda: Ganti <PROJECT_ID> dengan ID project Anda. Contoh:gcloud config set project <PROJECT_ID>
Jika diminta untuk memberi otorisasi, klik Authorize.gcloud config set project js-frameworks
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 "you@example.com" git config --global user.name "Your Name" git config --global init.defaultBranch main
6. SSR Angular (Angular)
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi Angular yang menggunakan Rendering Sisi Server (SSR)
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx @angular/cli new angular-app --ssr
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd angular-app
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
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
- Menghapus project Angular secara lokal
cd ..
rm -rf angular-app - Menghapus layanan Angular Cloud Run
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete angular-app
Enter
untuk melanjutkan.
7. Nuxt.js (Vue.js)
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi Nuxt.js
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx nuxi init nuxt-app
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd nuxt-app
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
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
- Menghapus project Nuxt.js secara lokal
cd ..
rm -rf nuxt-app - Menghapus layanan Cloud Run Nuxt.js
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete nuxt-app
Enter
untuk melanjutkan.
8. Next.js (Bereaksi)
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi Next.js
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx create-next-app next-app
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd next-app
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
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
- Menghapus project Next.js secara lokal
cd ..
rm -rf next-app - Menghapus layanan Cloud Run Next.js
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete next-app
Enter
untuk melanjutkan.
9. Remix (Bereaksi)
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi Remix
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx create-remix remix-app
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd remix-app
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
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
- Menghapus project Remix secara lokal
cd ..
rm -rf remix-app - Menghapus layanan Remix Cloud Run
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete remix-app
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)
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi SvelteKit
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx create-svelte svelte-app
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd svelte-app
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
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
- Menghapus project SvelteKit secara lokal
cd ..
rm -rf svelte-app - Menghapus layanan SvelteKit Cloud Run
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete svelte-app
Enter
untuk melanjutkan.
12. SolidStart (Solid)
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi SolidStart
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx create-solid solid-app
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd solid-app
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
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
- Menghapus project SolidStart secara lokal
cd ..
rm -rf solid-app - Menghapus layanan SolidStart Cloud Run
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete solid-app
Enter
untuk melanjutkan.
13. Astro
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi Astro
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx create-astro astro-app
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd astro-app
- Menambahkan adaptor Astro untuk Node.js
npx astro add node
- Perbarui skrip
start
dipackage.json
npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
Enter
untuk menerima setelan default.
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
- Menghapus project Astro secara lokal
cd ..
rm -rf astro-app - Menghapus layanan Astro Cloud Run
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete astro-app
Enter
untuk melanjutkan.
14. Qwik
- Buka direktori tempat Anda ingin membuat aplikasi Angular
cd ~
- Membuat aplikasi Qwik
Saat diminta untuk memasukkan preferensi Anda, tekan tombolnpx create-qwik
Enter
untuk menerima setelan default. - Buka folder project baru yang Anda buat
cd qwik-app
- Menambahkan adaptor Qwik untuk Cloud Run
npm run qwik add cloud-run
- Men-deploy aplikasi
Saat diminta untuk memasukkan preferensi Anda, tekan tombolgcloud run deploy --allow-unauthenticated
Enter
untuk menerima setelan default.
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
- Menghapus project Qwik secara lokal
cd ..
rm -rf qwik-app - Menghapus layanan Qwik Cloud Run
Saat diminta jika Anda ingin melanjutkan, tekan tombolgcloud run services delete qwik-app
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
.