Deploy Website dari Github ke Microsoft Azure

Selain menggunakan FTP, kita juga bisa men-deploy website ke azure menggunakan github. Penggunaan github untuk continuous deployment biasanya dilakukan apabila kita memiliki sebuah project yang disimpan di github, baik project yang dikerjakan sendiri maupun yang dikerjakan tim. Penggunaan github dapat mempermudah proses deployment ke azure, karena setiap ada perubahan file pada github, maka secara otomatis perubahan tersebut juga akan dikirim ke azure. Berikut ini contoh deployment sebuah web yang saya host di github ke web app azure. Sebelum membaca panduan ini kalian diharapkan sudah mengerti dasar dasar git dan perintahnya.

1. Siapkan repository yang akan di deploy
Contoh repository yang akan di deploy ke azure

2. Masuk ke dashboard web app di azure kemudian masuk ke bagian settings dan pilih "Continuous deployment"
pilih "Continuous deployment" pada halaman settings

3. Pada Choose Source, pilih Github
Pada Choose Source, pilih Github

4. Kemudian klik pada tab authorization, klik tombol "Authorize" di sebelah kanan
klik tombol "Authorize" di sebelah kanan 
Kemudian akan muncul halaman login ke github, isikan akun github yang meng-host repository tadi
Jika sudah, maka konfirmasi dengan mengklik tombol "OK"

5. Kemudian cari project/repository yang ingin di deploy pada bagian Choose project
pilih repository yang ingin di deploy ke azure

6. Kemudian jika project memiliki beberapa branch, pilih branch yang ingin di sync dengan azure (branch utama)
Pilih branch yang ingin di deploy ke azure

7. Kemudian periksa apakah pengaturan sudah benar
klik OK untuk mengkonfirmasi

8. Kemudian jika proses setting telah selesai akan muncul notifikasi seperti berikut
proses setting telah selesai

9. Untuk melihat status sync masuk ke menu "Continuous deployment" pada halaman settings
Azure sedang melakukan sinkronisasi project dari github
Jika proses sinkronisasi telah selesai, maka akan terlihat seperti di atas

10. Buka alamat web app untuk melihat hasil sinkronisasi
Berikut tampilan website yang berasal dari repository github
Sekarang kita coba untuk mengubah tampilan web tersebut dan menyimpan perubahan yang kita buat ke github (push). Sebelumnya kita clone dahulu repository tersebut ke komputer.

11. Buka file yang ingin diubah dengan editor kesayangan masing masing
Edit file kemudian simpan

12. Kemudian simpan perubahan yang kita buat
Commit perubahan yang kita buat ke GIT

13.  Push perubahan ke github
proses push perubahan ke Github

14. Kemudian pada status deployment akan muncul commit baru yang telah kita push ke github
Proses sync dari github

15. Kemudian buka alamat web app untuk melihat perubahan yang telah dibuat
Halaman web yang telah diubah

Upload Website ke Microsoft Azure Web App dengan FTP

Setelah sebelumnya saya sudah membahas cara mendapatkan hosting (web app) gratis dari Microsoft Azure, maka kali ini saya akan berbagi bagaimana cara meng-upload website yang telah kalian buat ke web app yang sudah kalian buat sebelumnya. Metode untuk meng upload-web ke web app sebenarnya juga lumayan lengkap, kalian dapat menggunakan beberapa cara, antara lain menggunakan:
  1. FTP
  2. Visual Studio
  3. Github
  4. Bitbucket
  5. Dropbox
  6. One Drive
  7. Local GIT
Namun yang akan saya ulas kali ini adalah metode upload menggunakan FTP.
Sebelum memulai kalian memerlukan software FTP Client, yaitu software yang digunakan untuk me-manage file pada FTP Server. Software yang akan saya gunakan adalah FileZilla, karena ia bersifat open source dan juga gratis. Selain FileZilla kalian juga dapat menggunakan WinSCP atau yang lainnya. Untuk mendownload FileZilla kalian dapat mengunjungi link berikut ini : https://filezilla-project.org/download.php

Jika sudah terdownload, silakan install. Kurang lebih begini cara untuk meng-upload web ke azure web app
1. Buka portal azure untuk mendapatkan detail koneksi FTP, format detail akan seperti gambar di bawah ini.
Jika pada FTP/Deployment username masih kosong, maka kita perlu membuat deployment credentials terlebih dahulu
FTP/Deployment username masih belum ada karena kalian belum membuat deployment credentials

2. Untuk membuat deployment credentials, silakan kalian masuk ke bagian Settings kemudian cari kategori "PUBLISHING" kemudian pilih menu "Deployment credentials"
Pilih menu Deployment credentials pada bagian Settings

3. Kemudian isikan FTP username dan password yang kalian inginkan, kemudian pilih "Save"
Isikan username dan password untuk deployment credentials

4. Jika sudah, lihat lagi ke halaman dashboard web app. Maka pada bagian FTP/Deployment username akan terlihat username yang baru saja kalian buat
Detail inilah yang akan digunakan untuk masuk ke FTP web app
Catatan : Untuk masuk ke FTP web app, sebisa mungkin selalu gunakan FTPS (bagian bawah) daripada FTP karena alasan keamanan. Jika kalian masih menggunakan FTP, maka password akan dikirimkan ke server dalam bentuk plain text (text yang tidak dienkripsi) sedangkan FTPS akan mengenkripsi password sebelum dikirim ke server.

5. Kemudian buka Filezilla yang telah kalian install sebelumnya
Pada kolom Host isikan FTPS Hostname dari portal azure (step nomor 4),
kemudian pada kolom username isikan username dari portal azure (step nomor 4).
Pastikan Username cocok dengan yang ada di portal, format username biasanya seperti ini : namaApp\username).

6. Jika kalian mendapatkan pop up seperti gambar di bawah ini berarti FTP Server dan FTP client sedang melakukan pertukaran digital certificate yang akan digunakan untuk enkripsi data (keamanan data). Seperti yang saya utarakan pada poin 4, bahwa FTPS akan mengenkripsi data sebelum dikirim ke server, dan certificate inilah yang digunakan untuk proses enkripsi.
Pilih OK untuk mengizinkan certificate dari server

7. Kemudian status koneksi dapat kalian lihat di bagian yang saya beri kotak merah sebelah kiri atas, jika berhasil login, maka file file yang ada pada FTP server web app akan muncul di bagian yang saya tandai merah (bawah).
Tampilan FileZilla setelah berhasil login

7. Folder root dari web app ini berada pada directory /site/wwwroot, sehingga kalian harus mengupload website kalian di sana agar dapat dibuka melalui alamat web app.
File hostingstart.html di atas adalah file bawaan dari web app azure

8. Untuk mengupload file dari komputer(lokal) ke web app azure, kalian harus mencari file/folder yang akan kalian upload pada kolom sebelah kiri (anak panah), kemudian klik kanan file/folder tersebut kemudian pilih "Upload"
Pilih file yang akan diupload, kemudian klik kanan dan pilih Upload
Jika proses upload telah selesai, maka file yang baru diupload akan muncul di kolom sebelah kanan filezilla

9. Jika kalian ingin menghapus file pada web app, klik kanan file tersebut kemudian pilih delete
Untuk menghapus, klik kanan file tersebut kemudian pilih delete

10. Kemudian buka web yang baru saja kalian upload
Halaman website yang baru saja saya upload

Nah bagaimana? Mudah kan? Tutorial berikutnya adalah cara deploy aplikasi melalui GITHUB.

Hosting Gratis dari Microsoft Azure

Salah satu service azure yang dapat digunakan menggunakan akun dreamspark ialah web app service. Jika anda belum memiliki akun microsoft azure silakan baca posting berikut : Microsoft Azure Gratis dari DreamSpark.

Jika anda telah memiliki akun microsoft azure silakan ikuti langkah langkah berikut:
1. Buka portal microsoft azure di halaman https://portal.azure.com/
2. Pilih "New" kemudian "Web + Mobile" kemudian "Web App"
Membuat web app baru

3. Kemudian isikan App name yang juga merupakan sub domain web yang akan kita buat
Pada Resource Group pilih "New" untuk membuat resource group baru. 
Kemudian isikan nama resource group yang baru

4. Pada App Sercive plan/Location kita dapat memilih lokasi server yang diinginkan
Kali ini saya menggunakan server yang berlokasi di US

5. Berikut detail web app yang akan saya buat, saya memilih opsi "Pin to Dashboard" supaya web app yang baru ini muncul di dashboard dan memudahkan untuk mencrinya
Klik "Create" untuk membuat web app

6. Kemudian jika anda melihat tampilan berikut berarti web app sedang dibuat
Tunggu sebentar

7. Jika proses build web app sudah selesai, maka web app yang baru kita buat akan muncul di dashboard seperti berikut
Klik pada web app untuk mulai me managenya

8. Kemudian akan muncul tampilan panel web app yang baru kita buat
Panel pengaturan web app
Klik pada url untuk melihat web app yang baru dibuat

9. Berikut ini tampilan web app yang baru saya buat
Tampilan awal web app dari azure

Nah itu dia cara membuat hosting sendiri di Microsoft Azure. Untuk meng upload web yang telah kita buat dapat menggunakan beberapa cara, antara lain menggunakan:
  1. FTP
  2. Visual Studio
  3. Github
  4. Bitbucket
  5. Dropbox
  6. One Drive
  7. Local GIT

Untuk caranya akan saya bahas pada posting berikutnya

Microsoft Azure Gratis dari DreamSpark

Setelah sebelumnya saya mengulas tentang Microsoft Azure, kali ini akan saya bagikan cara untuk mendapatkan Microsoft Azure secara GRATIS bersyarat.
Untuk mendapatkan Microsoft Azure secara gratis diperlukan beberapa syarat yaitu akun Microsoft DreamSpark dan nomor HP untuk verifikasi.
Karena Microsoft Azure yang kita dapat nantinya bertipe mahasiswa, maka akan ada beberapa batasan service yang bisa digunakan seperti tidak bisa membuat virtual machine, walaupun ada batasan tapi sudah cukup untuk mengembangkan aplikasi kok. :D

Langkah langkah mendapatkan Microsoft Azure secara gratis

1. Buka situs DreamSpark di https://www.dreamspark.com/ kemudian login sebagai student
Login ke akun DreamSpark

2. Kemudian masuk ke katalog software dengan cara seperti gambar di bawah
Klik go to the student software catalog

3. Cari ke kategori Server & Applications
Klik Microsoft Azure

4. Kemudian akan muncul detail produk
Klik "Register now"

5. Setelah itu akan muncul form pendaftaran
Isi form pendaftaran sesuai dengan data yang sebenarnya.
Kemudian klik "Send text message" untuk mendapatkan kode verifikasi

6. Jika sudah mendapat sms yang berisi kode verifikasi, isikan pada kolom yang disediakan
Masukkan kode verifikasi kemudian klik "Verify code"

7. Jika kode verifikasi sesuai maka pada form Verification by Phone akan muncul tanda complete
Klik "Sign up" untuk melanjutkan pendaftaran

8. Kemudian kalian akan diarahkan ke halaman berikut
Tunggu sebentar sampai azure siap digunakan.
Sembari menunggu kalian juga dapat melihat video intro azure yang ada di web tersebut

9. Microsoft Azure siap digunakan
Klik "Start managing my service" untuk masuk ke halaman dashboard azure

10. Halaman dashboard atau yang lebih sering disebut portal azure
Tampilan awal dashboard Microsoft Azure

Nah sekarang akun azure kalian sudah siap, saatnya untuk menjelajahi fitur fitur yang disediakan oleh azure.