[](https://res.cloudinary.com/practicaldev/image/fetch/s--lH4VlGhQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/coq9wx13z1tao0p4kfq0.png)

在本文中,我将向您解释如何对 Mean Stack App 进行 dockerize。从在本地安装 Docker 到使用 docker compose 构建 Docker 映像并使用这些映像在容器中运行我们的平均堆栈应用程序的逐步过程。

我已经编写了Customer Store Mean Stack 应用程序,它在某个时候对 Customer 模型执行简单的基本 CRUD(创建、读取、更新、删除)操作,我将在这里进行 dockerizing。

如果你对 Docker 有一些基本的了解,或者刚刚听说过它并想学习如何对 Mean Stack 应用程序进行 docker 化,那么这篇文章就是为你准备的。

什么是 Docker?

简而言之,Docker 是一个开源 DevOps 工具,旨在帮助开发人员和运维人员简化应用程序的开发和部署。

将应用程序 docker 化意味着使用容器部署和运行应用程序。

容器允许开发人员将应用程序与其所需的所有部分(例如库和其他依赖项)打包在一起,并将其部署为一个包。

通过这样做,应用程序可以部署在任何目标环境/机器上,而不管机器可能具有的任何自定义设置可能与用于编写和测试代码的机器不同。

从而消除由于各种环境规格不匹配而发生的部署问题。

要了解更多关于 docker checkout 这个链接。

先决条件

• 首先,我们需要在我们的机器上安装 docker,以便我们可以构建 docker 映像并运行 docker 容器。 Mac 和 Windows 有不同的安装方式。对于 Windows 10 专业版和企业版,从这个链接安装 docker for desktop 但是如果你有像我一样的 Windows 10 家庭版,那么你将不得不从这个链接安装 Docker Toolbox。下载适当的安装程序并按照说明进行操作。

• 我们还需要在 Docker Hub 注册表中拥有帐户,以便我们可以拉取和推送 Docker 镜像。它是免费的,所以如果您还没有,请查看此链接为自己创建一个。

• 最后,我们需要要 dockerize 的 Mean Stack 应用程序。因此,如果您已经拥有一个很棒的软件,但如果您没有,那么您可以从我的 GitHub 存储库中的链接获取我在本文中使用的 Customer Store Mean Stack 应用程序代码。

启动Docker机器

Docker 机器是一个托管 Docker 引擎的小型 Linux VM,它是一个客户端-服务器应用程序,由 Docker 守护程序和 Docker CLI 组成,它与 Docker 守护程序交互以创建 Docker 映像或运行容器等。

• 如果您在安装完成时安装了 Docker Desktop for Window 或 Mac,Docker Machine 会自动启动。通知区域中的鲸鱼图像表明 Docker 正在运行,并且可以从终端访问。

• 如果您已经安装了 Docker Toolbox,那么有 2 种方法可以在本地创建 docker 机器。

• 通过双击桌面上的 docker 快速启动终端图标。

• 使用 docker-machine CLI “create” 命令创建新的 Docker 机器。

由于我安装了 Docker Toolbox,所以我将选择简单的方法并单击快速启动终端图标,该图标将打开终端并为我启动 Docker 机器。

[泊坞窗](https://res.cloudinary.com/practicaldev/image/fetch/s--Ga-p5V_c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //dev-to-uploads.s3.amazonaws.com/i/zuxyweqj922921zgr8cf.png)

您可以运行以下 docker-machine CLI 命令来检查 Docker 机器详细信息,并记下我们将用于在浏览器中打开平均堆栈应用程序的 URL。

$ docker-machine ls

您可以使用 docker-machine CLI 命令执行更多操作,例如创建、杀死、启动、停止 Docker 机器等等,但这不在本文的范围内,但是您可以查看docker.com以获取有关 docker 的完整文档-machine CLI 以及 docker CLI。

从现在开始,我们的 Docker 设置已经启动并运行,我们将专注于对我们的 Mean Stack 应用程序进行 docker 化。

我们的方法

在我们进一步讨论之前,我需要解释一下 Mean Stack 应用程序的结构以及我们将其 dockerize 的方法。平均堆栈应用程序有 3 个组件。

• 客户端 – 用 Angular 编写并为后端提供用户界面。

• Server – 这是基于 Express 框架构建的 Restful API 服务器,用作在 MongoDB 数据库中查询和持久化数据的接口。

• MongoDB——用于存储数据的 NoSQL 数据库。

因此,当我们想到 dockerize Mean Stack 应用程序时,我们必须对这些组件进行 dockerize 处理,或者构建这些组件的 Docker 映像(如果还没有)并由 docker-compose 工具使用,以从单个命令运行多容器应用程序。

开始...

根据我们的方法,我们将执行以下步骤来对接我们的平均堆栈应用程序。

1.为客户端和服务器分别创建Dockerfile。

2. 为我们的应用创建 docker-compose.yml 文件。

3. 使用 docker-compose.yml 文件构建 Docker 镜像。

4. 最后,使用 Docker Compose 工具运行 Mean Stack 应用程序。

那么让我们开始吧......

1\。创建 Dockerfile

首先,我们将在各自的文件夹中为我们的客户端和服务器创建 Dockerfile,这些文件夹将用于为这些组件创建 Docker 映像。

用于客户端的 Dockerfile

因此,在终端窗口中将目录更改为应用程序的客户端文件夹,并使用任何开发编辑器(如 VS Code)或仅使用记事本创建一个没有任何文件扩展名的文件名“Dockerfile”。

在 Dockerfile 中写入以下指令并保存。

# Step 1
FROM node:12-alpine as build-step
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build

# Step 2
FROM nginx:1.17.1-alpine
COPY --from=build-step app/dist/client /usr/share/nginx/html 

说明

• 在第 1 阶段,我们将客户端代码复制到“app”文件夹中,并从 package.json 文件安装客户端依赖项,并使用 Node 映像创建生产版本。

• 在第 2 阶段,我们使用 nginx 服务器映像创建 nginx 服务器并通过将构建项目从 /app/dist/client 文件夹复制到位于 /usr/share/nginx/html 位置的 nginx 服务器来在其上部署我们的客户端。

为客户端创建 .dockerignore 文件

虽然没有必要拥有这个文件,但拥有它是一个好习惯,因为它可以加快映像构建过程,还可以通过从 Docker 构建上下文中排除不必要的代码来保持映像精简,这样它就不会进入映像.

因此,就像我们在同一位置创建 Dockerfile 一样,我们创建 .dockerignore 文件并添加以下我们不想复制到 docker 映像中的项目。

/node_modules
/e2e
.gitignore 

服务器的 Dockerfile

现在在终端窗口中将目录更改为您的应用程序的服务器文件夹(在我的情况下,它是应用程序的根文件夹)并创建另一个我们为客户端创建的“Dockerfile”。

在 Dockerfile 中写入以下指令并保存。

FROM node:12-alpine as build-step
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD ["node","server.js"]

说明

在这里,我们将服务器代码复制到“app”文件夹中,并从 package.json 文件中安装服务器依赖项,并使用 Node 映像创建生产版本。最后我们指示在容器运行时运行服务器。

为服务器创建 .dockerignore 文件

就像我们为客户端所做的那样,创建 .dockerignore 文件并添加以下我们不想复制到我们的 docker 映像中的项目。

.git
client
node_modules
.gitignore
*.md

请注意,我已包含客户端文件夹,因为如果我的应用程序的根文件夹包含服务器代码和客户端文件夹,因此当我构建服务器映像时,我想从中排除客户端代码。

如果您在应用程序的根文件夹中有用于客户端和服务器代码的单独文件夹,则无需在 .dockerignore 文件中添加客户端。

2\。创建 docker-compose.yml 文件

Mean Stack 应用程序在多容器设置中运行,因为它有多个组件,正如我们之前讨论的,我们使用 Docker Compose 工具创建一个 Docker 镜像,从单个命令中分离出多个容器。

使用 Docker Compose 工具,我们将应用程序的所有组件定义为 docker-compose.yml 文件中的服务,并为每个组件构建 Docker 映像(如果不可用)。

要了解有关 Docker Compose 的更多信息,请查看此链接。

因此,在终端窗口中将目录更改为应用程序的根文件夹并创建 docker-compose.yml 文件。

在 docker-compose.yml 中写入以下指令并保存。

version: '3.7'
services:
  mongo-db:
    image: mongo
    ports:
      - '27017:27017'

  server:
    build: .
    image: sanjaysaini2000/meanstack_backend
    ports:
      - '3000:3000'
    links:
      - mongo-db

  client:
    build: client
    image: sanjaysaini2000/meanstack_frontend
    ports:
      - '80:80'

说明

我们从 docker-compose 文件的版本开始,然后是我们定义应用程序所有组件的服务部分。

首先,我们使用官方 mongo 镜像定义了 mongo-db 服务,该镜像将从 Docker Hub 中提取,并将用于运行容器以及服务器可以访问服务的端口。

接下来,我们通过将构建上下文提供为点来定义服务器,因为我们的服务器代码和 Dockerfile 位于当前文件夹中。我们还提供将要构建的图像名称(适当更改)以及客户端可以访问服务器的端口。

我们还将此服务与 mongo-db 服务相关联,因为服务器容器将访问单独的 mongo-db 容器中的 MongoDB 数据库

最后,我们通过提供构建上下文作为包含客户端代码和 Dockerfile 的客户端文件夹来定义客户端。我们还提供将要构建的映像名称(适当更改)以及主机可以访问客户端的端口。

代码更改

需要在将连接字符串设置为 mondoDB 的服务器中进行小的代码更改。

当我们运行 dockerize 应用程序时,每个组件都将在单独的容器中运行,因此服务器容器将访问托管在 mongo-db 容器中的 mongoDB,因此我们需要将连接字符串中的 localhost 替换为代码中的 mongo-db。

mongodb://mongo-db:27017/

3\。构建 Docker 镜像

现在运行 docker-compose build 命令来构建我们刚刚创建的 compose 文件中定义的服务的 Docker 镜像。

$ docker-compose build

[](https://res.cloudinary.com/practicaldev/image/fetch/s--fYvzkPuc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/ https://dev-to-uploads.s3.amazonaws.com/i/20rxmoo3eytojavlt47i.png)

此过程需要一些时间才能完成,最后您将获得成功的消息,其中包含我们在撰写文件中定义的客户端和服务器服务的图像标签名称。

请注意,跳过 mongo-db 服务的过程,因为我们在撰写文件中使用了已经构建的官方图像。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--pu-9HfoF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/3snu8hl5l6gwempc8y22.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--FM14Kp4g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/j77ev2ob5ww07yr71y3g.png)

构建过程完成后,您可以运行以下 Docker 命令来列出与客户端和服务器服务镜像一起创建的镜像。

您还将找到我们在应用程序的客户端和服务器组件的 Dockerfile 中使用的节点和 nginx 映像以及一个中间映像。但是,这些图像不是必需的,可以删除。

$ docker images

[](https://res.cloudinary.com/practicaldev/image/fetch/s--ugipjoj8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/um6j2dflgr6zso0dxlup.png)

4\。运行平均堆栈应用程序

最后在终端中运行以下命令,以分离模式在多容器设置中运行您的平均堆栈应用程序。

$ docker-compose up -d

[](https://res.cloudinary.com/practicaldev/image/fetch/s--pPcipPe8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/n5tskotfk7o61szexwak.png)

从上面的屏幕截图中可以看出,基本上这个命令将在后台分离容器。它为我们在 compose 文件中定义的三个服务分别运行容器。

现在打开浏览器并在地址栏中输入 URL http://<docker machine url>:80。

就我而言,它是http://192.168.99.100:80

恭喜......您已经成功地将 Mean Stack 应用程序 dockerize 并托管在一个多容器设置中。

[泊坞窗](https://res.cloudinary.com/practicaldev/image/fetch/s--JEUEELEf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/i/3vmb9vo8pzekycigo7oq.png)

要关闭应用程序并删除容器,请运行以下命令。

docker-compose down

如果您已经安装了 Docker 并且没有 Mean Stack 应用程序,或者只是想在不经历整个过程的情况下首先测试运行这个应用程序,那么您可以通过从我的 Docker Hub 注册表中从这个链接中提取图像来执行此操作有关如何在本地容器中运行此应用程序的详细信息。

继续阅读和学习......干杯!!!

帖子How to dockerize Mean Stack App?首次出现在Sanjay Saini 的 Tech World上。