主持人 > 博客 > 管理 > 如何在 Docker 中打包 VueJS + NodeJS + MongoDB 應用程式

如何在 Docker 中打包 VueJS + NodeJS + MongoDB 應用程式

如何在 Docker 中打包 VueJS + NodeJS + MongoDB 應用程式
正如您從上一篇文章中可以了解的，我從事過不同的專案。 新團隊的第一天通常都是這樣：後端人員與我坐在一起，執行神奇的操作來安裝和部署應用程式。 Docker 對於前端開發人員來說是不可或缺的，因為… 後端通常是用各種 PHP/Java/Python/C# 堆疊編寫的，前端不必每次都分散後端的注意力來安裝和部署所有內容。 我只在一個地方看到了 Docker-Jenkins 與透明部署、日誌和自動化測試的組合。

關於 Docker 已經寫了很多詳細的文章。 本文將討論使用 VueJS/Vue Router 部署單一頁面應用程序，伺服器部分採用 NodeJS 的 RESTful API 形式，並使用 MongoDB 作為資料庫。 Docker Compose 用於定義和執行多個容器應用程式。

為什麼需要 Docker

Docker 可讓您自動化部署應用程式的流程。 開發人員不再需要自己安裝程式或處理機器上的版本不相容問題。 您所需要做的就是安裝 Docker 並在控制台中輸入 1-2 個命令。 最方便的方法是在 Linux 上。

入門

安裝 碼頭工人 和 碼頭工人組成

文件夾結構

我們為客戶端和伺服器應用程式建立 2 個資料夾。 擴展名為 .yml 的檔案是一個設定文件 Docker撰寫，其中定義並關聯應用程式容器。
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 鏈接，請使用 連結蒙戈。 伺服器、客戶端、mongo - 服務名稱。

VueJS 用戶端

在文件夾中 /客戶 該應用程式基於 VueJS。 該應用程式是使用創建的 Vue客戶端。 建構鏡像時，客戶端應用程式被建構到資料夾中的一組靜態檔案中 / 距離。 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。 添加了值為 1 秒的 -c 標誌 http伺服器 沒有快取腳本。 這是一個測試範例；在實際專案中最好使用 nginx。

在 Vuex 商店中我們建立一個字段 apiHost: 'http://localhost:3000'，NodeJS Api 連接埠已註冊。 客戶端部分已經準備好了。 現在所有從客戶端到後面的請求都會走這個url。

NodeJS 伺服器 API

在文件夾中 /server 創造 服務器.js 和 Dockerfile： 


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 個貨櫃： 伺服器、客戶端、蒙戈。 對於 NodeJS 伺服器，您可以透過將其連結到使用者資料夾來配置熱重載。 並且正在開發的客戶端應該透過熱重載本地啟動，單獨運行 服務器 и 蒙戈。 要啟動單獨的服務，只需指定其名稱 docker-compose up client。 有時別忘記這樣做 prune 刪除容器、網路和鏡像以釋放資源。

你可以看到完整的程式碼 這裡。 該項目仍在開發中。

來源： www.habr.com

添加評論