نحوه بسته بندی برنامه VueJS + NodeJS + MongoDB در Docker

همانطور که از مقاله قبلی می بینید، من با پروژه های مختلفی کار کردم. روزهای اول در یک تیم جدید معمولاً به همین ترتیب است: پشتیبان پیش من می نشیند و مراحل جادویی را برای نصب و استقرار برنامه انجام می دهد. داکر برای توسعه دهندگان فرانت اند ضروری است، زیرا. پشتیبان اغلب در طیف وسیعی از پشته‌های PHP/Java/Python/C# نوشته می‌شود و نیازی نیست که قسمت جلویی هر بار برای نصب و استقرار همه چیز، حواس پشتی را پرت کند. فقط در یک جا من یک دسته از Docker-Jenkins را دیدم که دارای استقرار شفاف، سیاهههای مربوط به آزمایشات خودکار بودند.

مقالات مفصل زیادی در مورد docker نوشته شده است. این مقاله بر روی استقرار یک برنامه Single Page با استفاده از VueJS / Vue Router تمرکز خواهد کرد، بخش سرور به شکل یک API RESTful با NodeJS، و MongoDB به عنوان پایگاه داده استفاده می شود. Docker Compose برای توصیف و اجرای چندین برنامه کانتینر استفاده می شود.

چرا به داکر نیاز دارید؟

Docker به شما امکان می دهد فرآیند استقرار یک برنامه را خودکار کنید. توسعه‌دهنده دیگر نیازی به نصب برنامه‌ها به تنهایی ندارد، با ناسازگاری نسخه روی دستگاه خود مقابله می‌کند. کافی است Docker را نصب کنید و دستورات 1-2 را در کنسول تایپ کنید. انجام این کار در لینوکس راحت تر است.

شروع

نصب کارگر بارانداز و Docker آهنگسازی

ساختار پوشه

ما 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-dependencies spa-http-serverتا روتر Vue به درستی کار کند. پرچم --push-state به index.html هدایت می شود. پرچم -c با مقدار 1 ثانیه به آن اضافه شده است سرور http اسکریپت ها را کش نکرد. این یک نمونه آزمایشی است، در یک پروژه واقعی بهتر است از nginx استفاده کنید.

یک فیلد در فروشگاه Vuex ایجاد کنید apiHost: 'http://localhost:3000'، جایی که پورت NodeJS Api نوشته شده است. قسمت مشتری آماده است. اکنون تمام درخواست‌های مشتری به سمت عقب به این آدرس اینترنتی می‌روند.

NodeJS Server API

در پوشه /server ايجاد كردن server.js و داکرفایل:

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