ProHoster > blog > administrasi > Cara mengemas aplikasi VueJS + NodeJS + MongoDB di Docker

Cara mengemas aplikasi VueJS + NodeJS + MongoDB di Docker

Cara mengemas aplikasi VueJS + NodeJS + MongoDB di Docker
Seperti yang dapat Anda pahami dari artikel sebelumnya, saya mengerjakan proyek yang berbeda. Hari-hari pertama di tim baru biasanya berjalan dengan cara yang sama: backender duduk bersama saya dan melakukan tindakan ajaib untuk menginstal dan menerapkan aplikasi. Docker sangat diperlukan untuk pengembang front-end karena... Backend sering kali ditulis dalam berbagai tumpukan PHP/Java/Python/C#, dan bagian depan tidak perlu mengganggu backend setiap kali menginstal dan menerapkan semuanya. Hanya di satu tempat saya melihat kombinasi Docker-Jenkins dengan penerapan transparan, log, dan pengujian otomatis.

Banyak artikel mendetail telah ditulis tentang Docker. Artikel ini akan membahas tentang penerapan Aplikasi Satu Halaman menggunakan VueJS/Vue Router, bagian server berupa RESTful API dengan NodeJS, dan MongoDB digunakan sebagai database. Docker Compose digunakan untuk mendefinisikan dan menjalankan beberapa aplikasi container.

Mengapa Docker diperlukan

Docker memungkinkan Anda mengotomatiskan proses penerapan aplikasi. Pengembang tidak perlu lagi menginstal program sendiri atau menangani ketidakcocokan versi pada mesinnya. Yang perlu Anda lakukan hanyalah menginstal Docker dan mengetikkan 1-2 perintah ke konsol. Cara paling mudah untuk melakukan ini adalah di Linux.

Memulai

Mengatur Buruh pelabuhan dan Komposisi Docker

Struktur folder

Kami membuat 2 folder untuk aplikasi klien dan server. File dengan ekstensi .yml adalah konfigurasi Docker Tulis, tempat kontainer aplikasi ditentukan dan dikaitkan.
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 Docker: untuk NodeJS, MongoDB dan untuk layanan statis di Vue. Ditambahkan untuk menghubungkan klien ke server tergantung pada server. Untuk menghubungkan MongoDB dengan API server, gunakan tautan mongo. Server, klien, mongo - nama layanan.

klien VueJS

Dalam folder /klien Aplikasi ini didasarkan pada VueJS. Aplikasi ini dibuat menggunakan Vue Cli. Saat membuat gambar, aplikasi klien dibangun ke dalam kumpulan file statis dalam folder /disst. Dockerfile menjelaskan serangkaian perintah untuk membuat image:

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 file proyek lainnya. Hal ini dilakukan untuk kinerja, sehingga isi folder /node_modules di-cache ketika dibangun kembali. Setiap baris perintah di-cache secara terpisah.

Terakhir, saat container dimulai, perintah dijalankan npm run dev. Perintah ini dijelaskan di package.json:


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

Untuk menjalankan file dari folder /disst, dipasang secara global http-server, dan dalam dependensi dev paketnya spa-http-serveragar Vue Router berfungsi dengan benar. Bendera --push-state dialihkan ke index.html. Bendera -c dengan nilai 1 detik telah ditambahkan http-server tidak menyimpan skrip dalam cache. Ini adalah contoh pengujian; pada proyek nyata lebih baik menggunakan nginx.

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

API server NodeJS

Dalam folder /server membuat server.js dan Dockerfile: 


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

Π’ server.js ditunjukkan url untuk basis data const url = 'mongodb://mongo:27017/';. 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));
  });

Kesimpulan

Sekarang mari masuk ke direktori proyek dan jalankan docker-compose build untuk membangun gambar dan docker-compose up untuk menjalankan kontainer. Tim akan mengangkat 3 kontainer: server, klien, mongo. Untuk server NodeJS, Anda dapat mengonfigurasi hot-reload dengan menautkannya ke folder pengguna. Dan klien yang sedang dikembangkan harus diluncurkan secara lokal dengan hot reload, dijalankan secara terpisah Server ΠΈ mongo. Untuk memulai layanan terpisah, cukup tentukan namanya docker-compose up client. Jangan lupa melakukannya sesekali prune dan menghapus wadah, jaringan, dan gambar untuk mengosongkan sumber daya.

Anda dapat melihat kode lengkapnya di sini. Proyek ini masih dalam pengembangan.

Sumber: www.habr.com

Tambah komentar