ڈوکر میں VueJS + NodeJS + MongoDB ایپلیکیشن کو کیسے پیک کیا جائے۔

جیسا کہ آپ پچھلے مضمون سے سمجھ سکتے ہیں، میں نے مختلف پروجیکٹس پر کام کیا۔ نئی ٹیم میں پہلے دن عام طور پر اسی طرح گزرتے ہیں: بیکینڈر میرے ساتھ بیٹھتا ہے اور ایپلیکیشن کو انسٹال کرنے اور اسے لگانے کے لیے جادوئی حرکتیں کرتا ہے۔ ڈوکر فرنٹ اینڈ ڈویلپرز کے لیے ناگزیر ہے کیونکہ... بیک اینڈ اکثر PHP/Java/Python/C# اسٹیک کی ایک وسیع رینج میں لکھا جاتا ہے، اور فرنٹ کو ہر بار ہر چیز کو انسٹال کرنے اور تعینات کرنے کے لیے بیک اینڈ کو ہٹانے کی ضرورت نہیں ہوتی ہے۔ صرف ایک جگہ میں نے شفاف تعیناتی، لاگز اور خودکار ٹیسٹ کے ساتھ Docker-Jenkins کا مجموعہ دیکھا۔

ڈوکر کے بارے میں بہت سے تفصیلی مضامین لکھے جا چکے ہیں۔ یہ مضمون VueJS/Vue Router کا استعمال کرتے ہوئے سنگل پیج ایپلیکیشن کی تعیناتی کے بارے میں بات کرے گا، سرور کا حصہ NodeJS کے ساتھ RESTful API کی شکل میں ہے، اور MongoDB کو ڈیٹا بیس کے طور پر استعمال کیا جاتا ہے۔ ڈوکر کمپوز کا استعمال متعدد کنٹینر ایپلی کیشنز کی وضاحت اور چلانے کے لیے کیا جاتا ہے۔

ڈوکر کی ضرورت کیوں ہے۔

ڈوکر آپ کو ایپلیکیشن کی تعیناتی کے عمل کو خودکار کرنے کی اجازت دیتا ہے۔ ڈویلپر کو اب خود پروگرام انسٹال کرنے یا اپنی مشین پر ورژن کی عدم مطابقت سے نمٹنے کی ضرورت نہیں ہے۔ آپ کو بس ڈوکر انسٹال کرنے اور کنسول میں 1-2 کمانڈز ٹائپ کرنے کی ضرورت ہے۔ ایسا کرنے کا سب سے آسان طریقہ لینکس پر ہے۔

شروع

انسٹال کریں۔ میں Docker اور ڈوکر کمپوز

فولڈر کا ڈھانچہ

ہم کلائنٹ اور سرور ایپلی کیشنز کے لیے 2 فولڈر بناتے ہیں۔ .yml ایکسٹینشن والی فائل ایک کنفیگریشن ہے۔ Docker Compose، جہاں ایپلیکیشن کنٹینرز کی وضاحت اور منسلک ہیں۔
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 میں 3 سروسز بناتے ہیں: NodeJS، MongoDB اور Vue میں جامد کے لیے۔ کلائنٹ کو سرور سے مربوط کرنے کے لیے شامل کیا گیا۔ سرور پر منحصر ہے. MongoDB کو سرور API کے ساتھ لنک کرنے کے لیے، استعمال کریں۔ لنکس منگو. سرور، کلائنٹ، منگو - خدمات کے نام۔

VueJS کلائنٹ

فولڈر میں /کلائنٹ درخواست VueJS پر مبنی ہے۔ ایپلی کیشن کو استعمال کرتے ہوئے بنایا گیا تھا۔ ویو کلی. تصویر بناتے وقت، کلائنٹ ایپلیکیشن فولڈر میں جامد فائلوں کے سیٹ میں بنتی ہے۔ /ضلع. Dockerfile تصویر بنانے کے لیے کمانڈز کا ایک سیٹ بیان کرتا ہے:

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-serverتاکہ Vue راؤٹر صحیح طریقے سے کام کرے۔ --push-state پرچم index.html پر ری ڈائریکٹ ہوتا ہے۔ 1 سیکنڈ کی قدر کے ساتھ -c جھنڈا شامل کیا گیا تھا۔ HTTP سرور اسکرپٹ کو کیش نہیں کیا۔ یہ ایک آزمائشی مثال ہے؛ ایک حقیقی پروجیکٹ پر nginx استعمال کرنا بہتر ہے۔

ویویکس اسٹور میں ہم ایک فیلڈ بناتے ہیں۔ apiHost: 'http://localhost:3000'جہاں NodeJS Api پورٹ رجسٹرڈ ہے۔ کلائنٹ کا حصہ تیار ہے۔ اب کلائنٹ کی طرف سے پیچھے کی تمام درخواستیں اس یو آر ایل پر جاتی ہیں۔

نوڈ جے ایس سرور API

فولڈر میں /server بنانا سرور.js اور ڈاکر فائل:

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

В سرور.js اشارہ کیا یو آر ایل ڈیٹا بیس کے لیے 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 کنٹینرز اٹھائے گی: سرور، کلائنٹ، منگو. نوڈ جے ایس سرور کے لیے، آپ ہاٹ ری لوڈ کو صارف کے فولڈر سے جوڑ کر ترتیب دے سکتے ہیں۔ اور ڈیولپمنٹ کے تحت کلائنٹ کو مقامی طور پر گرم دوبارہ لوڈ کے ساتھ شروع کیا جانا چاہئے، الگ سے چل رہا ہے۔ سرور и کے mongo. ایک علیحدہ سروس شروع کرنے کے لیے، صرف اس کا نام بتائیں docker-compose up client. کبھی کبھی ایسا کرنا نہ بھولیں۔ prune اور وسائل کو خالی کرنے کے لیے کنٹینرز، نیٹ ورکس اور تصاویر کو حذف کرنا۔

آپ مکمل کوڈ دیکھ سکتے ہیں۔ یہاں. یہ منصوبہ ابھی تک ترقی کے مراحل میں ہے۔

ماخذ: www.habr.com