GSP747

Ringkasan

Di lab ini, Anda akan membuat pipeline untuk men-deploy situs yang dibuat dengan Hugo, yakni sebuah pembuat situs statis. Anda akan menyimpan konten situs di repositori Git, men-deploy-nya dengan Firebase, lalu menggunakan Cloud Build untuk membangun pipeline yang secara otomatis men-deploy tiap konten baru yang di-commit ke repositori tersebut.

Tujuan

Di lab ini, Anda akan melakukan tugas-tugas berikut:

• Membaca ringkasan situs statis.
• Menyiapkan situs dengan Hugo.
• Menyimpan konten situs di repositori Git.
• Men-deploy situs dengan Firebase
• Membuat pipeline build dengan Cloud Build untuk mengotomatiskan deployment

Prasyarat

Anda mungkin akan terbantu jika memiliki pengalaman langsung dengan layanan yang akan Anda gunakan. Berikut beberapa lab lain yang mungkin berguna untuk Anda:

• Membangun Aplikasi Serverless dengan Cloud Run untuk Membuat File PDF
• Web Firebase

Manfaat situs statis

Pembuat situs statis seperti Hugo menjadi populer karena dapat menghasilkan situs yang tidak memerlukan server web. Dalam platform web statis, pemeliharaan sistem operasi server atau software tidak diperlukan. Namun, tetap ada berbagai pertimbangan operasional. Misalnya, Anda mungkin perlu menerapkan kontrol versi pada postingan Anda, menghosting situs pada jaringan penayangan konten ("CDN"), dan menyediakan sertifikat SSL.

Anda dapat memenuhi kebutuhan tersebut menggunakan pipeline Continuous Integration/Continuous Deployment di Google Cloud. Pipeline deployment dapat dimanfaatkan developer untuk berinovasi secara cepat dengan mengotomatiskan seluruh proses deployment. Di lab ini, Anda akan mempelajari cara membangun pipeline yang mendemonstrasikan otomatisasi tersebut.

Penyiapan dan persyaratan

Sebelum mengklik tombol Start Lab

Baca petunjuk ini. Lab memiliki timer dan Anda tidak dapat menjedanya. Timer yang dimulai saat Anda mengklik Start Lab akan menampilkan durasi ketersediaan resource Google Cloud untuk Anda.

Lab interaktif ini dapat Anda gunakan untuk melakukan aktivitas lab di lingkungan cloud sungguhan, bukan di lingkungan demo atau simulasi. Untuk mengakses lab ini, Anda akan diberi kredensial baru yang bersifat sementara dan dapat digunakan untuk login serta mengakses Google Cloud selama durasi lab.

Untuk menyelesaikan lab ini, Anda memerlukan:

• Akses ke browser internet standar (disarankan browser Chrome).

Catatan: Gunakan jendela Samaran (direkomendasikan) atau browser pribadi untuk menjalankan lab ini. Hal ini akan mencegah konflik antara akun pribadi Anda dan akun siswa yang dapat menyebabkan tagihan ekstra pada akun pribadi Anda.

• Waktu untuk menyelesaikan lab. Ingat, setelah dimulai, lab tidak dapat dijeda.

Catatan: Hanya gunakan akun siswa untuk lab ini. Jika Anda menggunakan akun Google Cloud yang berbeda, Anda mungkin akan dikenai tagihan ke akun tersebut.

Cara memulai lab dan login ke Konsol Google Cloud

1. Klik tombol Start Lab. Jika Anda perlu membayar lab, dialog akan terbuka untuk memilih metode pembayaran. Di sebelah kanan terdapat panel Lab setup and access yang berisi hal-hal berikut:

   • Tombol Open Google Cloud console
   • Kredensial sementara (nama pengguna dan sandi) yang harus Anda gunakan untuk lab ini
   • Informasi lain, jika diperlukan, untuk menyelesaikan lab ini

   Perhatikan bahwa timer lab terletak di dekat bagian atas halaman, yang menampilkan waktu yang tersisa.

2. Klik Open Google Cloud console (atau klik kanan dan pilih Open Link in Incognito Window jika Anda menjalankan browser Chrome).

   Lab akan menjalankan resource, lalu membuka tab lain yang menampilkan halaman Sign in.

   Tips: Atur tab di jendela terpisah secara berdampingan.

   Catatan: Jika Anda melihat dialog Choose an account, klik Use Another Account.

3. Jika perlu, salin Username di bawah dan tempel ke dialog Sign in.

   {{{user_0.username | "Username"}}}

   Anda juga dapat menemukan Username di panel Lab setup and access.

4. Klik Next.

5. Salin Password di bawah dan tempel ke dialog Welcome.

   {{{user_0.password | "Password"}}}

   Anda juga dapat menemukan Password di panel Lab setup and access.

6. Klik Next.

   Penting: Anda harus menggunakan kredensial yang diberikan lab. Jangan menggunakan kredensial akun Google Cloud Anda. Catatan: Penggunaan akun Google Cloud sendiri untuk lab ini mungkin dikenai biaya tambahan.

7. Klik untuk melanjutkan ke halaman berikutnya:

   • Setujui persyaratan dan ketentuan.
   • Jangan tambahkan opsi pemulihan atau autentikasi 2 langkah (karena ini akun sementara).
   • Jangan daftar uji coba gratis.

Setelah beberapa saat, Konsol Google Cloud akan terbuka di tab ini.

Catatan: Untuk mengakses produk dan layanan Google Cloud, klik Navigation menu atau ketik nama layanan atau produk di kolom Search.

Ringkasan proses

Berikut adalah diagram yang menunjukkan apa yang akan Anda bangun:

Tujuannya adalah agar setiap kali Anda melakukan commit pada kode, tindakan tersebut memicu pipeline yang kemudian men-deploy situs secara otomatis. Lab ini terdiri dari dua bagian. Pertama, Anda akan membuat situs secara lokal dan men-deploy-nya ke Firebase secara manual. Kedua, Anda akan mengotomatiskan proses tersebut dengan membangun pipeline menggunakan Cloud Build.

Tugas 1. Deployment manual

Pertama, buat situs secara manual di instance Linux untuk mempelajari prosesnya secara menyeluruh. Anda juga akan menggunakan instance Linux untuk mengerjakan beberapa tugas satu kali yang diperlukan untuk menyiapkan dan mengoperasikan Firebase.

Terhubung ke instance Linux

1. Dari Navigation menu (), pilih Compute Engine > VM Instances. Perhatikan instance yang telah dibangun untuk Anda.

Di akhir baris, Anda akan melihat alamat IP Eksternal dan tombol SSH seperti yang ditunjukkan pada gambar berikut. Jika keduanya tertutup oleh panel informasi, tutup panel tersebut agar Anda dapat melihat seluruh baris.

2. Catat alamat IP Eksternal tersebut untuk digunakan nanti.
3. Klik SSH. Sebuah jendela akan terbuka dan Anda akan melihat prompt shell.

Menginstal Hugo

Selanjutnya, instal Hugo di instance Linux untuk menguji situs secara lokal sebelum Anda men-deploy-nya dengan Firebase. Lab ini menyediakan skrip shell untuk mempermudah penginstalan.

1. Di shell instance Linux, periksa file installhugo.sh.

cat /tmp/installhugo.sh

Output yang dihasilkan akan terlihat seperti contoh output berikut:

Output:

_HUGO_VERSION=0.96.0 curl -L https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz | tar -xz -C /tmp/ # echo The Hugo binary is now at /tmp/hugo.

Perhatikan penggunaan perintah curl untuk mendownload Hugo dan perintah tar untuk membuka arsip Hugo. Anda akan melihat perintah serupa di bagian selanjutnya dalam lab ini saat membuat pipeline.

2. Masukkan perintah berikut untuk menjalankan skrip dan menginstal Hugo:

cd ~ /tmp/installhugo.sh

Setelah selesai, Anda akan menerima pesan yang menyatakan bahwa Hugo telah diinstal ke direktori /tmp seperti yang ditunjukkan di bawah ini.

Kini Anda siap untuk membangun infrastruktur situs.

Membuat repositori dan situs awal

Buat clone repositori Git yang telah dibuat sebelumnya ke instance Linux.

Membuat clone repositori berarti membuat duplikasinya di dalam shell. Dengan demikian, Anda dapat menerapkan situs selagi di dalam shell, kemudian melakukan commit atas perubahan yang dibuat ke sistem file. Berikutnya dalam lab ini, Anda akan menyiapkan pipeline yang merespons commit tersebut ke repositori.

1. Instal git di VM Linux, lalu tetapkan project ID, nomor project, dan region Anda. Simpan nilai tersebut ke dalam variabel PROJECT_ID, PROJECT_NUMBER, dan REGION:

Masukkan perintah berikut pada shell instance Linux:

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])") sudo apt-get update sudo apt-get install -y git

2. Jalankan perintah berikut untuk mengonfigurasi Git:

git config --global init.defaultBranch main git config --global user.name "student" git config --global user.email "{{{user_0.username | "filled in at lab start"}}}"

3. Masukkan perintah berikut untuk membuat clone repositori yang telah dibuat sebelumnya dari server Gitea lokal:

cd ~ git clone http://giteaadmin:GiteaPassword123@localhost:3000/giteaadmin/my_hugo_site.git Catatan: Peringatan output warning: You appear to have cloned an empty repository. adalah hal yang wajar karena repositori baru diinisialisasi dan belum berisi commit apa pun.

Klik Periksa progres saya untuk memverifikasi tujuan. Membuat Repositori Git

Kini Anda siap untuk membuat struktur situs.

6. Masukkan perintah berikut di shell Linux:

cd ~ /tmp/hugo new site my_hugo_site --force

Biasanya, perintah hugo akan membuat direktori. Opsi --force memungkinkan situs dibuat di dalam direktori repositori yang sudah ada. Dengan begitu, Anda dapat menyimpan informasi terkait Git di dalam direktori yang baru saja Anda clone.

Setelah selesai, akan muncul pesan yang menyatakan bahwa situs telah berhasil dibuat.

7. Selanjutnya, instal tema hello-friend-ng untuk menata situs Anda. Masukkan perintah berikut pada shell instance Linux:

cd ~/my_hugo_site git clone \ https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng echo 'theme = "hello-friend-ng"' >> config.toml

Setelah selesai, akan muncul pesan yang menyatakan bahwa tema telah di-clone.

8. Hapus file git dari direktori tema:

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore Catatan: File git harus dihapus agar repositori Git dapat menambahkan file tema ke kontrol versi.

9. Setelah struktur situs selesai disiapkan, Anda dapat melihat pratinjaunya. Masukkan perintah berikut untuk meluncurkan situs pada port TCP 8080:

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

Hugo akan membangun situs dan menyajikannya agar dapat diakses melalui port TCP 8080. Server akan tetap berjalan hingga Anda menghentikannya dengan menekan CTRL+C.

10. Buka tab browser dan akses alamat IP eksternal di port 8080. Gunakan URL berikut dan ganti [EXTERNAL IP] dengan alamat IP eksternal instance hugo-dev-vm Anda.

Anda dapat menemukan alamat IP eksternal di Konsol Google Cloud pada bagian Compute Engine > VM Instances di kolom External IP. Atau, jalankan perintah berikut di terminal Anda untuk mengambilnya:

curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip

Buka:

http://[EXTERNAL IP]:8080

Situs tersebut akan terlihat seperti berikut.

Klik Periksa progres saya untuk memverifikasi tujuan. Meluncurkan situs di port TCP 8080

11. Kembali ke shell Linux dan tekan CTRL+C untuk menghentikan server Hugo.

Men-deploy situs ke Firebase

1. Instal Firebase CLI di shell instance Linux:

curl -sL https://firebase.tools | bash

2. Selanjutnya, Anda perlu melakukan inisialisasi Firebase. Masukkan perintah berikut ke dalam shell:

cd ~/my_hugo_site firebase init

3. Pilih Hosting: Set up deployments for static web apps menggunakan tombol panah dan spasi, lalu tekan ENTER.

• Saat diminta memilih opsi project, pilih Use an existing project, kemudian gunakan tombol panah, spasi, dan ENTER untuk memilih Project ID, .

• Untuk direktori publik, pilih nilai default public.

• Untuk mengonfigurasi sebagai aplikasi web satu halaman, ketik N, lalu tekan ENTER.

• Untuk menyiapkan build otomatis dan men-deploy dengan GitHub/Git eksternal, ketik N, lalu tekan ENTER.

• Untuk menginstal keahlian agen untuk Firebase, pilih N.

Jika ditanya apakah ingin menimpa file yang ada, pilih Y.

4. Kini Anda siap untuk men-deploy aplikasi. Masukkan perintah berikut ke dalam shell instance Linux untuk membuat kembali situs dengan Hugo dan men-deploy-nya dengan Firebase:

/tmp/hugo && firebase deploy

5. Setelah aplikasi di-deploy, Anda akan menerima URL hosting. Klik URL tersebut untuk melihat situs yang sama, tetapi kini disajikan melalui jaringan penayangan konten (CDN) Firebase.

Jika yang muncul adalah pesan selamat datang bawaan, tunggu beberapa menit hingga CDN selesai melakukan inisialisasi, lalu muat ulang jendela browser. Simpan URL hosting ini untuk digunakan nanti.

Pada tahap ini, Anda telah berhasil melakukan seluruh proses deployment secara lokal. Selanjutnya, Anda akan mengotomatiskan proses deployment secara menyeluruh menggunakan Cloud Build.

Tugas 2. Mengotomatiskan deployment

Memastikan variabel lingkungan

Sebelum melanjutkan, pastikan variabel lingkungan pada sesi Anda masih terdefinisi. Jika Anda telah memulai ulang sesi terminal atau koneksi terputus, jalankan perintah berikut di shell instance Linux untuk mendefinisikannya kembali:

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])")

Mengonfigurasi build

Cloud Build menggunakan file bernama cloudbuild.yaml yang berada di direktori root repositori untuk menjalankan proses build. File tersebut menggunakan format YAML. Karena spasi dan indentasi sangat penting dalam format ini, file tersebut sudah disediakan di instance Linux.

1. Di shell Linux, masukkan perintah berikut. Perhatikan tanda titik (".") di ujung perintah cp:

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. Jalankan perintah berikut untuk melihat tampilan file cloudbuild.yaml.

cat cloudbuild.yaml

Beberapa baris yang terlalu panjang di output ditampilkan di lebih dari satu baris.

Output:

# Copyright 2020 Google Inc. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. steps: - name: 'gcr.io/cloud-builders/git' args: ['clone', 'http://giteaadmin:GiteaPassword123@${_GIT_SERVER_IP}:3000/giteaadmin/my_hugo_site.git', '.'] - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://firebase.tools/bin/linux/latest' - '-o' - '/workspace/firebase' - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' - '-o' - '/workspace/hugo.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | tar -xvf /workspace/hugo.tar.gz chmod 755 /workspace/firebase /workspace/hugo /workspace/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 _GIT_SERVER_IP: '' options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. Berikut beberapa hal yang diamati dari file cloudbuild.yaml:

• File ini berisi empat langkah yang diberi nama, dan masing-masing dijalankan menggunakan image container. Langkah pertama menggunakan git untuk meng-clone kode sumber situs dari repositori Gitea. Dua langkah berikutnya menggunakan builder yang didukung Google untuk menggunakan curl guna mendownload alat Hugo dan Firebase.
• Langkah keempat menggunakan container Ubuntu standar untuk menginstal Hugo dan Firebase, yang dilanjutkan dengan membangun serta men-deploy situs. Dengan menginstal Hugo dan Firebase untuk tiap deployment, Anda dapat mengubah versi Hugo kapan saja sekaligus tetap menggunakan Firebase versi terbaru.
• Perintah tar dan wget hampir sama dengan perintah yang sebelumnya digunakan dalam skrip installhugo.sh.
• File ini juga menggunakan variabel substitusi kustom (_HUGO_VERSION dan _GIT_SERVER_IP) dan variabel substitusi yang disediakan Google (PROJECT_ID), sehingga template yang sama dapat digunakan di berbagai lingkungan.
• Program biner Hugo dan Firebase dibuat dan diinstal pada direktori sementara untuk mencegahnya secara tidak sengaja di-deploy ke situs itu sendiri.

Menjalankan commit awal

Tujuan pembuatan pipeline adalah agar build dapat dipicu secara otomatis ketika terjadi perubahan pada repositori. Mulailah dengan melakukan commit awal ke repositori untuk memastikan Anda dapat melakukan perubahan di kemudian hari.

1. Masukkan perintah berikut ke dalam shell Linux untuk membuat file .gitignore yang digunakan untuk mengecualikan direktori tertentu dari repositori:

cd ~/my_hugo_site echo "resources" >> .gitignore

2. Lakukan commit awal ke repositori:

git add . git commit -m "Add app to Git Repository" git push -u origin main

Anda telah melakukan commit (mengupload) versi awal situs ke Google Cloud.

Catatan: Pastikan Anda menggunakan cabang yang benar dengan menjalankan perintah git branch . Jika yang ditampilkan adalah master, ganti namanya menjadi main menggunakan perintah berikut: git branch -m master main.

Membuat Pemicu Webhook Cloud Build

Sekarang Anda membuat pemicu Webhook Cloud Build yang merespons push kode dari repositori Git Gitea.

1. Buat pemicu Webhook Cloud Build menggunakan secret Secret Manager yang telah disediakan sebelumnya:

gcloud builds triggers create webhook --name="commit-to-main-branch1" \ --inline-config="cloudbuild.yaml" \ --secret="projects/$PROJECT_ID/secrets/webhook-secret/versions/1" \ --service-account="projects/$PROJECT_ID/serviceAccounts/$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')-compute@developer.gserviceaccount.com" \ --substitutions=_GIT_SERVER_IP=$(curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip) \ --region=$REGION

Klik Periksa progres saya untuk memverifikasi tujuan. Membuat pemicu Cloud Build

Akun layanan Cloud Build

Agar dapat men-deploy situs menggunakan Firebase, akun layanan Cloud Build harus memiliki izin yang diperlukan.

Cloud Build	Peran	Deskripsi
[PROJECT_NUMBER]@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Akses baca/tulis penuh ke resource Hosting

Menguji pipeline

Setelah selesai membuat pipeline, Anda dapat membuat perubahan pada situs, kemudian melakukan commit untuk melihat apakah perubahan tersebut berhasil diterapkan.

1. Masukkan perintah berikut dalam shell Linux untuk berpindah ke direktori repositori:

cd ~/my_hugo_site

2. Edit file config.toml dan ubah judulnya.

Anda dapat menggunakan editor teks nano untuk membuka dan mengedit file:

nano config.toml

Temukan baris yang berisi title dan ubah menjadi:

title = "Blogging with Hugo and Cloud Build"

Tekan CTRL+O, ENTER untuk menyimpan, dan CTRL+X untuk keluar dari editor nano.

Anda juga dapat menjalankan perintah sed berikut di shell untuk mengupdate judul secara otomatis:

sed -i 's/title =.*/title = "Blogging with Hugo and Cloud Build"/g' config.toml

3. Masukkan perintah berikut untuk melakukan commit perubahan ke repositori dan memicu pipeline Cloud Build:

git add . git commit -m "I updated the site title" git push -u origin main

4. Periksa histori build untuk melihat status build:

gcloud builds list --region=$REGION

5. Periksa log build untuk mencari build yang sedang berjalan:

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)')

6. Ambil URL dari build yang dijalankan:

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)') | grep "Hosting URL"

7. Akses URL hosting untuk melihat hasilnya.

Anda juga dapat membuka Firebase console dan melihat project untuk menemukan nama domainnya.

Catatan: CDN memerlukan waktu beberapa menit untuk memperbarui dan menampilkan versi terbaru dari situs. Catatan: Situs ini memiliki sertifikat SSL dan dapat diakses menggunakan protokol https (Hypertext Transfer Protocol Secure).

Klik Periksa progres saya untuk memverifikasi tujuan. Menguji pipeline

Selamat!

Anda telah mempelajari cara pembuatan pipeline dengan Cloud Build untuk men-deploy situs Hugo ke Firebase secara cepat. Firebase menyediakan CDN dan sertifikat SSL. Dengan Cloud Build, Anda dapat menyesuaikan proses deployment sesuai kebutuhan. Dengan waktu deployment yang singkat, Anda dapat berinovasi secara cepat dan menguji revisi situs dengan mudah. Baca dokumentasi Cloud Build dan Firebase untuk mendapatkan informasi lebih lanjut.

Sertifikasi dan pelatihan Google Cloud

...membantu Anda mengoptimalkan teknologi Google Cloud. Kelas kami mencakup keterampilan teknis dan praktik terbaik untuk membantu Anda memahami dengan cepat dan melanjutkan proses pembelajaran. Kami menawarkan pelatihan tingkat dasar hingga lanjutan dengan opsi on demand, live, dan virtual untuk menyesuaikan dengan jadwal Anda yang sibuk. Sertifikasi membantu Anda memvalidasi dan membuktikan keterampilan serta keahlian Anda dalam teknologi Google Cloud.

Manual Terakhir Diperbarui pada 18 Juni 2025

Lab Terakhir Diuji pada 18 Juni 2026

Hak cipta 2026 Google LLC. Semua hak dilindungi undang-undang. Google dan logo Google adalah merek dagang dari Google LLC. Semua nama perusahaan dan produk lain mungkin adalah merek dagang masing-masing perusahaan yang bersangkutan.