ডকারে VueJS + NodeJS + MongoDB অ্যাপ্লিকেশন কীভাবে প্যাকেজ করবেন

আপনি আগের নিবন্ধ থেকে দেখতে পারেন, আমি বিভিন্ন প্রকল্পের সাথে কাজ করেছি। একটি নতুন দলে প্রথম দিনগুলি সাধারণত একইভাবে যায়: ব্যাকেন্ডার আমার কাছে বসে এবং অ্যাপ্লিকেশনটি ইনস্টল এবং স্থাপন করার জন্য যাদু পদক্ষেপগুলি সম্পাদন করে। ডকার ফ্রন্ট-এন্ড ডেভেলপারদের জন্য অপরিহার্য, কারণ। ব্যাকএন্ডটি প্রায়শই পিএইচপি/জাভা/পাইথন/সি# স্ট্যাকের বিস্তৃত পরিসরে লেখা হয় এবং সবকিছু ইনস্টল এবং স্থাপন করার জন্য সামনের অংশটিকে প্রতিবার পিছনের দিকে বিভ্রান্ত করার প্রয়োজন হয় না। শুধুমাত্র একটি জায়গায় আমি স্বচ্ছ স্থাপনার সাথে ডকার-জেনকিন্সের একগুচ্ছ দেখেছি, লগগুলি, অটোটেস্টের সাথে স্ক্রু করা হয়েছে।

ডকার সম্পর্কে অনেক বিস্তারিত নিবন্ধ লেখা হয়েছে। এই নিবন্ধটি VueJS / Vue রাউটার ব্যবহার করে একটি একক পৃষ্ঠা অ্যাপ্লিকেশন স্থাপনের উপর ফোকাস করবে, NodeJS এর ​​সাথে একটি RESTful API আকারে সার্ভার অংশ, এবং MongoDB একটি ডাটাবেস হিসাবে ব্যবহৃত হয়। ডকার কম্পোজ একাধিক ধারক অ্যাপ্লিকেশন বর্ণনা এবং চালানোর জন্য ব্যবহৃত হয়।

কেন আপনি ডকার প্রয়োজন

ডকার আপনাকে একটি অ্যাপ্লিকেশন স্থাপনের প্রক্রিয়া স্বয়ংক্রিয় করতে দেয়। বিকাশকারীকে আর তার নিজের থেকে প্রোগ্রামগুলি ইনস্টল করতে হবে না, তার মেশিনে সংস্করণের অসঙ্গতি মোকাবেলা করতে হবে। ডকার ইনস্টল করা এবং কনসোলে 1-2 কমান্ড টাইপ করা যথেষ্ট। লিনাক্সে এটি করা সবচেয়ে সুবিধাজনক।

শুরু হচ্ছে

ইনস্টল করুন ডকশ্রমিক এবং ডকার রচনা

ফোল্ডার গঠন

আমরা ক্লায়েন্ট এবং সার্ভার অ্যাপ্লিকেশনের জন্য 2টি ফোল্ডার তৈরি করি। .yml এক্সটেনশন সহ একটি ফাইল একটি কনফিগারেশন ডকার রচনাযেখানে অ্যাপ্লিকেশন কন্টেইনারগুলি সংজ্ঞায়িত এবং লিঙ্ক করা হয়।
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

আমরা ডকারে 3টি পরিষেবা তৈরি করি: NodeJS, MongoDB এবং Vue-তে স্ট্যাটিক্সের জন্য। ক্লায়েন্টকে সার্ভারের সাথে সংযুক্ত করতে সার্ভারের উপর নির্ভর করে. সার্ভার API এর সাথে MongoDB লিঙ্ক করতে, ব্যবহার করুন লিঙ্ক মঙ্গো. সার্ভার, ক্লায়েন্ট, মঙ্গো এসব সার্ভিসের নাম।

VueJS ক্লায়েন্ট

ফোল্ডারে /ক্লায়েন্ট অ্যাপ্লিকেশনটি VueJS-এ অবস্থিত। দিয়ে অ্যাপ্লিকেশন তৈরি করা হয়েছে vue cli. একটি ইমেজ তৈরি করার সময়, ক্লায়েন্ট অ্যাপ্লিকেশনটি একটি ফোল্ডারে স্ট্যাটিক ফাইলগুলির একটি সেটে তৈরি করা হয় /জেলা. ডকারফাইল একটি চিত্র নির্মাণের জন্য কমান্ডের একটি সেট বর্ণনা করে:

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

নোট করুন যে package.json প্রকল্পের বাকি ফাইলগুলি থেকে আলাদাভাবে অনুলিপি এবং ইনস্টল করা হয়েছে। এটি কর্মক্ষমতার জন্য করা হয় যাতে /node_modules ফোল্ডারের বিষয়বস্তু পুনঃনির্মাণে ক্যাশে করা হয়। প্রতিটি কমান্ড লাইন আলাদাভাবে ক্যাশে করা হয়।

শেষে, যখন ধারকটি শুরু করা হয়, কমান্ডটি কার্যকর করা হয় npm run dev. এই কমান্ডটি package.json এ বর্ণনা করা হয়েছে:

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

একটি ফোল্ডার থেকে ফাইল চালানোর জন্য /জেলা, বিশ্বব্যাপী সেট http-server, এবং dev-নির্ভরতা প্যাকেজে spa-http-serverVue রাউটার সঠিকভাবে কাজ করতে। --push-state পতাকা index.html এ পুনঃনির্দেশিত হয়। 1 সেকেন্ডের মান সহ -c পতাকা যোগ করা হয়েছে http-সার্ভার স্ক্রিপ্ট ক্যাশে না. এটি একটি পরীক্ষার উদাহরণ, একটি বাস্তব প্রকল্পে এটি nginx ব্যবহার করা ভাল।

Vuex দোকানে একটি ক্ষেত্র তৈরি করুন apiHost: 'http://localhost:3000', যেখানে NodeJS Api পোর্ট লেখা আছে। ক্লায়েন্ট অংশ প্রস্তুত. এখন ক্লায়েন্ট থেকে পিছনের প্রান্তে সমস্ত অনুরোধ এই url এ যান।

নোডজেএস সার্ভার API

ফোল্ডারে /server সৃষ্টি server.js এবং ডকারফাইল:

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

В server.js জ্ঞাপিত URL ডাটাবেসের জন্য const url = 'mongodb://mongo:27017/';. আমরা ক্লায়েন্ট থেকে ক্রস-ডোমেন অনুরোধের অনুমতি দিই:

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

উপসংহার

এখন প্রজেক্ট ডিরেক্টরিতে যান এবং রান করুন docker-compose build ইমেজ করার জন্য এবং docker-compose up পাত্র চালানোর জন্য। কমান্ডটি 3টি পাত্রে উত্তোলন করবে: সার্ভার, ক্লায়েন্ট, মঙ্গো. একটি NodeJS সার্ভারের জন্য, আপনি ব্যবহারকারী ফোল্ডারে লিঙ্ক করে হট-রিলোড কনফিগার করতে পারেন। এবং ক্লায়েন্ট হট রিলোড সহ স্থানীয়ভাবে চালানোর জন্য, আলাদাভাবে চালানোর জন্য বিকাশের অধীনে রয়েছে সার্ভার и মোঙ্গো. একটি পৃথক পরিষেবা শুরু করতে, শুধু এর নাম উল্লেখ করুন৷ docker-compose up client. মাঝে মাঝে এটা করতে ভুলবেন না prune এবং রিসোর্স খালি করার জন্য কন্টেইনার (কন্টেইনার), নেটওয়ার্ক (নেটওয়ার্ক) এবং ছবি (ছবি) অপসারণ করা।

আপনি সম্পূর্ণ কোড দেখতে পারেন এখানে. প্রকল্পটি এখনও উন্নয়নাধীন।

উত্স: www.habr.com