GSP747

Ringkasan

Dalam lab ini, Anda akan membuat pipeline untuk men-deploy situs berbasis Hugo, yaitu sebuah pembuat situs statis. Anda akan menyimpan konten situs di Cloud Source Repositories dan men-deploy situs dengan Firebase, kemudian menggunakan Cloud Build untuk membuat pipeline guna secara otomatis men-deploy konten baru yang berkomitmen pada repositori.

Tujuan

Dalam lab ini, Anda akan mempelajari hal berikut:

• Ringkasan situs statis
• Menyiapkan situs dengan Hugo
• Menyimpan konten situs di Cloud Source Repositories
• Men-deploy situs dengan Firebase
• Membuat pipeline build dengan Cloud Build untuk mengotomatiskan deployment

Prasyarat

Petunjuk yang disediakan di artikel ini memadai sebagai panduan untuk lab ini. Anda juga mungkin akan terbantu jika memiliki pengalaman langsung dengan layanan yang akan Anda gunakan. Berikut beberapa lab lain yang mungkin berguna untuk Anda:

• Cloud Source Repositories: Qwik Start
• Membangun Aplikasi Serverless dengan Cloud Run yang Membuat File PDF
• Web Firebase

Manfaat dari situs statis

Pembuat situs statis seperti Hugo menjadi populer karena kemampuannya memproduksi situs yang tidak memerlukan server web. Platform web statis meniadakan tugas pemeliharaan sistem operasi server atau software. Namun, ada berbagai pertimbangan operasional. Sebagai contoh, Anda mungkin perlu menerapkan kontrol versi pada postingan Anda, menghosting situs Anda 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 memungkinkan developer untuk berinovasi secara cepat dengan mengotomatisasi proses deployment keseluruhan. Di lab ini, Anda akan belajar cara membuat pipeline yang mendemonstrasikan otomatisasi seperti ini.

Penyiapan dan persyaratan

Sebelum mengklik tombol Mulai 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 praktik ini dapat Anda gunakan untuk melakukan sendiri 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 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: Jika Anda sudah memiliki project atau akun pribadi Google Cloud, jangan menggunakannya untuk lab ini agar terhindar dari tagihan ekstra pada akun Anda.

Cara memulai lab dan login ke Google Cloud Console

1. Klik tombol Start Lab. Jika Anda perlu membayar lab, jendela pop-up akan terbuka untuk memilih metode pembayaran. Di sebelah kiri adalah panel Lab Details dengan info 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 melihat menu dengan daftar produk dan layanan Google Cloud, klik Navigation menu di kiri atas.

Ringkasan proses

Berikut adalah diagram tentang apa yang akan Anda bangun:

Sasaran yang ingin dicapai adalah mampu melakukan commit kode dan menugaskannya untuk memicu pipeline, yang kemudian akan men-deploy situs. Perjalanan Anda akan dibagi jadi dua bagian. Pertama, Anda akan membangun situs secara lokal dan men-deploy situs tersebut secara manual ke Firebase, guna mendapatkan pemahaman mengenai keseluruhan prosesnya. Kedua, Anda akan melakukan otomatisasi proses dengan membangun pipeline menggunakan Cloud Build.

Tugas 1. Deployment manual

Pertama, bangun situs secara manual pada instance Linux agar bisa mempelajari prosesnya yang menyeluruh. Anda juga akan menggunakan instance Linux untuk melaksanakan beberapa tugas satu kali yang diperlukan untuk membuat Firebase aktif dan berjalan.

Terhubung ke instance Linux

1. Dari Navigation menu, pilih Compute Engine > VM Instances. Anda akan melihat ada satu instance yang telah dibangun untuk Anda.
2. Pada ujung baris, Anda dapat melihat alamat IP Eksternal dan tombol SSH seperti yang tampak pada gambar di bawah ini. Jika terhalang oleh panel informasi, tutup panel tersebut agar Anda dapat melihat seluruh baris.

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

Menginstal Hugo secara lokal

Sekarang, instal Hugo secara lokal pada instance Linux, sehingga Anda dapat menguji situs secara lokal sebelum men-deploy situs tersebut menggunakan Firebase. Sebuah skrip shell telah disediakan untuk mempermudah tugas ini.

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

cat /tmp/installhugo.sh

Anda juga dapat melihat konten berikut ini:

Output:

#!/bin/bash # 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. _HUGO_VERSION=0.96.0 echo Downloading Hugo version $_HUGO_VERSION... wget \ --quiet \ -O hugo.tar.gz \ https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz echo Extracting Hugo files into /tmp... mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz echo The Hugo binary is now at /tmp/hugo.

2. Perhatikan penggunaan perintah wget untuk mendownload Hugo dan perintah tar untuk membuka arsip Hugo. Anda akan melihat perintah yang sama nanti di lab ini ketika Anda membuat pipeline.

3. Masukkan perintah di bawah ini untuk menjalankan skrip dan menginstal Hugo:

cd ~ /tmp/installhugo.sh

Anda akan menerima pesan yang mengatakan bahwa Hugo telah diinstal ke direktori /tmp seperti yang ditunjukkan berikut ini. Anda siap membangun infrastruktur situs.

Membuat repositori dan situs awal

Sekarang, buat sebuah Cloud Source Repository untuk menampung situs kemudian clone repositori tersebut ke instance Linux. Membuat clone repositori berarti membuat duplikasinya di dalam shell. Hal ini memungkinkan Anda menerapkan situs selagi di dalam shell, kemudian melakukan commit perubahan yang Anda buat ke dalam sistem file. Berikutnya dalam lab ini, Anda akan menyiapkan pipeline yang merespons commit tersebut ke repositori.

1. Instal git pada VM Linux

Masukkan perintah berikut pada shell instance Linux:

sudo apt-get update sudo apt-get install git

Jika diminta, jawab Yes untuk semua permintaan.

2. Buat dan clone repositori kode. Masukkan perintah berikut pada shell instance Linux:

cd ~ gcloud source repos create my_hugo_site gcloud source repos clone my_hugo_site

Anda akan menerima konfirmasi tentang pembuatan repositori dan cloning repositori, seperti yang ditunjukkan dalam gambar berikut. Anda dapat mengabaikan dua pesan peringatan tentang penagihan biaya repositori dan bahwa repositori tersebut kosong.

Klik Check my progress untuk memverifikasi tujuan. Repositori sumber telah dibuat

3. Kini Anda siap untuk membuat struktur situs. Masukkan perintah berikut pada shell Linux.

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

Biasanya, perintah hugo akan menghasilkan direktori. Opsi --force akan membuat situs di direktori repositori, yang sudah ada sebelumnya. Dengan begitu, Anda dapat menyimpan informasi terkait Git dalam direktori yang baru saja Anda clone. Anda akan melihat pesan yang menyatakan bahwa situs telah dibuat, seperti yang ditunjukkan dalam gambar berikut.

4. Sekarang, instal tema Ananke untuk memberikan tata letak bagi situs Anda. Masukkan perintah berikut pada shell instance Linux:

cd ~/my_hugo_site git clone \ https://github.com/budparr/gohugo-theme-ananke.git \ themes/ananke echo 'theme = "ananke"' >> config.toml

Anda akan melihat pesan yang menyatakan bahwa tema telah di-clone, seperti yang ditunjukkan berikut ini.

5. Hapus file git dari direktori tema:

sudo rm -r themes/ananke/.git sudo rm themes/ananke/.gitignore Catatan: File git harus dihapus agar Cloud Source Repository dapat menambahkan file tema ke kontrol versi.

6. Setelah struktur situs selesai disiapkan, Anda dapat melihat pratinjaunya. Masukkan perintah berikut ini 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 untuk diakses pada port TCP 8080, seperti yang ditunjukkan dalam gambar berikut. Server akan berjalan sampai dihentikan dengan menekan CTRL+C.

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

http://[EXTERNAL IP]:8080

Situs akan tampak seperti ini.

Klik Check my progress untuk memverifikasi tujuan. Situs dapat diakses di Port 8080

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

Menambahkan Firebase ke project Anda

Setelah Anda tahu seperti apa tampilan situsnya, kini saatnya men-deploy situs ke Firebase. Pertama, aktifkan Firebase dalam project yang ada.

1. Buka tab baru di browser yang Anda gunakan untuk mengakses Konsol Google Cloud, kemudian buka Firebase di tab tersebut untuk mengakses Firebase console.

2. Sekarang klik Add project.

Anda akan diminta memilih nama untuk project Anda.

3. Klik di dalam kolom nama lalu pilih project Google Cloud yang ada yang diawali dengan "qwiklabs-gcp-..." seperti yang ditunjukkan dalam gambar berikut:

4. Centang I accept the Firebase terms dan I confirm that I will use Firebase exclusively for purposes relating to my trade, business, craft, or profession. Klik Continue.
5. Anda mungkin akan diminta untuk mengonfirmasi paket penagihan Firebase. Biaya Firebase termasuk dalam biaya lab. Jika diminta, klik Confirm plan.
6. Ketika menambahkan Firebase ke project, Anda akan diminta untuk mengonfirmasi beberapa kriteria. Klik Continue.
7. Anda akan diminta mengonfirmasi penggunaan Google Analytics untuk project Firebase ini. Karena ini adalah lingkungan lab, gunakan tombol untuk menonaktifkan Google Analytics dan klik Add Firebase. Perlu waktu sekitar satu menit untuk menambahkan Firebase ke project.
8. Setelah Firebase berhasil ditambahkan, akan muncul dialog, klik Continue.

Men-deploy situs ke Firebase

1. Instal Firebase CLI dalam shell instance Linux:

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

2. Sekarang Anda perlu melakukan inisialisasi Firebase. Masukkan perintah berikut ini 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 ID Project yang disediakan pada halaman petunjuk lab. Untuk direktori publik, pilih nilai default public. Untuk konfigurasi sebagai aplikasi web satu halaman, pilih nilai default N. Untuk menyiapkan build otomatis dan men-deploy dengan GitHub, pilih N.

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

4. Anda siap men-deploy aplikasi. Masukkan perintah berikut ini 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 dan Anda akan melihat situs yang sama disajikan dari jaringan penayangan konten (CDN) Firebase. Jika Anda menerima pesan "selamat datang" saja, tunggu beberapa menit untuk inisialisasi CDN dan muat ulang jendela browser. Simpan URL hosting ini untuk digunakan nanti.

Anda telah menjalankan seluruh proses deployment secara lokal. Selanjutnya, lakukan otomatisasi proses secara menyeluruh menggunakan Cloud Build.

Tugas 2. Melakukan otomatisasi deployment

Menjalankan commit awal

Tujuan membangun pipeline adalah untuk dapat memicu build ketika perubahan diterapkan pada repositori. Anda akan mulai dengan menjalankan commit awal ke repositori sehingga Anda dapat memvalidasi kemampuan Anda membuat perubahan di masa yang akan datang.

1. Konfigurasikan parameter global perintah git dengan memasukkan perintah berikut ini ke dalam shell Linux. Pastikan Anda menyertakan tanda petik:

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 untuk mengecualikan direktori tertentu dari repositori:

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

3. Jalankan commit awal ke repositori dengan memasukkan perintah berikut ini:

git add . git commit -m "Add app to Cloud Source Repositories" git push -u origin master

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

Mengonfigurasi build

Cloud Build menggunakan file dengan nama cloudbuild.yaml di direktori root dari repositori untuk menjalankan tugas build. File ini berada dalam format YAML. Spasi dan indentasi sangatlah penting, jadi file ini telah ditempatkan pada instance Linux untuk Anda.

1. Masukkan perintah berikut pada shell Linux. Perhatikan tanda titik (".") di ujung perintah cp:

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

2. Jalankan perintah berikut ini untuk melihat tampilan file cloudbuild.yaml. Beberapa baris digabungkan karena terlalu panjang.

cat cloudbuild.yaml

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/wget' 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/wget' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/wget' 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:18.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

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 wget guna mendownload alat-alat Hugo dan Firebase. Dua langkah ini berjalan secara paralel. Menggunakan builder wget lebih cepat daripada menginstal wget 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.
• Biner Hugo dan Firebase dibuat dan diinstal pada direktori sementara untuk mencegahnya secara tidak sengaja di-deploy ke situs itu sendiri.

Membuat pemicu Cloud Build

Sekarang, buat pemicu yang akan merespons commit ke cabang master dari repositori.

1. Dari command line, masukkan perintah berikut:

gcloud alpha builds triggers import --source=/tmp/trigger.yaml

2. Konfigurasi pemicu berisi detail berikut:

Kolom	Nilai
Name	commit-to-master-branch
Description	Push to master
Event	Push to a branch
Repository	my_hugo_site
Branch (regex)	^master$ (pastikan Invert Regex tidak dicentang)
Build Configuration	Cloud Build configuration file (yaml atau json)
Cloud Build Configuration file location	/ cloudbuild.yaml

Akun layanan Cloud Build

Akun Layanan Cloud Build memerlukan 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 membuat perubahan terhadap situs kemudian commit perubahan tersebut untuk melihat apakah perubahan telah 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:

Membuat Blog dengan Hugo dan Cloud Build

3. Masukkan perintah berikut dalam shell Linux 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 master

4. Periksa histori build untuk melihat status build:

gcloud builds list

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

gcloud builds log $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD))

6. Ambil URL dari build yang dijalankan:

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

7. Akses URL hosting untuk melihat hasilnya. Anda juga dapat membuka Firebase console dan memeriksa project untuk menemukan nama domain.

Catatan: Perlu waktu beberapa menit agar CDN terupdate dan menampilkan informasi situs yang diperbarui. Catatan: Situs ini memiliki sertifikat SSL dan diakses menggunakan protokol https (Hypertext Transfer Protocol Secure).

Klik Check my progress untuk memverifikasi tujuan. Cloud Build berhasil diinisialisasi

Selamat!

Anda telah mempelajari cara Cloud Build melakukan orkestrasi pipeline untuk men-deploy secara cepat situs Hugo ke Firebase, yang menyediakan CDN dan sertifikat SSL. Dengan Cloud Build, Anda dapat menyesuaikan proses sesuai dengan kebutuhan Anda. Waktu deployment yang singkat berarti Anda dapat berinovasi secara cepat dan menguji revisi situs Anda tanpa banyak upaya. Baca dokumentasi Cloud Build dan Firebase untuk 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 30 Januari 2024

Lab Terakhir Diuji pada 11 Desember 2023

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