Cara mengemas aplikasi VueJS + NodeJS + MongoDB di Docker

Seperti yang Anda lihat dari artikel sebelumnya, saya bekerja dengan berbagai proyek. Hari-hari pertama dalam tim baru biasanya berjalan dengan cara yang sama: back-end duduk di bawah saya dan melakukan tindakan ajaib untuk menginstal dan menggunakan aplikasi. Docker sangat diperlukan untuk front-end sejak itu backend sering ditulis pada berbagai tumpukan PHP / Java / Python / C # dan bagian depan tidak perlu mengganggu backend setiap kali untuk menginstal dan menyebarkan semuanya. Hanya di satu tempat saya melihat sekelompok Docker-Jenkins dengan penyebaran transparan, log, kacau oleh tes mandiri.

Banyak artikel terperinci telah ditulis tentang buruh pelabuhan. Artikel ini akan membahas penyebaran Aplikasi Halaman Tunggal menggunakan VueJS / Vue Router, bagian server sebagai RESTful API dengan NodeJS, dan MongoDB digunakan sebagai database. Docker Compose digunakan untuk menggambarkan dan menjalankan beberapa aplikasi kontainer.

Mengapa saya membutuhkan buruh pelabuhan

Docker memungkinkan Anda untuk mengotomatiskan proses penggelaran aplikasi. Pengembang tidak perlu lagi menginstal program sendiri, untuk menangani ketidakcocokan versi pada mesinnya. Cukup menginstal Docker dan mendorong 1-2 tim ke konsol. Sangat mudah untuk melakukan ini di Linux.

Memulai

Instal Docker dan komposisi Docker

Struktur folder

Kami membuat 2 folder untuk aplikasi klien dan server. File dengan ekstensi .yml adalah konfigurasi Penyusun Docker tempat wadah aplikasi ditentukan dan ditautkan.
Docker-compose.yml:

version: "3" services: mongo: container_name: mongo hostname: mongo image: mongo ports: - "27017:27017" server: build: server/ #command: node ./server.js #   CMD  Dockerfile  /server ports: - "3000:3000" links: - mongo client: build: client/ #command: http-server ./dist #   CMD  Dockerfile  /client network_mode: host ports: - "8089:8089" depends_on: - server 

Kami membuat 3 layanan di buruh pelabuhan: untuk NodeJS, MongoDB dan untuk statika di Vue. Untuk menghubungkan klien ke server, tergantung pada server ditambahkan. Links mongo digunakan untuk menghubungkan MongoDB dengan API server. Nama server, klien, mongo - layanan.

Klien di VueJS

Folder / klien berisi aplikasi di VueJS. Aplikasi dibuat menggunakan Vue Cli . Saat membangun gambar, aplikasi klien membangun menjadi satu set file statis di folder / dist . Dockerfile menjelaskan serangkaian perintah untuk membangun gambar:

 FROM node:10 WORKDIR /client COPY ./package*.json ./ RUN npm install RUN npm install -g http-server COPY . . RUN npm run build EXPOSE 8081 CMD ["npm", "test:dev"] 

Harap dicatat bahwa package.json disalin dan diinstal secara terpisah dari sisa file proyek. Ini dilakukan untuk kinerja, sehingga isi folder / node_modules di-cache ketika membangun kembali. Setiap baris perintah di-cache secara terpisah.

Akhirnya, ketika wadah mulai, perintah npm run dev dijalankan. Perintah ini dijelaskan dalam package.json:

 "scripts": { "test:dev": "http-server dist -p 8081 -c 1 --push-state" } 

Untuk menjalankan file dari folder / dist , http-server diinstal secara global, dan paket spa-http-server diatur dalam dev-dependencies sehingga Vue Router bekerja dengan benar. Bendera –push-state mengalihkan ke index.html. Bendera -c dengan nilai 1 detik ditambahkan sehingga http-server tidak men- cache skrip. Ini adalah kasus uji, pada proyek nyata lebih baik menggunakan nginx.

Di toko Vuex, buat bidang apiHost: 'http://localhost:3000' , tempat port NodeJS Api terdaftar. Bagian klien siap. Sekarang semua permintaan dari klien ke belakang pergi ke url ini.

API server NodeJS

Di folder /server , buat server.js dan Dockerfile:

 FROM node:10 WORKDIR /server COPY ./package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["node", "server.js"] 

Server.js menentukan url untuk basis data const url = 'mongodb://mongo:27017/'; . Kami mengizinkan permintaan lintas-domain dari klien:

 const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); berbagai SmartTV) tersedak const clientUrl = 'http://localhost:8081'; const corsOptions = { origin: clientUrl, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors()); app.all('/*', (req, res, next) => { res.header('Access-Control-Allow-Origin', clientUrl); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }); app.get('/getProducts', cors(corsOptions), (req, res) => { products.getContent .then(data => res.json(data), err => res.json(err)); }); app.get('/getUsers', cors(corsOptions), (req, res) => { db.getUsers() .then(data => res.json(data), err => res.json(err)); }); 

Kesimpulan

Sekarang, masuklah ke direktori proyek dan jalankan docker-compose build gambar dan docker-compose up untuk memulai wadah. Perintah akan memunculkan 3 kontainer: server, klien, mongo . Untuk server di NodeJS, Anda dapat mengonfigurasi hot-reload dengan mengaitkannya dengan folder pengguna. Dan klien sedang dalam pengembangan untuk menjalankan secara lokal dengan hot reload, menjalankan server dan mongo secara terpisah. Untuk memulai layanan terpisah, cukup tentukan nama docker-compose up client . Ingatlah untuk terkadang prune dan menghapus wadah, jaringan, dan gambar untuk membebaskan sumber daya.

Kode lengkap dapat ditemukan di sini . Proyek ini masih dalam pengembangan.