degananda ferdian
lifelong learner — urip iku urup, currently working on accenture.
http://degananda.com

Chapter 10 – Deploy angular @ firebase, roast.io, digital ocean (apache).

By degananda ferdian
1
Degananda.com -

Terdapat berbagai pilihan dalam mendeploy angular. Namun yang perlu diketahui adalah output dari angular hanyalah javascript dan html seperti biasa. Sehingga kita dapat menghosting di apache/nginx/nodejs. Tetapi juga terdapat alternatif lain seperti firebase , roast.io.

Selayang pandang

Deploy adalah kegiatan untuk mengubah status dari suatu aplikasi dari development menjadi production. Artinnya aplikasi tersebut siap untuk dikonsumsi oleh end user terkait. Atau mudahnya kita dapat istilahkan dengan “hosting” karena angular sejatinnya adalah web application. Pada ulasan ini akan dilakukan pembahasan mengenai cara mendeploy aplikasi angular pada tiga hosting yang berbeda yakni :

  1. VPS pada digital ocean (apache) ($5 plan)
  2. Firebase hosting (free plan)
  3. Roast.io (free plan)

Tujuannya adalah untuk memberikan opsi kepada kita agar mudah dalam mendeploy aplikasi angular sesuai dengan kebutuhan. Benchmark mengenai ketiga hosting tersebut akan dibahas pada ulasan lainnya. Ulasan ini hanya berfokus pada cara hosting pada tiga provider diatas. Aplikasi yang akan kita host adalah angular note pada chapter-8. Silahkan download source codenya dilink github dibawah ini

https://github.com/degananda/angular-note

Anda juga dapat menggunakan aplikasi angular anda sendiri. Angular note chapter-8 tersebut sangat sederhana tidak melakukan request dengan server diluar karena memang tidak menggunakan API dan database. Hanya menggunakan singleton (local database).

Build angular

Sebelum melakukan deploy anda harus melakukan “build” pada aplikasi angular anda menjadi level production. Tujuannya sangat banyka terutama untuk optimasi. Aplikasi angular yang anda build sourcenya akan mengalami minify. Selain itu juga akan mengalami AOT(A head of time) yang akan meningkatkan performa dari aplikasi angular. AOT adalah suatu jenis dari compiler. Jika anda menggunakan versi angular 4.0 keatas maka secara otomatis opsi AOT akan dilakukan (default). keuntungan penggunaan AOT adalah :

Baca juga

  1. Fast rendering
  2. Fast async request
  3. Memperkecil ukuran project
  4. Mendeteksi template error.
    Jika project anda terdapat error dibagian templating, project angular anda tidak akan dapat di compile / build. Sehingga pastikan seluruh source code anda telah benar. Namun jangan khawatir saat melakukan build angular akan memberi tahu line mana saja yang mengalami error.
  5. Meningkatkan security
    Seluruh komponen html akan dijadikan javascript object.Sehingga akan “sulit” untuk mengenali syntax-syntax “sensitif” yang anda gunakan

untuk melakukan build anda harus menggunakan angular-cli (tutorial ini menggunakan angular-cli). pertama masuk ke folder angular anda. Lalu ketikan perintah berikut ini

ng build --prod

artinnya kita akan membuat project ke fase production. Setelah proses build selesai akan menghasilkan folder “dist”

file dist diatas akan berisi project angular anda yang telah dicompile menggunakan AOT(A head of time) dengan keuntungan yang telah dijelaskan diatas. Isi dari folder dist adalah

ingigo-pink.css adalah stylesheet dari angular material design dan kami menaruhnya secara manual karena memang stylesheet tersebut tidak tercompile. Jika anda tidak menggunakan project angular-note seperti yang kami gunakan maka stylesheet tersebut tidak akan ada. Jika anda telah sampai pada fase ini maka project siap untuk dideploy pada server!.

Host @ digital ocean

Spesifikasi OS & Software VPS digital ocean (standart).

OS Ubuntu server 14.04
Engine Apache
Database Mysql

Pastikan anda telah melakukan build pada project angular anda. Setelah itu masuklah menggunakan FTP pada VPS dengan menggunakan ftp manager kesukaan anda. Kami menggunakan File Zilla. Lalu pada folder www / public html silahkan tentukan dimana anda akan menghosting project anda. Pada kasus kami lokasi adalah pada folder chapter-8. Sebelum itu, buka file index.html dan seting lokasi base url sesuai dengan folder anda

<meta charset="utf-8">
<title>AngularNote</title>
<base href="chapter-8/">

setelah base url diseting anda dapat mengupload seluruh folder pada dist ke folder pada VPS (sesuai dengan folder yang anda pilih, kasus kami adalah chapter-8).

done , angular telah terdeploy pada VPS. Anda dapat mengkases nya secara live pada link dibawah ini :

http://demo.degananda.com/angular/chapter-8/

Host @ Firebase hosting

Firebase adalah BAAS (Backend as a services) yang menyediakan berbagai keperluan backend. Mulai dari realtime database, auth, dan lain sebagainnya. Selain itu firebase juga menyediakan hosting untuk SPA(Single page application) dan diutamakan untuk angular. Berikut adalah langkah-langkah untuk mendeploy aplikasi angular pada firebase.

PENTING : jangan lupa menseting base url menjadi “/” karena hosting akan dilakukan di firebase which is kita tidak memiliki hak untuk membuat folder sehingga base url pase “/”.

Langkah 1 – Membuat akun firebase & satu project

Login ke firebase (firebase.google.com) setelah itu masukan pada console (go to console) lalu buatlah satu buah project, dalam kasus ini nama project kita adalah angular-note.

Langkah 2 –  Install firebase cli

Jalankan perintah ini pada terminal kita akan menginstall firebase tools secara global. Kami asumsikan anda telah memiliki node / npm karena anda telah berhasil membuild / compile project angular.

npm install firebase-tools -g

Langkah 3 – login ke firebase melalui terminal

jalankan perintah

firebase login

lalu masukan username dan password yang anda gunakan pada firebase. Jika belum memiliki silahkan mendaftarkan akun gmail anda pada firebase.

langkah 4 : firebase init

menginisiasi firebase pada project anda (bukan inisiasi untuk database/auth dan lain sebagainnya) melainkan agar dapat terhubung dengan firebase hosting dengan perintah

firebase init

akan muncul tiga buah pilihan, pilihlah menu “hosting” seperti pada gambar dibawah ini

kemudian pilihlah project firebase yang telah kita buat pada langkah pertama.

 

pada bagian database rules dan function kita akan pilih “y” atau yes. Meski kita tidak menggunakna firebase database dan function. Biarkan secara default

selanjutnya adalah STEP YANG PALING PENTING. pilih “no” untuk pertanyaan mengenai configure as single page application karena kita telah mendeploy project angular secara otomatis index.html telah tergenerate. Jangan sampai teroverwrite begitu pula untuk pertanyaan overwrite “index.html” pilihlah “no”. dan untuk public directory seting pada folder “dist” yaitu lokasi project angular terdeploy. Lihat gambar dibawah ini untuk lebih jelas

Langkah 5 : Firebase deploy

jalankan firebase deploy dan tunggu beberapa saat viola! project angular kita telah dihosting pada firebase hosting.

 

anda dapat mengakses hasil hosting angular note chapter-8 di firebase hosting pada link dibawah ini

https://angular-note-9a26a.firebaseapp.com/

berikut ini adalah sedikit previewnya

Host @ Roast.io

Silahkan simak ulasan dibawah ini yang spesial membahas cara menghosting aplikasi angular (SPA/single page application) pada roast.io 😀

Deploy angular/react/vue @ roast.io

LEAVE A REPLY