Setelah proses panjang menginstall bazel di angular, maka kita lanjut ke proses mengunggah source code ke github dan menghubungkan ke azure untuk dilakukan proses deployment.

2. Mengungggah source code ke github

Pastikan teman-teman sudah memilki akun github untuk mengunggah source code yang kita buat. Kemudian membuat repository baru dan di sini saya membuat repository yang namanya sesuai dengan project saya yaitu ngBazel.

Kemudian kita remote repository itu dengan cara git remote add origin https://github.com/afifalfiano/ngBazel.git .

Setelah itu kita lakukan git add . untuk memindahkan seluruh source code ke staging dan selanjutnya git commit. Jika sudah tinggal lakukan proses git push origin master -u. Jika ssh kita belum terdaftar ke github maka akan dimintai username dan password untuk login ke akun github. Isikan degan benar dan tunggu proses upload sampai selesai.

Cek pada repository akun github yang tadi kita buat apakah sudah diperbarui apa belum.

Jika sudah, maka selamat tahapan unggah source code berhasil. Selanjutnya kita masuk ke proses deployment menggunakan azure dengan bantuan github workflow action.

3. Deployment ke Azure

Oke masuk ke tahap terakhir dan pastikan teman-teman sudah memiliki akun azure microsoft. Jika belum bisa daftar terlebih dahulu dan ini gratis kok, hanya saja memerlukan kartu kredit untuk bisa menggunakan layanan ini. Teman-teman bisa membuat kartu je*ius dan menggunakan virtual account kartu kredit.

Selanjutnya kita login ke azure dan setelah berhasil langsung saja pilih portal.

Kemudian pilih Static Web Apps(preview) karena kita akan menggunakan layanan tersebut.

Setelah itu kita klik Add untuk menambahkan project baru.

Isikan sesuai dengan ketentuan dan pada research group bisa create new jika teman-teman belum pernah mengguakan layanan ini. Nah, pada source code detail ini terdapat github account. Hubungkan azure dengan github teman-teman dan pilih repository yang akan dideploy ke azure. Kemudian klik next: build.

Untuk app location kita isi dengan dist, apinya dikosongkan saja dan artifact kita isi dengan /. Kemudian next: Tags>.

Jika kita belum membutuhkan versioning aplikasi maka bisa skip saja pada bagian ini. Selanjutya review + create.

Langsung saja klik create dan tunggu sampai proses berhasil.

Yap, kita berhasil mendelpoy ke azure. Apakah selesai? tentu belum, mari kita lanjutkan perjalanan ,hehe. Setelah proses selesai maka akan secara otomatis akan membuat file di repository kita untuk menjalankan proses deployment dari github ke azure. Filenya seperti berikut ini.

Kemudian kita cek di menu action, dimenu itu kita bisa melihat proses deployment yang sedang terjadi dan ternyata masih terdapat error.

Nah, kita perlu konfigurasi lebih lanjut.

Kita masuk ke source code kita yang ada di local, selanjutnya kita pull code terbaru yang ada direpository tadi. Kita edit file azure-static…yml menjadi seperti berikut ini.

Kemudian kita edit juga file .bazelrc. Kita edit perintah build — symlink_prefix=dist/ menjadi build — symlink_prefix=dist-bazel/ .

Tambahkan juga pada package.json proses build menjadi ng build — leaveBazelFilesOnDisk

Jika sudah semua, kita git add , git commit dan git push kembali. Kita tunggu proses deployment ke azure.

Sembari menunggu proses kita bisa cek website kita yang disediakan oleh azure, seperti ini jika belum ada isinya.

Yap, akhirnya proses deployment selesai dan membutuhkan waktu sekitar 3 menit lebih.

Dan kita refresh website tadi dan selamat kamu berhasil deploy ke azure.

Nah pada tahap ini teman-teman sudah berhasil mendeploy aplikasi angular ke azure menggunakan perantara github actions.

Selanjutnya ada sedikit tambahan, di azure ini kita juga bisa menggunakan environment staging, jadi untuk mencoba fitur ini tinggal buat branch baru dari master bernama staging.

Kemudian edit sedikit supaya tau perbedaanya dari master, setelah itu git add, git commit dan git push tapi bukan dimaster melainkan distaging.

Setelah proses upload ke staging berhasil, kita lakukan pull request ke master. Seperti ini tampilannya.

Tinggal klik create pull request dan secara otomatis github actions akan ke trigger kembali untuk melakukan proses deployment. Proses deployment bukan dilakukan dimaster atau production, melainkan di staging.

Tunggu proses deployment ke staging sampai selesai.

Yap dan berhasil, untuk mengecek kita bisa langsung menuju ke mintoring azure untuk melihat link yang ada.

Oke untuk mengecek website yang ada distaging, langsung saja klik browse pada staging.

Oke selamat proses deployment ke staging berhasil. Mari kita bandingkan perbedaan yang di master dan di staging.

Untuk memastikan apakah ini menggunakan bazel, teman-teman bisa klik kanan dan view page source dan jika tampilannya seperti berikut ini maka dapat dipastikan buildnya menggunakan bazel.

Berikut ini source code lengkapnya untuk latihan panjang untuk deploy angular dan bazel ke azure menggunakan perantara github actions.

Oke, mungkin itu saya yang dapat saya bagikan tentang angular, bazel, azure dan github actions. Semoga bermanfaat dan tetap semangat ya! 😁

#github #azure #angular #bazel