lagosta

Lagosta

Lagosta adalah antarmuka pengguna untuk Krill.

Proyek ini menggunakan Vue.js sebagai kerangka Javascript dan Elemen sebagai kerangka UI.

Persyaratan

• Node.js
• benang atau npm

Perhatikan bahwa benang memerlukan pemasangan ketergantungan tambahan, sedangkan npm disertakan dengan node.js. OTOH jika Anda menggunakan npm, Anda harus memastikan untuk mengkomit package-lock.json ke repositori.

Pengaturan proyek

Untuk memasukkan semua perpustakaan js yang diperlukan, jalankan

yarn install

atau

npm install

Menjalankan Server Pengembangan

Vue menggunakan webpack dan webpack-dev-server untuk menjalankan server pengembangan kompilasi otomatis dan hot-reloadable dan Krill tidak terkecuali.

Anda dapat memulai server pengembangan dengan mengeluarkan:

npm run serve

Sebagian besar pengaturan untuk server pengembangan ditentukan dalam file /vue.config.js .

Anda dapat memilih Alamat IP dan port untuk menjalankan server pengembangan Krill di:

    port: "3003",
    https: true

Anda dapat menggunakan pengaturan proxy untuk webpkack-dev-server untuk merutekan ulang permintaan HTTP ke instance Krill lokal Anda. Edit file /vue.config.js dengan menentukan opsi proxy .

Ini akan meneruskan permintaan untuk titik akhir tertentu ke instans Krill lokal Anda. Perhatikan bahwa Anda akan merutekan ulang titik akhir /api , /auth dan /stats ke Krill.

Misalnya:

...
  devServer : {
    // Krill proxy instance (for API calls).
    // see: https://webpack.js.org/configuration/dev-server/#devserverproxy
    proxy : {
      "/api" : { target : "https://localhost:3000" } ,
      "/auth" : { target : "https://localhost:3000" } ,
      "/stats" : { target : "https://localhost:3000" }
    } ,
...

Dalam contoh ini, instance Krill lokal berjalan di https://localhost:3000 (Default dalam konfigurasi krill).

Anda dapat membaca lebih lanjut tentang webpack-dev-server di sini.

Membuat build untuk penerapan

Untuk mengkompilasi dan memperkecil semuanya di folder /dist , Anda dapat menjalankan:

 yarn run build

atau

 npm run build

Ini akan mengkompilasi dan mengecilkan semua JS dan CSS. Sekali lagi, karena Vue menggunakan webpack, Anda dapat mengubah banyak pengaturan untuk proses pembangunan.

Lihat https://webpack.js.org/concepts/.

Merutekan permintaan API di Produksi

Ada dua cara untuk menjalankan aplikasi dalam produksi:

• Konfigurasikan server web Anda untuk mem-proxy semua panggilan /api , /stats dan /auth ke daemon Krill.
• Gunakan 'server.js' yang disediakan untuk menjalankan server HTTP sederhana yang memproksi panggilan API (TIDAK DIANJURKAN).

Untuk menggunakan yang terakhir, pertama-tama buat file .env dengan parameter yang sesuai dengan lingkungan Anda

 PROXY_BASE_URL=https://your-host
SERVE_FOLDER=dist

lalu lari

 node server.js

Membangun dalam wadah Docker

Hanya sekali saja, buat image Docker secara lokal:

 docker build -t lagosta-builder .

Setelah Anda memilikinya, Anda dapat melakukan:

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn install
root@06a45bcc9a3e:/tmp/src# exit

Sekarang setelah image Docker dan direktori build lokal Lagosta Anda sudah siap, di masa mendatang Anda dapat menjalankan yarn build seperti ini:

 docker run -it --rm --name lagosta-builder -v ${PWD}:/tmp/src lagosta-builder /bin/bash
root@06a45bcc9a3e:/tmp/src# yarn build
...
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
Done in 19.66s.

Outputnya akan berada di folder ${PWD}/dist di host.