GSP747

Ringkasan

Di lab ini, Anda akan membuat pipeline untuk men-deploy situs berbasis Hugo, yang merupakan pembuat situs statis. Anda akan menyimpan konten situs di repositori GitHub, men-deploy situs dengan Firebase, lalu menggunakan Cloud Build untuk membuat pipeline guna secara otomatis men-deploy konten baru yang telah di-commit ke repositori.

Tujuan

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

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

Prasyarat

Untuk menyelesaikan lab ini, Anda memerlukan akun GitHub pribadi. Jika perlu, buat akun di GitHub.com.

Anda juga mungkin akan terbantu jika sudah memiliki pengalaman langsung dalam menangani layanan yang akan Anda gunakan. Berikut beberapa lab lain yang mungkin berguna untuk Anda:

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

Manfaat situs statis

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

Anda dapat memenuhi berbagai kebutuhan ini dengan 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 ini.

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 Google Cloud Console

1. Klik tombol Start Lab. Jika Anda perlu membayar lab, dialog akan terbuka untuk memilih metode pembayaran. Di sebelah kiri ada panel Lab Details yang berisi hal-hal berikut:

   • Tombol Open Google Cloud console
   • Waktu tersisa
   • Kredensial sementara yang harus Anda gunakan untuk lab ini
   • Informasi lain, jika diperlukan, untuk menyelesaikan lab ini

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 Details.

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 Details.

6. Klik Next.

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

7. Klik halaman berikutnya:

   • Setujui persyaratan dan ketentuan.
   • Jangan tambahkan opsi pemulihan atau autentikasi 2 langkah (karena ini akun sementara).
   • Jangan mendaftar 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 diagram tentang hal yang akan Anda bangun:

Tujuan kita adalah melakukan commit kode yang akan memicu pipeline, yang kemudian akan men-deploy situs. Perjalanan Anda dibagi menjadi dua bagian. Pertama, Anda akan membuat situs secara lokal dan men-deploy-nya secara manual ke Firebase. Kedua, Anda akan mengotomatiskan proses dengan membangun pipeline menggunakan Cloud Build.

Tugas 1. Deployment manual

Pertama, bangun situs secara manual pada instance Linux agar Anda dapat 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 ujung baris, Anda akan melihat alamat IP Eksternal dan tombol SSH seperti yang tampak pada gambar di bawah ini. Jika keduanya terhalang panel informasi, tutup panel tersebut agar Anda dapat melihat seluruh baris.

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

Menginstal Hugo

Sekarang, 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 ditampilkan akan mirip dengan contoh output di bawah:

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 yang sama nanti di lab ini ketika Anda membuat pipeline.

2. Masukkan perintah di bawah ini 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.

Sekarang, Anda siap membuat infrastruktur situs.

Membuat repositori dan situs awal

Buat repositori GitHub untuk menampung situs, lalu clone repositori tersebut ke instance Linux.

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

1. Instal git dan GitHub CLI di VM Linux serta tetapkan project ID, nomor project, dan region Anda. Simpan sebagai variabel PROJECT_ID, PROJECT_NUMBER, dan REGION.

Masukkan perintah berikut di 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 git sudo apt-get install gh

Jika diminta, jawab Yes untuk semua permintaan.

2. Jalankan perintah berikut untuk mengonfigurasi Git dan GitHub:

curl -sS https://webi.sh/gh | sh gh auth login gh api user -q ".login" GITHUB_USERNAME=$(gh api user -q ".login") git config --global user.name "${GITHUB_USERNAME}" git config --global user.email "${USER_EMAIL}" echo ${GITHUB_USERNAME} echo ${USER_EMAIL}

3. Masukkan perintah berikut untuk membuat dan meng-clone repositori kode:

cd ~ gh repo create my_hugo_site --private gh repo clone my_hugo_site

Output akan memberikan konfirmasi terkait pembuatan repositori dan cloning repositori, seperti yang ditunjukkan dalam gambar di bawah. Abaikan dua pesan peringatan terkait penagihan biaya repositori dan bahwa repositori tersebut kosong.

Klik Check my progress untuk memverifikasi tujuan. Membuat Repositori GitHub

Kini Anda siap untuk membuat struktur situs.

4. Masukkan perintah berikut di shell Linux:

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

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

Setelah selesai, Anda akan melihat pesan yang menyatakan bahwa situs telah dibuat.

4. Sekarang, instal tema hello-friend-ng untuk menata situs Anda. Masukkan perintah berikut di 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, Anda akan melihat pesan yang menyatakan bahwa tema telah di-clone.

5. 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 GitHub dapat menambahkan file tema ke kontrol versi.

6. Setelah struktur situs disiapkan, Anda dapat melihat pratinjaunya. Masukkan perintah berikut untuk meluncurkan situs di port TCP 8080:

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

Hugo akan membangun situs dan menyajikannya untuk diakses di port TCP 8080. Server akan berjalan sampai dihentikan dengan menekan CTRL+C.

7. Buka tab browser dan akses alamat IP eksternal di port 8080. Gunakan URL berikut dan ganti [EXTERNAL IP] dengan alamat IP eksternal instance Anda:

http://[EXTERNAL IP]:8080

Situs akan tampak seperti ini.

Klik Check my progress untuk memverifikasi tujuan. Meluncurkan situs di port TCP 8080

8. 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. Sekarang Anda perlu melakukan inisialisasi Firebase. Masukkan perintah berikut ke dalam shell:

cd ~/my_hugo_site firebase init

3. Pilih Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys menggunakan tombol panah dan spasi, lalu tekan ENTER.

• Jika Anda 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 konfigurasi sebagai aplikasi web satu halaman, pilih nilai default N.

Untuk menyiapkan build dan deployment otomatis dengan GitHub, pilih N.

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

4. Anda siap men-deploy aplikasi. Masukkan perintah berikut ke dalam shell instance Linux untuk membangun 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 ditayangkan dari jaringan penayangan konten (CDN) Firebase.

Jika Anda menerima pesan selamat datang yang bersifat umum, tunggu beberapa menit hingga CDN diinisialisasi, lalu muat ulang jendela browser. Catat URL hosting ini untuk digunakan nanti.

Anda telah menjalankan seluruh proses deployment secara lokal. Selanjutnya, Anda akan mengotomatisasi proses secara menyeluruh menggunakan Cloud Build.

Tugas 2. Melakukan otomatisasi deployment

Menjalankan commit awal

Tujuan pembangunan pipeline adalah agar build dapat dipicu ketika ada perubahan di repositori. Anda akan memulainya dengan menjalankan commit awal ke repositori guna memvalidasi kemampuan Anda untuk membuat perubahan di kemudian hari.

1. Konfigurasi parameter global perintah git dengan memasukkan perintah berikut ke dalam shell Linux. Sertakan tanda petiknya:

git config --global user.name "hugo" git config --global user.email "hugo@blogger.com"

2. Masukkan perintah berikut ke dalam shell Linux untuk membuat file .gitignore guna mengecualikan direktori tertentu dari repositori:

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

3. Jalankan commit awal ke repositori:

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

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

Mengonfigurasi build

Cloud Build menggunakan file bernama cloudbuild.yaml di direktori root dalam repositori untuk menjalankan build. Format file ini adalah YAML. Spasi dan indentasi sangat penting, jadi hal ini telah disertakan 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

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/curl' args: - '--quiet' - '-O' # 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/curl' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' - 'hugo.tar.gz' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz mv firebase /tmp chmod 755 /tmp/firebase /tmp/hugo /tmp/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

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

• Ada tiga langkah bernama dalam file ini, yang masing-masing dilakukan oleh image container. Dua langkah pertama menggunakan builder yang didukung Google untuk menggunakan curl guna mendownload alat-alat Hugo dan Firebase. Dua langkah ini berjalan secara paralel. Menggunakan builder curl lebih cepat daripada menginstal curl secara manual.
• Langkah ketiga menggunakan container Ubuntu standar untuk menginstal Hugo dan Firebase, setelah itu situs dibangun dan di-deploy. Dengan menginstal Hugo dan Firebase untuk setiap deployment, Anda dapat mengubah versi Hugo kapan saja Anda inginkan sekaligus menggunakan Firebase versi terbaru.
• Perintah tar dan wget hampir identik dengan perintah yang digunakan sebelumnya dalam skrip installhugo.sh.
• File ini juga menggunakan variabel substitusi kustom (_HUGO_VERSION) dan variabel substitusi yang disediakan Google (PROJECT_ID) agar template ini dapat digunakan di lingkungan yang berbeda.
• Program biner Hugo dan Firebase dibuat dan diinstal pada direktori sementara agar tidak di-deploy secara tidak sengaja ke situs itu sendiri.

Terhubung ke repositori GitHub dan membuat repositori Cloud Build

1. Mulai koneksi ke repositori GitHub Anda di instance Linux.

gcloud builds connections create github cloud-build-connection --project=$PROJECT_ID --region=$REGION gcloud builds connections describe cloud-build-connection --region=$REGION

2. Temukan actionUri:

   etag: yKV297keFBHzs1UcgMsbYJlEYvYdIkfFLJMYZfOADu8 githubConfig: {} installationState: actionUri: https://accounts.google.com/AccountChooser?continue=https%3A%2F%2Fconsole.cloud.google.com%2Fm%2Fgcb%2Fgithub%2Flocations%2Fus-east4%2Foauth_v2%3Fconnection_name%3Dprojects%252F921646058273%252Flocations%252Fus-east4%252Fconnections%252Fcloud-build-connection message: Please log in to https://github.com using a robot account and then follow this link to authorize Cloud Build to access that account. After authorization, your GitHub authorization token will be stored in Cloud Secret Manager. stage: PENDING_USER_OAUTH name: projects/qwiklabs-gcp-00-40e7d6bb49bb/locations/us-east4/connections/cloud-build-connection reconciling: false updateTime: '2024-12-12T08:52:48.505263316Z'

3. Buka actionUri di tab browser baru.

4. Klik Continue.

Instal Aplikasi GitHub Cloud Build di akun Anda atau di akun organisasi yang Anda miliki. Izinkan penginstalan menggunakan akun GitHub Anda.

4. Di bagian Repository access, pilih Only select repositories. Klik Select repositories dan pilih repositori .

5. Klik Save.

6. Membuat repositori Cloud Build:

gcloud builds repositories create {{{project_0.startup_script.build_repository_name | "filled in at lab start"}}} \ --remote-uri="https://github.com/${GITHUB_USERNAME}/{{{project_0.startup_script.github_repository_name | "filled in at lab start"}}}.git" \ --connection="cloud-build-connection" --region=$REGION

Klik Check my progress untuk memverifikasi tujuan. Terhubung ke repositori GitHub dan membuat repositori Cloud Build

Membuat pemicu Cloud Build

Sekarang, Anda akan membuat pemicu yang merespons commit ke cabang utama repositori.

1. Di shell instance Linux, masukkan perintah berikut:

gcloud builds triggers create github --name="commit-to-main-branch1" \ --repository=projects/$PROJECT_ID/locations/$REGION/connections/cloud-build-connection/repositories/hugo-website-build-repository \ --build-config='cloudbuild.yaml' \ --service-account=projects/$PROJECT_ID/serviceAccounts/$PROJECT_NUMBER-compute@developer.gserviceaccount.com \ --region=$REGION \ --branch-pattern='^main$'

Klik Check my progress untuk memverifikasi tujuan. Membuat pemicu Cloud Build

Akun layanan Cloud Build

Akun layanan Cloud Build harus memiliki izin untuk menggunakan Firebase guna men-deploy situs.

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 mengubah situs, kemudian melakukan commit untuk melihat apakah perubahan tersebut diterapkan atau tidak.

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

cd ~/my_hugo_site

2. Edit file config.toml dan ubah judulnya:

Blogging with Hugo and Cloud Build

3. Masukkan perintah di bawah 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 --format='value(ID)' --filter=$(git rev-parse HEAD) --region=$REGION)

6. Ambil URL dari build yang dijalankan:

gcloud builds log "$(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD) --region=$REGION)" --region=$REGION | grep "Hosting URL"

7. Akses URL hosting untuk melihat hasilnya.

Anda juga dapat membuka Firebase console dan memeriksa project untuk menemukan nama domain.

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

Klik Check my progress untuk memverifikasi tujuan. Menguji pipeline

Selamat

Anda telah mempelajari cara pembuatan pipeline dengan Cloud Build untuk men-deploy situs Hugo ke Firebase secara cepat, yang menyediakan CDN dan sertifikat SSL. Dengan Cloud Build, Anda dapat menyesuaikan proses dengan kebutuhan Anda. Dengan waktu deployment yang singkat, Anda dapat berinovasi secara cepat dan menguji revisi situs tanpa banyak upaya. Baca dokumentasi Cloud Build dan Firebase untuk mengetahui 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 13 Juni 2025

Lab Terakhir Diuji pada 13 Juni 2025

Hak cipta 2025 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.