Hosting Konten Statis di Google Cloud

Latar Belakang

Pada kesempatan ini saya ingin membahas secara singkat tentang penggunaan google cloud untuk hosting konten statis. Topik ini tidak berhubungan dengan cyber security namun tetap menarik untuk dibahas.

Sesuai dengan istilahnya, Konten statis adalah konten yang disajikan ke setiap pengguna secara seragam tanpa harus terlebih dahulu diproses berdasarkan kondisi serta pengguna yang mengaksesnya. Secara singkat, siapapun yang mengakses konten statis akan melihat dan mendapatkan Informasi yang sama.

Blog dan tulisan ini adalah salah satu contoh konten statis dimana penyajiannya tidak diproses berdasarkan pengunjung yang membacanya. Konten statis merupakan layanan paling sederhana yang dapat disediakan oleh aplikasi web. Karena kesederhanaan ini, Konten statis lebih unggul daripada konten dinamis dari aspek kecepatan.

Banyak metode atau cara dalam membuat konten statis namun program jekyll selalu menjadi pilihan saya. Semua tulisan dalam blog ini merupakan keluaran atau output dari program jekyll. Untuk menyediakan kumpulan artikel yang sederhana, saya tidak membutuhkan database dan access control yang umumnya diterapkan oleh aplikasi CMS sehingga akses atas konten menjadi lebih cepat.

Singkatnya, saya cukup menulis artikel dalam format markdown dan kemudian menginstruksikan jekyll untuk mengubahnya ke format HTML dan menambahkan sedikit java script agar dapat memberikan efek navigasi dan tampilan yang menarik. Keluaran atau output dari jekyll ini kemudian saya pindahkan ke web server agar dapat diakses oleh pengunjung. Proses pemindahaan ini bisa dilakukan dengan cara yang sangat sederhana yaitu menggunakan sFTP

Dalam pembahasan ini, saya akan menempuh cara yang sedikit lebih panjang dalam mempublikasikan keluaran atau output yang dihasilkan oleh jekyll. Berikut gambar alur prosesnya.

Seperti yang kita lihat diatas, saya tidak langsung mengunggah atau meng-upload output html yang dihasilkan oleh jekyll ke google cloud namun hanya mengunggah source konten yang masih dalam format markdown ke github version control system . Berikut beberapa keuntungan yang dapat diperoleh dari proses diatas:

1. Menyimpan source konten di github dapat memudahkan mekanisme kolaborasi. Misalnya, saya bisa memberikan hak akses ke beberapa orang di github agar dapat memperbaharui atau mengkoreksi konten. Dengan ini saya tetap dapat menikmati fitur yang biasanya disediakan oleh CMS namun konten final yang dilihat oleh pembaca bukan berasal dari software CMS.

2. Selain itu saya tidak perlu khawatir apabila source konten yang tersimpan di laptop hilang karena source tersebut berikut dengan berbagai versinya sudah tersimpan di github

3. Proses konversi dari source ke output HTML dilakukan oleh Continues Integration (CI) sehingga proses publikasi konten akan berjalan secara otomatis apabila ada perubahan di repository github yang menyimpan source tersebut. Saya menggunaan circleci versi 2 untuk ini

4. Source yang telah selesai dikonversi oleh CI akan di-deploy ke firebase yang kemudian menjadikan konten tersebut tersebar di seluruh jaringan Content Delivery Network (CDN) milik google sehingga akses menjadi lebih cepat. Dengan CDN, pengguna akan mengakses konten dari sistem yang terdekat dengannya.

5. Software jekyll yang terinstal di laptop saya hanya digunakan untuk melihat output dari konten soure yang saya tulis. Hal ini memudahkan saya untuk melihat hasil akhir konten sebelum kemudian menyimpannya ke github.

6. Firebase secara otomatis menyediakan akses konten dengan pengamanan TLS (Transport Layer Security) atau umumnya dikenal dengan istilah https

Instalasi Jekyll

Tahap awal yang perlu dilakukan adalah menginstal aplikasi jekyll di laptop yang akan kita gunakan untuk menulis. Dengan bantuan aplikasi jekyll, kita dapat melihat hasil akhir konten yang dibuat sebelum proses publikasi. Ikuti proses berikut untuk menginstall jekyll di laptop Macbook

a. Instal Ruby

Ruby adalah bahasa pemrograman yang digunakan oleh jekyll. Informasi tentang bahasa pemrograman ini dapat di lihat di situs resmi ruby. Agar jekyll bisa berjalan maka kita harus terlebih dahulu menginstal Ruby. Terdapat beberapa metode instalasi ruby yang tersedia dan informasi tersebut dapat dilihat di https://www.ruby-lang.org/en/documentation/installation/

Saya memilih metode instalasi menggunakan RVM (Ruby Version Manager) karena saya bisa dengan mudah menggunakan berbagai versi Ruby dalam laptop yang sama. Ikut langkah berikut untuk menginstal ruby melalui RVM

• Download dan install GPG untuk Mac. Installer dapat diperoleh dari https://gpgtools.org/

• Import GPG key milik RVM dengan perintah

  gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
  

• Download dan instal RVM

  \curl -sSL https://get.rvm.io | bash -s stable
  

• Cek versi RVM untuk memastikan kita telah menginstal versi terakhir

  rvm -v
  

Setelah RVM terinstal dengan baik maka langkah selanjutnya adalah menginstal ruby menggunakan RVM. Namun sebelum itu kita perlu lihat versi ruby yang tersedia menggunakan perintah:

rvm list known

kemudian kita bisa lanjut dengan menginstal versi ruby yang terakhir yaitu ruby-2.4.1 saat tulisan ini dibuat dengan perintah:

rvm install ruby-2.4.1

Proses ini juga akan menginstal homebrew secara otomatis.

Setelah instalasi ruby selesai, kita perlu memperbaharui ruby gem. Gem adalah package manager yang digunakan ruby untuk mendistribusikan library dalam format standar dan self-contained. Jekyll akan diinstall melalui gem. Untuk mengupdate gem, gunakan perintah berikut

gem update —system

b. Instal bundler dan jekyll

Langkah selanjutnya adalah menginstal bundler dan jekyll. Sebuah project di ruby kemungkinan besar menggunakan beberapa gem. Bundler adalah utiliti yang berfungsi untuk mengelola dependency atas gem yang kita perlukan. Dengan bundler, kita terhindar dari permasalahan versi gem yang tidak sesuai atau gem yang kurang lengkap saat membangun project di ruby. Untuk itu, kita akan menginstall jekyll berikut dengan bundler utility dengan perintah berikut

gem install jekyll bundler

Setelah itu pastikan jekyll versi terbaru telah terinstal dengan baik melalui perintah:

jekyll --version

c. Inisialisasi jekyll site

Langkah selanjutnya adalah membuat site baru di jekyll. Site baru ini akan menyimpan konten statis yang akan kita ungguah ke github. Tentu proses upload ini akan kita lakukan apabila konten statis telah kita konfiguasi dan kita isi dengan Informasi yang diinginkan.

Berikut adalah perintah Untuk menginisalisasi site

jekyll new anakin-basuki-blog

Setelah inisialisasi selesai, kita akan melihat direktory baru bernama anakin-basuki-blog dengan isi sebagai berikut

1
2
3
4
5
6
7

-rw-r--r--  1 adinanta  staff   398 Feb 27 17:07 404.html
-rw-r--r--  1 adinanta  staff  1039 Feb 27 17:07 Gemfile
-rw-r--r--  1 adinanta  staff  1692 Feb 27 17:07 Gemfile.lock
-rw-r--r--  1 adinanta  staff  1652 Feb 27 17:07 _config.yml
drwxr-xr-x  3 adinanta  staff   102 Feb 27 17:07 _posts
-rw-r--r--  1 adinanta  staff   539 Feb 27 17:07 about.md
-rw-r--r--  1 adinanta  staff   213 Feb 27 17:07 index.md

Penjelasan sturktur direktori diatas dapat dilihat di https://jekyllrb.com/docs/structure/.

Sebelum menulis konten, pastikan konfigurasi di file _config.yml telah disesuaikan dengan kebutuhan kita. Tidak terlalu sulit untuk mengubah konfigurasi dalam file ini karena setiap parameter penting telah dilengkapi dengan penjelasan.

Semua konten harus disimpan dalam direktori _posts dan ditulis dalam format markdown. Perlu diketahui juga bahwa setiap file konten harus diawali dengan YAML Front Matter.

Perlu mengalokasikan sedikit waktu untuk mempelajari bahasa berikut ini agar dapat membuat konten statis yang menarik menggunakan jekyll.

• Markdown
• YAML Front Matter
• Liquid Templating

Apabila semua telah diset dan terdapat minimum satu konten di _post, instruksikan jekyll untuk mulai mengkonversi dan membangun site konten statis. Namun sebelum itu kita perlu menjalankan perintah berikut untuk memastikan semua gem telah terinstal

bundle install

dan kemudian dilanjutkan dengan perintah berikut.

bundle exec jekyll serve

Gunakan browser dan kunjungi url http://localhost:4000 untuk melihat bentuk dan hasil akhir konten statis yang akan dipublikasikan.

Buat GitHub Repository

Setelah jekyll site terbentuk dan konten telah terisi sesuai dengan keinginan, maka langkah selanjutnya adalah meng-uploadnya ke github repository. Namun sebelum melangkah, kita harus terlebih dahulu membuat github repository untuk menampung source konten statis yang telah dibuat. Panduan untuk membuat github repository dapat dilihat di https://guides.github.com/activities/hello-world/#repository

Seperti yang sudah dijelaskan sebelumnya, github repository ini hanya perlu menyimpan dan men-tracking file source konten yang kita buat dan bukan output yang dihasilkan oleh jekyll di lokal komputer kita.

Output file yang di-generate atau dibuat oleh jekyll ini tersimpan di direktory _site dan bisa langsung diupload ke web server untuk dipublikasikan. Namun hal tersebut tidak dilakukan karena kita memilih untuk memanfaatkan Continues Integration (CI) untuk men-generate atau build konten statis dari soure yang kemudian melakukan deployment otomatis ke google cloud.

Oleh karena itu, kita perlu membuat file .gitignore agar seluruh file yang ada di dalam direktory _site dikecualikan dalam proses sinkronisasi sehingga tidak ter-upload ke github repository. File .gitignore ini harus dibuat dalam direktori utama yang menyimpan jekyll site yaitu dibawah direktori anakin-basuki-blog dalam kasus ini.

Berikut isi file .gitignore

_site/
.sass-cache/
.jekyll-metadata

# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

Setelah itu lakukan proses:

1. git add .
2. git commit -m ‘commit pertama’
3. git push origin master

Untuk penjelasan lengkap terkait perintah git, kunjungi https://guides.github.com/activities/hello-world/#commit

Google Cloud & Firebase

Kita baru saja selesai membuat konten statis di laptop menggunakan jekyll dan telah mengunggah sourcenya ke github. Tentu kita ingin konten statis ini dipublikasi sehingga dapat diakses oleh pembaca. Dalam hal ini kita akan memanfaatkan Firebase untuk meng-hosting konten statis dan google cloud untuk menyediakan storage bucket nya

Lakukan langkah singkat berikut untuk memulai:

1. Mendaftar ke layakan google cloud di https://cloud.google.com/
2. Kemudian ikuti tuntunan yang diberikan google cloud untuk membuat project baru
3. Setelah itu buka Firebase console di https://console.firebase.google.com
4. Tambahkan project baru dan pada masukan atau input box Project Name, pilih nama project yang telah kita buat di google cloud sebelumnya
5. Navigasi ke menu Hosting di firebase console dan ikuti tuntunan yang diberikan
6. Dan layanan hosting pun telah aktif.

Sebelum kita bisa menggunakan layanan hosting ini, kita perlu mempersiapkan beberapa hal berikut

a. Instal Command Line Interface (CLI) Firebase

CLI firebase menggunakan nodejs sehingga kita harus terlebih dahulu menginstalnya di laptop. Proses instalasi nodejs sangat mudah yaitu cukup download instaler nya di https://nodejs.org/en/ dan ikuti tuntunan yang diberikan.

Setelah nodejs terinstal, kita akan menggunakan npn untuk menginstal CLI firebase. npm adalah package manager dan module repository untuk javascript. Berikut perintah untuk menginstal CLI firebase

sudo npm -g config set user root

setelah itu mulai proses instalasi

sudo npm install -g firebase-tools

b. Login ke Firebase menggunakan Command Line Interface (CLI)

Langkah berikutnya adalah login ke firebase agar proses penyetingan dapat dilanjutkan. Sebelum login, pastikan kita sudah berada di direktori jekyll site yang kita buat yaitu di direktori anakin-basuki-blog. Kemudian gunakan perintah berikut untuk login ke firebase

firebase login

c. Inisialisasi Firebase

Langkah berikutnya adalah menginisialisasi firebase untuk membuat konfigurasi yang dibutuhkan. Konfigurasi ini kemudian disimpan dalam dua file berikut:

• .firebaserc
• firebase.json

Untuk memulai proses inisiasi, ikuti perintah berikut:

firebase init

Dalam proses initialisasi, pastikan kita mengisi _site dibagian pertanyaan lokasi public directory seperti dalam kotak warna kuning di bawah ini. Direktori _site adalah direktori yang menyimpan output atau hasil konten statis yang telah dibangun atau di-build oleh jekyll.

setelah proses inisialisasi selesai, buka file firebase.json dan kemudian tambahkan beberapa Informasi dibawah ini

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "hosting": {
    "public": "_site",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
      }],
      "cleanUrls": true,
      "trailingSlash": false
  }
}

File konfigurasi ini akan digunakan oleh firebase untuk men-deploy konten statis ke firebase cloud.

d. Deploy ke Firebase

Seperti yang telah dibahas sebelumnya, kita akan menggunakan Continues Integration (CI) untuk membangun / build dan deploy konten statis dari github ke firebase. CI perlu mengetahui langkah dan metode yang digunakan agar proses build dan deploy ini bisa berjalan dengan sempurna. Langkah dan metode ini dituangkan dalam satu file konfigurasi khusus yang akan kita bahas pada bagian CI. Salah satu langkah yang akan kita definisikan adalah cara men-deploy ke firebase.

Proses deployment ini menggunakan perintah firebase deploy dimana seluruh file dan direktori yang berada di bawah _site akan diupload ke cloud firebase. Untuk meminimalisir kesalahan pada CI, kita perlu melakukan uji coba dengan cara men-deploy konten statis yang telah dibangun oleh jekyll di laptop. Apabila deployment ini berhasil maka proses tersebut bisa kita masukan dalam konfigurasi CI.

Ikuti perintah berikut untuk men-deploy konten statis kita dari laptop ke firebase cloud

firebase deploy

Apabila deployment dari laptop ke firebase cloud berhasil, maka Continues Integration (CI) tidak akan mengalami kendala saat melakukan hal yang sama.

CircleCI Continues Integration (CI)

Continues Integration merupakan proses dan teknik dalam menggabungkan kode program dari beberapa progmmer dan kemudian menjalankan build secara otomatis. Khusus dalam kasus ini, setiap perubahan yang terjadi pada konten statis akan secara otomatis dibangung atau di-build oleh CI dan kemudian men-deploynya ke firebase.

Singkat kata: apabila saya melakukan penambahan atau perubahan pada artikel dan kemudian melakukan commit ke github maka CI akan ke-trigger dan langsung menjalankan jekyll untuk membangun kembali konten statis saya. Setelah itu CI akan deploy hasil build tersebut ke firebase untuk dipublikasikan. Penambahan artikel cukup saya lakukan dengn menambah file ke direktori _post dan kemudian mengakhirinya dengan satu kali commit dan push ke github.

Sebelum kita bisa menggunakan CI, kita perlu mempersiapkan beberapa hal berikut

a. Mendaftar ke CircleCI

Mendaftar ke CircleCI cukup mudah dan bisa menggunakan akun github yang menyimpan source konten statis kita. Kunjungi https://circleci.com/ untuk melanjutkan. Penjelasan lebih rinci terkait circleci bisa dilihat di https://circleci.com/docs/2.0/

b. Membuat konfigurasi circleci versi 2

Setelah mendaftar, langkah selanjutnya adalah membuat project baru. Circleci akan secara otomatis menampilkan semua github repository yang kita miliki. Disamping repository yang menyimpan source konten statis, pilih setup project dan circleci akan menampilkan contoh konfigurasi yang dapat kita gunakan. Lanjutkan dengan menekan start building dan proses build pun akan mulai dan kemudian gagal. Hal ini normal karena kita belum mendefinisikan secara akurat langkah dan metode yang harus dijalankan CI untuk build dan deploy konten statis kita.

Untuk membuat konfigurasi yang tepat, buat direktori baru dengan nama .circleci dibawah direktori utama jekyll site kita yaitu dibawah anakin-basuki-blog.

drwxr-xr-x   3 adinanta  staff   102B Feb 25 20:46 .circleci
-rw-r--r--   1 adinanta  staff    55B Feb 25 18:10 .firebaserc
drwxr-xr-x  13 adinanta  staff   442B Feb 26 05:53 .git
-rw-r--r--   1 adinanta  staff   156B Feb 25 15:29 .gitignore
drwxr-xr-x  16 adinanta  staff   544B Feb 24 23:08 .sass-cache
-rw-r--r--   1 adinanta  staff   398B Feb 24 22:30 404.html
-rw-r--r--   1 adinanta  staff   1.2K Feb 24 22:46 Gemfile
-rw-r--r--   1 adinanta  staff   2.6K Feb 24 23:06 Gemfile.lock
-rw-r--r--   1 adinanta  staff    11B Feb 25 15:28 README.md
-rw-r--r--   1 adinanta  staff   2.3K Feb 25 21:51 _config.yml
drwxr-xr-x   3 adinanta  staff   102B Feb 25 09:53 _data
drwxr-xr-x   3 adinanta  staff   102B Feb 25 09:30 _includes
drwxr-xr-x  16 adinanta  staff   544B Feb 26 17:32 _posts
drwxr-xr-x  20 adinanta  staff   680B Feb 28 15:34 _site

setelah itu buat file baru dengan nama config.yml dan masukan konfigurasi berikut

# Ruby CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-ruby/ for more details
#
version: 2
jobs:
  build:
    docker:
      # specify the version you desire here
       - image: circleci/ruby:2.4.1-node-browsers

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/postgres:9.4
    steps:
      - checkout
      - run:
          name: "set root access"
          command: sudo npm -g config set user root
      - run:
          name: "install firebase"
          command: sudo npm install -g firebase-tools
      - run:
          name: "installing dependencies"
          command: bundle install
      - run:
          name: "generate site"
          command: JEKYLL_ENV=production bundle exec jekyll build --verbose
      - run:
            name: "deploy"
            command: firebase deploy --token=$FIREBASE_TOKEN --non-interactive

Dari konfigurasi diatas, kita bisa melihat langkah dan rangkaian kegiatan yang harus dijalankan oleh CI untuk build dan deploy konten statis. Konfigurasi ini menggunakan docker image circleci/ruby:2.4.1-node-browsers yang telah disediakan oleh circleci sebagai base system. Firebase-tools yang digunakan untuk keperluan deployment diinstal oleh salah satu rangkaian kegiatan.

Pada perintah akhir, kita menginstruksikan CI untuk menjalankan firebase deploy diikuti dengan opsi –token. Opsi ini penting sekali karena digunakan oleh firebase untuk mengautentikasi CI sebelum menerima konten statis yang telah di-build oleh CI.

c. Membuat firebase token

Proses terakhir adalah membuat firebase token yang akan digunakan oleh CI dalam proses otentikasi. Untuk itu, kita perlu menjalankan perintah berikut dari direktori anakin-basuki-blog

firebase login:ci

Setelah token berhasil dibuat, tambahkan environment variable FREBASE_TOKEN di circleci build setting. Dari circleci console, navigasi ke project setting dan kemudian pilih environment variables dibawah menu build setting.

Dan semua komponen telah terkonfigurasi dengan baik.

Selanjutnya

Untuk memastikan semua berjalan secara otomatis, tambahkan artikel baru di bawah direktori _post dengan format nama tahun-bulan-tanggal-nama-artikerl.md dan kemudian tulis beberapa kalimat dalam format Markdown. Setelah itu save file tersebut dan jalankan perintah

• git add .
• git commit -m 'artiker kedua'
• git push origin master.

Circleci akan secara otomatis melakukan proses build dan deploy. Progress kegiatan ini bisa dilihat di console circleci dalam menu build seperti berikut ini

Tunggu beberapa menit dan penambahan artikel tersebut akan tersedia di halaman blog kita.

Selamat mencoba