ProHoster > Blog > Pentadbiran > Bagaimana untuk membungkus aplikasi VueJS + NodeJS + MongoDB dalam Docker

Bagaimana untuk membungkus aplikasi VueJS + NodeJS + MongoDB dalam Docker

Bagaimana untuk membungkus aplikasi VueJS + NodeJS + MongoDB dalam Docker
Seperti yang anda faham dari artikel sebelumnya, saya bekerja pada projek yang berbeza. Hari-hari pertama dalam pasukan baharu biasanya berjalan dengan cara yang sama: backender duduk bersama saya dan melakukan tindakan ajaib untuk memasang dan menggunakan aplikasi. Docker amat diperlukan untuk pembangun bahagian hadapan kerana... Bahagian belakang sering ditulis dalam pelbagai susunan PHP/Java/Python/C#, dan bahagian hadapan tidak perlu mengalihkan perhatian bahagian belakang setiap kali untuk memasang dan menggunakan segala-galanya. Hanya di satu tempat saya melihat gabungan Docker-Jenkins dengan penggunaan telus, log dan ujian automatik.

Banyak artikel terperinci telah ditulis mengenai Docker. Artikel ini akan membincangkan tentang menggunakan Aplikasi Halaman Tunggal menggunakan Penghala VueJS/Vue, bahagian pelayan adalah dalam bentuk API RESTful dengan NodeJS, dan MongoDB digunakan sebagai pangkalan data. Docker Compose digunakan untuk menentukan dan menjalankan berbilang aplikasi kontena.

Mengapa Docker diperlukan

Docker membolehkan anda mengautomasikan proses penggunaan aplikasi. Pembangun tidak lagi perlu memasang program sendiri atau menangani ketidakserasian versi pada mesinnya. Apa yang anda perlu lakukan ialah memasang Docker dan taip arahan 1-2 ke dalam konsol. Cara paling mudah untuk melakukan ini adalah pada Linux.

Bermula

Tetapkan buruh pelabuhan and Karang Docker

Struktur folder

Kami mencipta 2 folder untuk aplikasi klien dan pelayan. Fail dengan sambungan .yml ialah konfigurasi Docker Compose, di mana bekas aplikasi ditakrifkan 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 mencipta 3 perkhidmatan dalam Docker: untuk NodeJS, MongoDB dan untuk perkhidmatan statik dalam Vue. Ditambah untuk menyambungkan klien ke pelayan bergantung pada pelayan. Untuk memautkan MongoDB dengan API pelayan, gunakan pautan mongo. Pelayan, pelanggan, mongo - nama perkhidmatan.

Pelanggan VueJS

Dalam folder /pelanggan Aplikasi ini berdasarkan VueJS. Aplikasi dibuat menggunakan Vue Cli. Apabila membina imej, aplikasi klien dibina ke dalam satu set fail statik dalam folder /dist. Fail Docker menerangkan satu set arahan untuk membina imej:

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"]

Sila ambil perhatian bahawa package.json disalin dan dipasang secara berasingan daripada fail projek yang lain. Ini dilakukan untuk prestasi, supaya kandungan folder /node_modules dicache apabila membina semula. Setiap baris arahan dicache secara berasingan.

Akhirnya, apabila bekas bermula, arahan itu dilaksanakan npm run dev. Perintah ini diterangkan dalam package.json:


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

Untuk menjalankan fail dari folder /dist, dipasang secara global http-server, dan dalam kebergantungan dev pakej spa-http-serversupaya Penghala Vue berfungsi dengan betul. Bendera --push-state diubah hala ke index.html. Bendera -c dengan nilai 1 saat telah ditambahkan pada http-server tidak cache skrip. Ini adalah contoh ujian; pada projek sebenar adalah lebih baik menggunakan nginx.

Di kedai Vuex kami mencipta medan apiHost: 'http://localhost:3000', di mana port NodeJS Api didaftarkan. Bahagian pelanggan sudah bersedia. Sekarang semua permintaan daripada pelanggan ke belakang pergi ke url ini.

API pelayan NodeJS

Dalam folder /server cipta pelayan.js dan Dockerfile: 


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

Π’ pelayan.js ditunjukkan url untuk pangkalan data const url = 'mongodb://mongo:27017/';. Membenarkan permintaan merentas domain daripada pelanggan:


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 pergi ke direktori projek dan jalankan docker-compose build untuk membina imej dan docker-compose up untuk menjalankan kontena. Pasukan ini akan mengangkat 3 kontena: pelayan, pelanggan, mongo. Untuk pelayan NodeJS, anda boleh mengkonfigurasi muat semula panas dengan memautkannya ke folder pengguna. Dan pelanggan yang sedang dibangunkan harus dilancarkan secara tempatan dengan muat semula panas, berjalan secara berasingan server ΠΈ mongo. Untuk memulakan perkhidmatan yang berasingan, hanya nyatakan namanya docker-compose up client. Jangan lupa buat kadang-kadang prune dan memadamkan bekas, rangkaian dan imej untuk mengosongkan sumber.

Anda boleh melihat kod penuh di sini. Projek itu masih dalam pembangunan.

Sumber: www.habr.com

Tambah komen