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

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

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

למה צריך Docker

Docker מאפשר לך להפוך את תהליך פריסת היישום לאוטומטי. המפתח כבר לא צריך להתקין תוכניות בעצמו או להתמודד עם אי תאימות גרסאות במחשב שלו. כל מה שאתה צריך לעשות הוא להתקין את Docker ולהקליד 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 שירותים ב-Docker: עבור NodeJS, MongoDB ועבור סטטיים ב-Vue. נוסף לחיבור לקוח לשרת תלוי בשרת. כדי לקשר MongoDB עם API של השרת, השתמש קישורים מונגו. שרת, לקוח, מונגו - שמות שירותים.

לקוח VueJS

בתיקייה /לָקוּחַ האפליקציה מבוססת על VueJS. האפליקציה נוצרה באמצעות Vue Cli. בעת בניית תמונה, יישום הלקוח מובנה בתוך קבוצה של קבצים סטטיים בתיקייה / dist. ה-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"
}

כדי להפעיל קבצים מתיקיה / dist, מותקן ברחבי העולם http-server, ובתלות ב-dev החבילה spa-http-serverכך שנתב Vue יעבוד נכון. הדגל --push-state מפנה מחדש אל index.html. דגל -c עם ערך של שנייה אחת נוסף http- שרת לא שמר סקריפטים. זוהי דוגמה לבדיקה; בפרויקט אמיתי עדיף להשתמש ב-nginx.

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

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