如何收拾VueJS + +的NodeJS应用的MongoDB泊坞

从上一篇文章中可以看到，我处理了不同的项目。 新团队的第一天通常是相同的：bekender坐在我旁边，表演魔术步骤来安装和deployu应用。 泊坞窗是frontenderov因为必不可少 后端往往是写在各种各样栈PHP / Java的/ Python的/ C＃和分心贝克每一次，所有的设置和部署前面是没有必要的。 只在一个地方，我看到一帮码头工人，詹金斯与透明deploem，原木，拧的自动测试。

关于搬运工写了很多详细的文章。 本文将讨论使用VueJS / Vue路由器部署单页应用程序，将服务器部分作为带有NodeJS的RESTful API以及将MongoDB用作数据库的部署。 为了描述和运行多个应用程序，容器使用泊坞撰写。

为什么我需要多克

Docker允许您自动化部署应用程序的过程。 开发者不再需要自己设定的程序来处理你的机器上不兼容的版本。 只需安装多克尔和驱动1-2队在控制台中。 最方便的方式来做到这一点在Linux上。

开始使用

安装Docker和Docker compose

资料夹结构

我们为客户端和服务器应用程序创建2个文件夹。 扩展名为.yml的文件是Docker Compose配置，其中定义和链接了应用程序容器。
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的静态函数。 到客户端添加的服务器关联依赖于服务器。 链接mongo用于将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 Router可以正常工作。 旗-push状态确实重定向的index.html。 将添加值为1秒的-c标志，以便http服务器不缓存脚本。 这是一个测试案例的真实的项目是更好地使用nginx的。

在Vuex商店产生一个电场apiHost: 'http://localhost:3000'其被规定端口的NodeJS API。 客户端部分已准备就绪。 现在，从客户端到后台的所有请求都将转到该URL。

NodeJS服务器API

在/server文件夹中，创建server.js和Dockerfile：

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

在指定的server.js URL数据库const url = 'mongodb://mongo:27017/'; ： 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)); }); -Origin'，clientUrl）; 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)); }); -headers'， 'X-请求-随着'）; 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)); }); （corsOptions），（REQ，RES）=> { 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)); }); ），ERR => res.json（ERR））; 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 build来启动容器。 命令提高容器3： 服务器，客户端，蒙戈。 服务器可经配置以热的NodeJS重装，它与用户文件夹相关联。 客户端正在开发中，可通过热重载在本地运行，分别运行server和mongo 。 要启动一个单独的服务，足以标明品名docker-compose up client 。 不要忘了偶尔做prune ，并去除容器（集装箱），网络（网络）和图片（图片），以释放资源。

完整的代码可以在这里找到。 该项目仍在开发中。