כיצד לארוז יישום VueJS + NodeJS + MongoDB ב-Docker

כפי שניתן לראות מהמאמר הקודם, עבדתי עם פרויקטים שונים. הימים הראשונים בצוות חדש בדרך כלל מתנהלים באותו אופן: מפתח ה-back-end יושב איתי ומבצע פעולות קסומות כדי להתקין ולפרוס את האפליקציה. Docker הוא הכרחי עבור מפתחי front-end, מכיוון שה-back-end כתוב לעתים קרובות על מגוון רחב של stacks PHP/Java/Python/C# וה-front-end לא צריך להסיח את דעתו של מפתח ה-back-end בכל פעם כדי להתקין ולפרוס הכל. רק במקום אחד ראיתי חבילת Docker-Jenkins עם פריסה שקופה, יומני רישום ובדיקות אוטומטיות מצורפות.

ישנם מאמרים מפורטים רבים על Docker. מאמר זה ידון בפריסה של אפליקציית Single Page באמצעות VueJS/Vue Router, חלק השרת הוא RESTful API עם NodeJS, ו-MongoDB משמש כבסיס נתונים. Docker Compose משמש לתיאור והפעלת יישומי קונטיינרים מרובים.

למה אתה צריך את דוקר?

Докер позволяет автоматизировать процесс разворачивания приложения. Разработчику больше не нужно самостоятельно устанавливать программы, бороться с несовместимостью версий на своей машине. Достаточно установить Докер и вбить 1-2 команды в консоль. Удобнее всего делать это на Linux.

תחילת עבודה

להתקין סַוָר ו דוקר מלחין

מבנה תיקיות

צור 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 שירותים ב-Docker: עבור 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, ובתלויות מפתח החבילה spa-http-server, כדי ש-Vue Router יפעל כראוי. הדגל --push-state מבצע הפניה מחדש אל index.html. הדגל -c עם ערך של שנייה אחת נוסף כך ש שרת http לא שמרנו סקריפטים במטמון. זוהי דוגמת בדיקה, בפרויקט אמיתי עדיף להשתמש ב-nginx.

בחנות Vuex אנו יוצרים שדה apiHost: 'http://localhost:3000', שם רשום פורט NodeJS Api. חלק הלקוח מוכן. כעת כל הבקשות מהלקוח מאחור עוברות לכתובת URL זו.

API של שרת NodeJS

בתיקייה /server אנחנו יוצרים server.js ו-Dockerfile:

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

В server.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 מכולות: שרת, לקוח, מונגועבור שרת NodeJS, ניתן להגדיר טעינה חמה על ידי קישורו לתיקיית המשתמש. וניתן להפעיל את הלקוח בשלב הפיתוח באופן מקומי באמצעות טעינה חמה, המופעל בנפרד. שרת и מונגוכדי להפעיל שירות נפרד, פשוט ציין את שמו docker-compose up clientאל תשכח לעשות את זה לפעמים. prune והסרת מכולות, רשתות ותמונות כדי לפנות משאבים.

ניתן לצפות בקוד המלא כאןהפרויקט עדיין בשלבי פיתוח.

מקור: www.habr.com