Taufik Mulyana
Taufik Mulyana
Linux System Administrator, Interested in Linux, Cloud, Containers
January 1, 2019 3 min read

Dockerize Aplikasi Vue.JS

dockerize-vuejs-app

Dockerize Aplikasi Vue.JS, Vue JS merupakan sebuah progressive javascript framework untuk membangun antramuka pengguna yang berfokus hanya pada view layer, Vue JS biasa digunakan untuk frontend yang mengkonsumsi api dari backend, untuk men-serve aplikasi Vue JS kita membutuhkan sebuah web server, kita bisa menggunakan apache atau nginx atau yang sederhana seperti http-server, dan disini kita akan mencoba men-deploy aplikasi Vue JS ke Docker Container, nantinya Vue JS akan berjalan dibalik Nginx dan Docker Container.

Baca Juga Deploy Aplikasi Node JS ke Docker Container

Membuat Aplikasi Vue JS sederhana

sebelumnya silahkan anda pasang node terlebih dahulu, lalu pasang vue-cli dengan perintah berikut

$ npm install -g @vue/cli

kita akan buat sebuah proyek dengan nama nothinux-vue

$ vue create nothinux-vue

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in p
roduction) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated 
config files
? Save this as a preset for future projects? No

Vue CLI v3.0.5
✨ Creating project in /home/nothinux/Development/vue/nothinux-vue.
🗃
⚙ Installing CLI plugins. This might take a while...

setting up Git hooks
done

kita juga dapat melihat proyek yang telah dibuat tadi

$ cd nothinux-vue
$ npm run serve

buka peramban dan akses pranala http://localhost:8080 anda akan disuguhkan tampilan default Vue JS.

baca juga  Deploy Aplikasi Node.js ke Docker Container

Membuat Dockerfile

kita akan menggunakan multi-stage build, stage pertama dengan alias builder akan melakukan pemasangan depedensi dan dilanjutkan melakukan build pada aplikasi Vue JS dan pada stage kedua kita akan mengambil hasil build dari stage pertama dan menyimpannya pada DocumentRoot nginx dan selanjutnya akan di serve oleh nginx


Melakukan Build Image

jalankan docker build untuk membuat Docker Image

$ sudo docker build -t nothinux-vue:1.0 .

Menjalankan Container

jalankan container dengan perintah berikut

$ sudo docker run -d -p 8080:80 --name nothinux-vue nothinux-vue:1.0

pada perintah diatas kita meng-expose port 8080 di host dan ketika diakses akan di arahkan ke container dengan nama nothinux-vue pada port 80

sampai disini melakukan dockerize pada aplikasi vue js telah selesai, source Vue JS dan DOckerfile dapat dilihat disini

Leave a Reply

Your email address will not be published. Required fields are marked *