主持人 > 博客 > 管理 > 如何在 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 删除容器、网络和镜像以释放资源。

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

来源： habr.com

添加评论