Cách đóng gói ứng dụng VueJS + NodeJS + MongoDB trong Docker

Như bạn có thể hiểu từ bài viết trước, tôi đã làm việc trên nhiều dự án khác nhau. Những ngày đầu tiên trong một nhóm mới thường diễn ra theo cùng một cách: người hỗ trợ ngồi xuống với tôi và thực hiện các hành động kỳ diệu để cài đặt và triển khai ứng dụng. Docker không thể thiếu đối với các nhà phát triển front-end vì... Phần phụ trợ thường được viết bằng nhiều loại ngăn xếp PHP/Java/Python/C# và mặt trước không cần phải làm phân tán phần phụ trợ mỗi khi cài đặt và triển khai mọi thứ. Chỉ ở một nơi tôi mới thấy sự kết hợp Docker-Jenkins với quá trình triển khai, nhật ký và kiểm tra tự động minh bạch.

Nhiều bài viết chi tiết đã được viết về Docker. Bài viết này sẽ nói về việc triển khai Ứng dụng một trang bằng VueJS/Vue Router, phần máy chủ ở dạng RESTful API với NodeJS và MongoDB được sử dụng làm cơ sở dữ liệu. Docker Compose được sử dụng để xác định và chạy nhiều ứng dụng vùng chứa.

Tại sao cần Docker

Docker cho phép bạn tự động hóa quá trình triển khai một ứng dụng. Nhà phát triển không cần phải tự cài đặt chương trình hoặc xử lý vấn đề không tương thích phiên bản trên máy của mình nữa. Tất cả những gì bạn cần làm là cài đặt Docker và gõ 1-2 lệnh vào bảng điều khiển. Cách thuận tiện nhất để thực hiện việc này là trên Linux.

Bắt đầu

Đặt phu bến tàu và docker soạn

cấu trúc thư mục

Chúng ta tạo 2 thư mục cho ứng dụng client và server. Một tệp có phần mở rộng .yml là một cấu hình Docker Soạn, nơi các thùng chứa ứng dụng được xác định và liên kết.
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

Chúng tôi tạo 3 dịch vụ trong Docker: cho NodeJS, MongoDB và cho các dịch vụ tĩnh trong Vue. Đã thêm để kết nối máy khách với máy chủ phụ thuộc vào máy chủ. Để liên kết MongoDB với API máy chủ, hãy sử dụng liên kết mongo. Máy chủ, máy khách, mongo - tên của dịch vụ.

Máy khách VueJS

Trong thư mục /khách hàng Ứng dụng này dựa trên VueJS. Ứng dụng này được tạo bằng cách sử dụng Vue Cli. Khi xây dựng image, ứng dụng khách được tích hợp thành một tập hợp các tệp tĩnh trong thư mục /quận. Dockerfile mô tả một tập hợp các lệnh để xây dựng hình ảnh:

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

Xin lưu ý rằng pack.json được sao chép và cài đặt riêng biệt với các tệp dự án còn lại. Điều này được thực hiện để đảm bảo hiệu suất, sao cho nội dung của thư mục /node_modules được lưu vào bộ đệm khi xây dựng lại. Mỗi dòng lệnh được lưu trữ riêng biệt.

Cuối cùng, khi container khởi động, lệnh được thực thi npm run dev. Lệnh này được mô tả trong pack.json:

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

Để chạy tập tin từ một thư mục /quận, được cài đặt trên toàn cầu http-servervà trong gói phụ thuộc dev spa-http-serverđể Vue Router hoạt động chính xác. Cờ --push-state chuyển hướng đến index.html. Cờ -c có giá trị 1 giây đã được thêm vào máy chủ http không lưu trữ tập lệnh. Đây là một ví dụ thử nghiệm; trên một dự án thực tế, tốt hơn nên sử dụng nginx.

Trong cửa hàng Vuex, chúng tôi tạo một trường apiHost: 'http://localhost:3000', nơi cổng NodeJS Api được đăng ký. Phần khách hàng đã sẵn sàng. Bây giờ tất cả các yêu cầu từ khách hàng trở lại đều chuyển đến url này.

API máy chủ NodeJS

Trong thư mục /server tạo nên máy chủ.js và Dockerfile:

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

В máy chủ.js chỉ ra url cho cơ sở dữ liệu const url = 'mongodb://mongo:27017/';. Cho phép yêu cầu tên miền chéo từ máy khách:

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

Kết luận

Bây giờ hãy vào thư mục dự án và chạy docker-compose build để xây dựng hình ảnh và docker-compose up để chạy container. Đội sẽ nâng được 3 container: máy chủ, máy khách, mongo. Đối với máy chủ NodeJS, bạn có thể định cấu hình tải lại nóng bằng cách liên kết nó với thư mục người dùng. Và ứng dụng khách đang được phát triển phải được khởi chạy cục bộ bằng tính năng tải lại nóng, chạy riêng máy chủ и mongo. Để bắt đầu một dịch vụ riêng biệt, chỉ cần chỉ định tên của nó docker-compose up client. Đừng quên làm điều đó đôi khi prune và xóa các vùng chứa, mạng và hình ảnh để giải phóng tài nguyên.

Bạn có thể xem mã đầy đủ đây. Dự án vẫn đang được phát triển.

Nguồn: www.habr.com