Setup Aplikasi Vue.js Menggunakan Vue CLI dan Docker
Docker adalah sebuah teknologi container yang memungkinkan kita untuk mengembangkan, melakukan deployment dan menjalankan sebuah aplikasi secara isolated.
Kita bisa mendefinisikan sebuah konfigurasi infrastruktur aplikasi yang sama untuk setiap environment dimana aplikasi tersebut berjalan.
Sehingga, akan semakin kecil kemungkinan munculnya error ketika suatu aplikasi dijalankan di host yang berbeda karena perbedaan konfigurasi.
Sedangkan Vue.js adalah sebuah frontend framework berbasis komponen dan bahasa Javascript yang dapat digunakan untuk membuat tampilan sebuah aplikasi web.
Pada artikel kali ini, saya akan berbagi cara melakukan containerization (istilah untuk membungkus dan menjalankan aplikasi dengan menggunakan container) dan setup project aplikasi dengan framework Vue.js.
Untuk melakukan setup aplikasi dengan Vue.js ini saya akan menggunakan Vue CLI.
Vue CLI adalah sebuah tools development yang disediakan oleh Vue.js untuk membantu kita dalam proses development aplikasi.
Vue CLI dapat kita gunakan untuk menginisiasi sebuah project direktori, mendefinisikan konfigurasi untuk linter dan compiler, menjalankan development server, melakukan build untuk production code dan lainnya.
Bagi teman — teman yang ingin mencoba sendiri langkah — langkah yang saya bagikan disini, pastikan untuk terlebih dahulu menginstall aplikasi Docker dan Docker Compose di komputer teman — teman.
Untuk tutorial instalasi Docker bisa dilihat di sini dan untuk tutorial instalasi Docker Compose bisa dilihat di sini.
Sekilas tentang Docker Compose, Docker Compose adalah sebuah aplikasi tambahan pada Docker yang digunakan untuk me-manage aplikasi yang terdiri dari lebih dari satu container.
Misalkan sebuah aplikasi yang terdiri dari 4 container, masing — masing untuk frontend, backend, database dan cache.
Docker Compose akan sangat berguna untuk mendefinisikan spesifikasi untuk setiap container dan mengatur relasi dan koneksi antar container.
Membuat Konfigurasi Docker Image
Buatlah sebuah folder project untuk aplikasi teman — teman dengan nama yang deskriptif, disini saya menggunakan nama node-12-vue-cli.
Kemudian pada folder project tersebut, buatlah sebuah Dockerfile dengan isi sebagai berikut.
Dockerfile adalah sebuah file berisi perintah yang akan dijalankan ketika sebuah Docker Image dibangun.
Disini kita mendefinisikan perintah — perintahnya sebagai berikut:
- Line 1: Kita akan menggunakan base image Node.js versi 12.0
- Line 4: Membuat folder pada container dengan path /usr/src/app
- Line 5: Kita mendefinisikan folder /usr/src/app sebagai direktori kerja kita. Sehingga, semua command Docker yang kita jalankan dan semua kode aplikasi akan menggunakan folder ini sebagai root directory nya.
- Line 8: Kita menginstall library @vue/cli secara global di container yang akan kita gunakan.
- Line 11: Kita memindahkan isi folder project kita saat ini ke dalam folder working directory kita di dalam container.
- Line 14: Kita membuka port 8080 pada container kita. Port ini nantinya akan digunakan oleh server development aplikasi Vue.js kita dan akan di-bind ke port 8080 pada komputer kita.
Membuat Konfigurasi Docker Compose
Masih berada pada folder project yang kita buat sebelumnya, buatlah sebuah file dengan nama docker-compose.yml untuk membuat konfigurasi Docker Compose untuk aplikasi kita.
Kita mendefinisikan konfigurasi Docker Compose sebagai berikut:
- Line 1: Kita menggunakan format file docker-compose.yml versi 3
- Line 2: Menggunakan key services, kita mendefinisikan konfigurasi container untuk setiap service pada aplikasi kita. Karena pada project ini kita baru akan menggunakan satu service yaitu frontend server, kita hanya akan mendefinisikan satu service dengan nama vue-app
- Line 4: Menggunakan key build, kita mengarahkan Docker Compose untuk menggunakan file Dockerfile yang sudah kita buat sebelumnya sebagai instruksi untuk membangun image dari service frontend kita.
- Line 5: Kita melakukan port forwarding dari port 8080 di host (komputer) kita ke port 8080 dari container service kita, sehingga request yang masuk ke port tersebut di host kita akan diarahkan ke service yang berjalan pada port 8080 di container kita.
- Line 7: Kita akan menggunakan volume supaya file yang kita buat melalui command Vue CLI bisa tersimpan di storage komputer kita dan sebaliknya. Pada konfigurasi volume ini, kita mem-bind folder project saat ini ke folder workdir kita pada container (/usr/src/app).
- Line 9: Kita melakukan konfigurasi agar container kita bisa tetap hidup walaupun belum ada service yang berjalan.
(Optional) Membuat Shortcut Command Docker Compose
Langkah pada bagian ini bertujuan untuk mempermudah kita untuk melakukan eksekusi perintah tertentu pada container kita.
Pada file ini kita mendefinisikan 6 shortcut / alias
- alias serve:dev=”dc exec vue-app bash -c ‘cd first-vue-app && npm run serve’”
Perintah ini digunakan untuk menjalankan development server untuk aplikasi Vue.js kita - alias install:dev=”dc exec vue-app bash -c ‘cd first-vue-app && npm install’”
Perintah ini digunakan untuk menginstall package yang diperlukan oleh aplikasi Vue.js kita - alias bash:dev=”dc exec vue-app bash”
Perintah ini digunakan apabila kita perlu masuk ke dalam container dan menjalankan terminal bash. - alias dc=”docker-compose”
Shortcut untuk menjalankan perintah docker-compose pada terminal Linux - alias up=”dc up -d”
Digunakan untuk menjalankan container service yang kita definisikan pada docker-compose.yml dan menjalankannya dengan mode detach. - alias down=”dc down”
Digunakan untuk mematikan container service kita.
File .bashrc ini bisa kita gunakan dengan menjalankan perintah source .bashrc pada terminal.
Membuat dan Menghidupkan Container Untuk Setiap Service
Jalankan perintah source .bashrc agar terminal Linux dapat mengenali perintah yang sudah kita daftarkan sebelumnya.
Kemudian jalankan perintah up pada terminal untuk menjalankan proses instalasi container Docker kita.
Tahap ini akan sedikit memakan waktu, jadi bisa ditinggal untuk bikin kopi atau Indomie dulu.
Ketika proses instalasi sudah selesai, jalankan perintah dc ps untuk melihat container yang aktif dan statusnya.
Pastikan status pada container vue-app kita adalah up.
Untuk memulai setup project Vue.js, jalankan perintah vue create {nama aplikasi anda}.
Disini saya menggunakan nama my-first-vue. Sehinggga, saya menjalankan vue create my-first-vue.
Kemudian, kita akan diminta untuk menentukan beberapa konfigurasi yang kita inginkan untuk project kita.
- Pada menu pertama, kita diminta untuk menentukan versi Vue.js yang ingin digunakan. Pilih “Manually select features” untuk memilih fitur yang ingin kita gunakan secara manual
- Pada menu berikutnya, pilih “Choose Vue version” untuk memilih versi framework yang ingin kita gunakan. Pilih versi 2.x.
- Pada menu berikutnya kita diminta untuk memilih konfigurasi linter / formatter, pilih “ESLint with error prevention only”
- Pada menu berikutnya kita diminta untuk memilih kapan linter harus bekerja, disini saya memilih “Lint on save”
- Pada menu berikutnya kita diminta untuk menentukan dimana konfigurasi Linter dan Compiler kita akan disimpan, disini saya memilih “In dedicated config files”
- Pada menu berikutnya gunakan “n” untuk tidak menyimpan konfigurasi saat ini sebagai default konfigurasi untuk project mendatang.
Semua option disini adalah preferensi saya pribadi, silahkan memilih option lain yang lebih sesuai dengan kebutuhan project anda.
Setelah itu, Vue CLI akan melakukan setup folder project kita dengan mempersiapkan file dan konfigurasi serta menginstall dependensi yang dibutuhkan.
Setelah selesai, buka folder project kita dan akan terdapat folder baru dengan nama project yang kita tentukan melalui Vue CLI.
Apabila terdapat logo gembok pada folder project yang dibuat oleh Vue CLI, jalankan perintah sudo chmod 777 -R my-first-vue/ agar kita bisa mengedit file pada folder project tersebut.
Kembali lagi ke terminal bash pada container, masuk ke folder project kita dan jalankan npm run serve untuk menjalankan server development aplikasi Vue.js kita.
Tunggu sampai proses compiling selesai, setelah itu pada browser kesayangan anda, buka localhost:8080.
Selamat, anda telah berhasil melakukan setup project Vue.js menggunakan Vue CLI dan telah berhasil menjalankannya menggunakan Docker.
