容器化 MERN 堆栈 Web 应用程序

每日分享最新，最流行的软件开发知识与最新行业趋势，希望大家能够一键三连，多多支持，跪求关注，点赞，留言。

了解如何将整个 MERN Stack 应用程序 docker 化。

MERN 堆栈正变得越来越流行，并且可以成为一个强大的堆栈。因此，能够构建和部署良好的 MERN 应用程序，极大地有助于开发人员的职业前景。

什么是 MERN 堆栈？

MERN 堆栈是一个JavaScript堆栈，旨在使开发过程更加顺畅。MERN 包括四个开源组件：MongoDB、Express、React 和 Node.js。这些组件为开发人员提供了一个相关的端到端框架。

仔细观察 MERN 堆栈组件

MongoDB：一个跨平台的文档数据库

MongoDB是一个 NoSQL（非关系型）面向文档的数据库。数据使用基于 JSON（JavaScript 对象表示法）的查询语言存储在灵活的文档中。MongoDB 以灵活且易于扩展而著称。

Express：一个后端 Web 应用程序框架

Express是另一个 MERN 组件 Node.js 的 Web 应用程序框架。开发人员无需直接在 Node.js 上手动编写完整的 Web 服务器代码，而是使用 Express 来简化编写服务器代码的任务。

React：用于构建用户界面的 JavaScript 库

React最初是由 Facebook 的一名软件工程师创建的，后来开源了。React 库可用于创建以 HTML 呈现的视图。在某种程度上，它是堆栈的定义特征。

Node.JS：一个跨平台的 JavaScript 运行时环境

Node.js构建于 Chrome 的 V8 JavaScript 引擎之上。它旨在构建可扩展的网络应用程序，并且可以在浏览器之外执行 JavaScript 代码。

在了解Docker的实用性之前，让我们先了解一下容器。

什么是容器？

“容器是将代码及其所有依赖项打包在一起的标准软件单元，因此应用程序可以快速可靠地从一个计算环境运行到另一个计算环境。”

Docker容器镜像是一个轻量级的、独立的、可执行的软件包，其中包括运行应用程序所需的一切：代码、运行时、系统工具、系统库和设置。容器镜像在运行时成为容器，就 Docker 容器而言——镜像在Docker Engine上运行时成为容器。

泊坞枢纽

Docker Hub 是一个基于云的注册服务，用于存储和共享 Docker 镜像。它允许用户创建、管理和分发 Docker 镜像和容器，以及与其他工具和平台协作和集成。Docker Hub提供了一个用于共享和分发 Docker 映像和容器的中央存储库，以及一个用于与其他工具和服务协作和集成的平台。它使用户能够快速轻松地找到并拉取他们运行应用程序所需的镜像，并与他人共享他们自己的镜像。

集成入门

我们在本教程中的主要重点是了解如何将 Docker 与 MERN 堆栈应用程序集成。为了解释这一点，让我们尝试对电子商务 Web 应用程序进行 docker 化。

您可以从此 Github链接下载基本的电子商务 Web 应用程序。

概述

我们将把Node.JS、React和MongoDBDockerize到单独的容器中。然后我们将使用Docker Compose来运行多容器应用程序。

最后，通过一个命令，我们可以从我们的配置中创建并启动所有服务。

初始化项目

将 GitHub 存储库克隆到计算机上的本地文件夹。使用VSCode 或您选择的任何文本编辑器打开文件夹。

码头文件

现在，我们需要为服务器和客户端创建一个Dockerfile 。Dockerfile本质上包含构建镜像的构建指令。

让我们从为客户端（我们的 React 前端）创建 Dockerfile 开始。

1. 在客户端文件夹中，创建一个不带任何扩展名的文件Dockerfile
2. 在文件中写入以下代码行：

# Dockerfile for React client
# Build react client
FROM node:10.16-alpine
# Working directory be app
WORKDIR /usr/src/app
COPY package*.json ./
### Installing dependencies
RUN npm install --silent
# copy local files to app folder
COPY . .
EXPOSE 3000
CMD ["npm","start"]

我们可以简单地用这个命令构建我们的前端

docker build -t react-app .

为了验证一切正常，我们使用以下命令运行新建的容器：

docker run -p 3000:3000 react-app .

这将只运行前端。

以同样的方式，我们创建一个名为DockerfileBackendNode.JS Server的文件。

1. Dockerfile现在，我们为服务器创建一个目录。
2. 在文件中写入以下代码行：

# Dockerfile for Node Express Backend
FROM node:10.16-alpine
# Create App Directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install Dependencies
COPY package*.json ./
RUN npm install --silent
# Copy app source code
COPY . .
# Exports
EXPOSE 5000
CMD ["npm","start"]

我们可以简单地使用此命令构建我们的后端：

壳1个docker build -t节点应用程序。

码头工人组成

“Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。使用 Compose，您可以使用 YAML 文件来配置应用程序的服务。然后，只需一个命令，您就可以从您的配置中创建并启动所有服务。”

要一起运行我们的整个应用程序，即并行运行所有容器，我们需要配置docker-compose 文件。

1. 在项目的主目录中，（在服务器/客户端之外）创建一个名为docker-compose.yml
2. 将这些内容写入文件。

version: '3.7'
services:
server:
build:
context: ./server
dockerfile: Dockerfile
image: myapp-server
container_name: myapp-node-server
command: /usr/src/app/node_modules/.bin/nodemon server.js
volumes:
- ./server/:/usr/src/app
- /usr/src/app/node_modules
ports:
- "5000:5000"
depends_on:
- mongo
env_file: ./server/.env
environment:
- NODE_ENV=development
networks:
- app-network
mongo:
image: mongo
volumes:
- data-volume:/data/db
ports:
- "27017:27017"
networks:
- app-network
client:
build:
context: ./client
dockerfile: Dockerfile
image: myapp-client
container_name: myapp-react-client
command: npm start
volumes:
- ./client/:/usr/app
- /usr/app/node_modules
depends_on:
- server
ports:
- "3000:3000"
networks:
- app-network
networks:
app-network:
driver: bridge
volumes:
data-volume:
node_modules:
web-root:
driver: local

创建构建

要为整个应用程序创建构建，我们需要运行以下命令：

docker-compose build

启动服务

我们可以使用以下简单命令启动多容器系统：

docker-compose up

最后，我们可以打开http://localhost:3000 看到我们的 React Frontend。

后台服务器上线http://localhost:5000

MongoDB 正在运行http://localhost:27017

维护检查

我们可以使用以下命令检查正在运行的服务：

docker-compose ps

要转储所有正在运行的服务的日志，请使用以下命令：

docker-compose logs

停止容器

要停止所有服务，我们使用：

docker-compose stop

为了降低一切，完全删除容器，以及服务的数据量：

docker-compose down --volumes

最后，我们成功地对我们的电子商务 Web 应用程序进行了 docker 化。