Deploy situs statik dari Firebase dengan Travis-CI


Oke, berhubung sedang musim pesan domain gratisan dari TLD .ga, saya pun ikut-ikutan buat domain yang disediakan secara gratis oleh freenom.com. Nama domainnya: gonradi.ga. Nama Gonradiga merupakan brand untuk produk fesyen buatan saudara sepupu saya. Jadi bagi yang mau beli jaket atau pakaian outdoor, boleh loh hubungi pemilik blog ini #eh #malahpromosi.

Untuk buat domainnya cukup gampang. Silakan kunjungi saja situs Freenom, masukkan domain yang dikehendaki, cek apakah tersedia atau tidak, lalu checkout! Masalahnya, mau dikaitkan ke mana domain ini? Berhubung freenom tidak menyediakan hostingannya.

Untunglah ada artikel blog dari pak haji Ngalim yang memanfaatkan firebase untuk membuat situs statis. Ya mirip-mirip github pages mungkin ya. Nah, untuk membikin situs statis di firebase, silakan ikuti tutorial dari pak haji Ngalim.

Tapi… ada (sedikit) perbedaan antara tutorial pak haji Ngalim dengan yang saya lakukan. Berhubung koneksi kantor akhir-akhir ini sedang tidak sehat, maka mengunggah keseluruhan berkas proyek ke github agak menyusahkan.

Makanya saya buat berkas .gitignore dan mem-black-list sejumlah berkas agar tidak diunggah ke github. Salah satunya direktori functions/node_modules yang isinya cukup besar, mencapai 22 MB. Isi lengkap .gitignore sebagai berikut (dicontek dari sini).

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
view raw .gitignore hosted with ❤ by GitHub

Masalahnya adalah, ketika kita melakukan git push, travis-ci tidak akan melakukan deploy karena eh karena ada kesalahan ketika melakukan proses deploy, meski proses build berhasil. Kesalahannya seperti berikut:

deploy error
deploy error

Error ini muncul karena direktori node_modules tidak kita ikut sertakan. Agar si direktori itu ada di travis, maka kita harus menambah dua baris di berkas .travis.yml, yakni cd functions dan npm install. Hasil akhirnya seperti berikut.

language: node_js
node_js:
"7.8.0"
script:
echo "Deploying Process"
install:
npm install -g firebase-tools
cd functions
npm install
after_success:
firebase deploy –token "$FIREBASE_TOKEN"
view raw .travis.yml hosted with ❤ by GitHub

Kalau kita lakukan push, seharusnya kali ini berhasil. Nantinya di baris paling bawah muncul seperti ini.

deploy sukses
deploy sukses

Lalu bagaimana dengan masalah konektivitas antara aplikasi firebase kita dengan domain .ga? Oh mudah saja. Mengikuti dokumentasi dari sini, untuk membuat custom domain dari aplikasi firebase, kita tinggal klik tombol Connect Domain. Di sana, masukkan domain .ga kita.

Setelah itu, masukkan kode verifikasi google di domain kita di freenom. Di menu Manage Freenom DNS, masukkan nama domain di kolom Name, pilih TXT untuk type dan masukkan kode verifikasi di target. Lalu save! Setelah itu, buka lagi halaman firebase console dan lakukan verifikasi.

Di langkah kedua, Google akan memberikan alamat IP yang nantinya harus dimasukkan lagi di menu Manage Freenom DNS. Silakan add record lagi, kali ini dengan tipe A, dan isi sesuai IP yang diberikan. Kalau sudah, seharusnya domain gratisan kita sudah terhubung dengan aplikasi firebase kita.

Untuk mencobanya, silakan lakukan perubahan di proyek gitnya, lalu add, commmit, dan push. Seharusnya sekarang setelah push, Travis akan otomatis melakukan deploy proyek kita, dan domain gratisan kita sudah bisa diakses. Selamat!


2 responses to “Deploy situs statik dari Firebase dengan Travis-CI”

Leave a Reply to hahn Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: