Docker'da VueJS + NodeJS + MongoDB uygulaması nasıl paketlenir

Bir önceki yazımdan da anlayacağınız üzere farklı projeler üzerinde çalıştım. Yeni bir ekipteki ilk günler genellikle aynı şekilde geçer: Destekleyici benimle oturur ve uygulamayı yüklemek ve dağıtmak için sihirli eylemler gerçekleştirir. Docker, ön uç geliştiriciler için vazgeçilmezdir çünkü... Arka uç genellikle çok çeşitli PHP/Java/Python/C# yığınlarında yazılır ve ön tarafın her şeyi yüklemek ve dağıtmak için arka ucun dikkatini dağıtmasına gerek yoktur. Yalnızca tek bir yerde şeffaf dağıtım, günlükler ve otomatik testlerle Docker-Jenkins kombinasyonunu gördüm.

Docker hakkında birçok detaylı makale yazıldı. Bu makalede VueJS/Vue Router kullanarak Tek Sayfalı Uygulama dağıtımından bahsedeceğiz, sunucu kısmı NodeJS ile RESTful API formundadır ve veritabanı olarak MongoDB kullanılır. Docker Compose, birden fazla konteyner uygulamasını tanımlamak ve çalıştırmak için kullanılır.

Docker'a neden ihtiyaç duyulur?

Docker, bir uygulamayı dağıtma sürecini otomatikleştirmenize olanak tanır. Geliştiricinin artık programları kendi başına kurmasına veya makinesindeki sürüm uyumsuzluğuyla uğraşmasına gerek yok. Tek yapmanız gereken Docker'ı kurmak ve konsola 1-2 komut yazmak. Bunu yapmanın en uygun yolu Linux'tur.

Başlarken

Ayarlamak liman işçisi ve liman işçisi oluşturma

Klasör yapısı

İstemci ve sunucu uygulamaları için 2 adet klasör oluşturuyoruz. .yml uzantılı bir dosya bir yapılandırmadır Docker OluşturmaUygulama kapsayıcılarının tanımlandığı ve ilişkilendirildiği yer.
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

Docker'da 3 hizmet oluşturuyoruz: NodeJS, MongoDB için ve Vue'da statik olanlar için. İstemciyi sunucuya bağlamak için eklendi sunucuya bağlıdır. MongoDB'yi sunucu API'sine bağlamak için şunu kullanın: bağlantılar mongo. Sunucu, istemci, mongo - hizmetlerin adları.

VueJS istemcisi

Klasöründe /müşteri Uygulama VueJS'ye dayanmaktadır. Uygulama kullanılarak oluşturuldu Vue Cli. Bir görüntü oluştururken istemci uygulaması, klasördeki bir dizi statik dosyaya yerleştirilir / uzak. Dockerfile, bir görüntü oluşturmaya yönelik bir dizi komutu açıklar:

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

Lütfen package.json dosyasının diğer proje dosyalarından ayrı olarak kopyalanıp kurulduğunu unutmayın. Bu performans için yapılır, böylece /node_modules klasörünün içeriği yeniden oluşturulurken önbelleğe alınır. Her komut satırı ayrı ayrı önbelleğe alınır.

Son olarak konteyner başlatıldığında komut yürütülür. npm run dev. Bu komut package.json'da açıklanmıştır:

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

Dosyaları bir klasörden çalıştırmak için / uzak, küresel olarak kurulu http-serverve geliştirme bağımlılıklarında paket spa-http-serverBöylece Vue Router'ın düzgün çalışması sağlanır. --Push-state bayrağı index.html'ye yönlendirir. 1 saniye değerindeki -c bayrağı eklendi http sunucusu komut dosyalarını önbelleğe almadı. Bu bir test örneğidir; gerçek bir projede nginx kullanmak daha iyidir.

Vuex mağazasında bir alan oluşturuyoruz apiHost: 'http://localhost:3000'NodeJS Api bağlantı noktasının kayıtlı olduğu yer. Client kısmı hazır. Artık istemciden arkaya gelen tüm istekler bu URL'ye gidiyor.

NodeJS sunucu API'si

Klasöründe /server yaratmak sunucu.js ve Docker dosyası:

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

В sunucu.js gösterilir url veritabanı için const url = 'mongodb://mongo:27017/';. İstemciden gelen etki alanları arası isteklere izin verme:

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));
  });

Sonuç

Şimdi proje dizinine gidelim ve çalıştıralım docker-compose build görüntüleri oluşturmak için ve docker-compose up konteynerleri çalıştırmak için. Ekip 3 konteyneri kaldıracak: sunucu, istemci, mongo. Bir NodeJS sunucusu için, sunucuyu kullanıcı klasörüne bağlayarak çalışırken yeniden yüklemeyi yapılandırabilirsiniz. Ve geliştirilmekte olan istemci, ayrı olarak çalışarak, sıcak yeniden yükleme ile yerel olarak başlatılmalıdır. sunucu и Mongo. Ayrı bir hizmet başlatmak için adını belirtmeniz yeterlidir docker-compose up client. Bazen yapmayı unutmayın prune ve kaynakları boşaltmak için kapsayıcıları, ağları ve görüntüleri silmek.

Kodun tamamını görebilirsiniz burada. Proje halen geliştirilme aşamasındadır.

Kaynak: habr.com