🚀🚀🚀如何使用Docker Compose部署一个React+node服务

Docker Compose是一个强大的Docker工具，用于开发和运行多容器 Docker 化应用程序。Docker 是一个开源平台，用于在称为容器的隔离环境中开发和运行应用程序。容器是一个独立的可执行包，其中包含运行应用程序所需的库、源代码和依赖项。

使用 Docker Compose，您可以创建一个docker-compose.yml文件来将项目中的所有容器作为单个应用程序运行。该文件将包含所有容器配置，例如卷、容器名称和端口映射。它还指定用于构建 Docker 映像的 Dockerfile。

在本教程中，我们将使用 Node.js创建后端Express服务器。然后，我们将使用 React.js 创建一个前端应用程序并将其连接到后端服务器。

然后，我们将使用 Docker Compose 部署这两个应用程序。然后在浏览器上访问它们。

使用 Node.js 创建后端 Express 服务器

要使用 Node.js 创建 Express 服务器，请按照以下步骤操作：

步骤 1：创建一个名为docker-compose-app的工作目录并使用 VS Code 打开它。 在工作目录中，创建一个名为node的文件夹并cd进入node目录文件夹下。该目录将包含创建应用程序所需的库、源代码和依赖项。

步骤 2：使用以下代码初始化应用程序：

npm init --y

该命令将初始化应用程序并生成package.json文件。下一步是安装应用程序的所有依赖项，如下所示：

npm i -g nodemon
npm i express

在终端中运行命令后，它将安装express和nodemon. 我们将使用安装的express包来创建服务器。

我们将用来nodemon监控后端文件。Nodemon会检测后端文件的变化并自动重启服务器。

步骤 3：接下来，打开package.json文件配置以下npm脚本使nodemon开始工作：

"dev": "nodemon -L app.js"

第四步：在该node目录下新建一个文件，名为server.js. 该文件将包含创建后端服务器的逻辑。

步骤 5：将以下代码片段复制并粘贴到文件中server.js：

const express = require('express')
const cors = require('cors')

const app = express()

app.use(cors())

app.get('/', (req, res) => {
  res.json([
    {
      "id":"1",
      "title":"Album Review: When we all Fall asleep where do we go?"
    },
    {
      "id":"2",
      "title":"Book Review: How can we escape this labyrinth of suffering?"
    },
    {
      "id":"3",
      "title":"Documentary Review: How can we escape the rat race?"
    }
  ])
})

app.listen(4000, () => {
  console.log('connected on port 4000')
})

上面的代码片段将创建一条get接口。前端应用程序将从该接口获取评论标题。

运行后端 Express 服务器

npm要运行 Backend Express Server 应用程序，请在终端中运行以下命令：

npm run dev

该npm命令将启动并运行我们的服务器，http://localhost:4000/如下图所示：

该图像显示后端正在运行并显示评论。让我们开始开发前端 React.js 应用程序。

创建前端 React.js 应用程序

要创建前端 React.js 应用程序，请按照以下步骤操作：

步骤 1：在docker-compose-app工作目录中，运行以下npx命令创建一个 React.js 应用。

npx create-react-app react

上面的命令npx将在docker-compose-app工作目录中创建一个名为react的新目录。现在，cd进入react目录。

第 2 步：在react目录中打开该src目录。

步骤 3：在src目录中打开App.js文件并添加以下代码片段：

import { useEffect, useState } from 'react'
import './App.css';

function App() {
  const [reviews, setReviews] = useState([])
  useEffect(() => {
    fetch('http://localhost:4000/')
      .then(res => res.json())
      .then(data => setReviews(data))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <h1>all Reviews</h1>
        {reviews && reviews.map(blog => (
          <div key={blog.id}>{blog.title}</div>
        ))}
      </header>
    </div>
  );
}

export default App;

添加的代码片段将创建一个前端应用。它将用fetch请求后端文件标题get接口。我们的后端应用程序运行在http://localhost:4000/. 下一步是运行前端 React.js 应用程序，如下所示：

运行前端 React.js 应用程序

要运行前端 React.js 应用程序，请在终端中执行以下命令：

npm start

该npm命令将启动并运行前端 React.js 应用程序，http://localhost:3000/如下图所示：

该图显示了前端 React.js 应用程序正在运行并从后端获取评论标题。让我们为这两个应用程序创建 Dockerfile。Docker Compose 将使用 Dockerfile 来构建和运行容器。

为后端 Express 服务器创建 Dockerfile

Dockerfile 将包含用于为后端服务器应用程序构建 Docker 映像的所有命令。在node文件夹中，创建一个名为Dockerfile文件. Dockerfile添加以下命令来创建Docker镜像。

# It uses node:18-alpine as the base image for the Node.js application
FROM node:18-alpine

# It installs the nodemon package globally for monitoring and watching the backend Express server
RUN npm install -g nodemon

# Creating the working directory named `app`
WORKDIR /app

# Copying all the tools and dependencies in the package.json file to the working directory `app`
COPY package.json .

#Installing all the tools and dependencies in the container
RUN npm install

#Copying all the application source code and files to the working directory `app`
COPY . .

#Exposing the container to run on this port 4000
EXPOSE 4000

#Command to start the Docker container for the backed server application
CMD ["npm", "run", "dev"]

下一步是为前端 React.js 应用程序创建 Dockerfile。

为前端 React.js 应用程序创建 Dockerfile

在react文件夹中，创建一个名为Dockerfile的文件. Dockerfile添加以下命令来创建Docker镜像。

# It uses node:18-alpine as the base image for the frontend React.js application
FROM node:18-alpine

# Creating the working directory named `app`
WORKDIR /app

# Copying all the tools and dependencies in the package.json file to the working directory `app`
COPY package.json .

#Installing all the tools and dependencies in the container
RUN npm install

#Copying all the application source code and files to the working directory `app`
COPY . .

#Exposing the container to run on this port 3000
EXPOSE 3000

#Command to start the Docker container for the frontend React.js application
CMD ["npm", "start"]

现在我们已经有了两个 Dockerfile，下一步是创建一个docker-compose.yml包含所有容器配置。

创建docker-compose.yml文件

该文件将使我们能够使用 Docker Compose 运行和部署这两个容器。我们将把容器添加为service.

该docker-compose.yml文件将有两个服务。我们将启动两个容器。它将作为单个应用程序运行它们。

要创建两个 Docker Compose 服务，请按照以下步骤操作：

步骤1：在docker-compose-app目录中，创建一个新的文件docker-compose.yml。

步骤 2 配置node服务：

# Version of Docker-compose
version: '3.9'
services:
  # Add the node-js service
  node:
  # Location to the node.js dockerfile
    build: 
      context: ./node
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: node-container
    ports:
       # Host port:Container port
      - '4000:4000'
    volumes:
      # Bind-mounts configuration
      - ./node:/app
      # Ignoring any changes made in the "node_modules" folder
      - ./app/node_modules

上面的代码将创建一个名为node的服务。配置了Node.js Dockerfile 的位置。

它配置容器名称node-container和端口映射。将node-container在端口设置为4000。

我们还配置了卷。该卷会将本地项目文件夹映射到容器中的工作目录。在本地项目文件夹中所做的任何更改都将在容器中自动更新。当更改本地项目文件夹中的文件时，可以节省从头开始重建整个容器的时间。

第 3 步：接下来，我们以 React.js 应用程序容器命名的服务。

在node服务后添加以下代码片段：

 react:
  # Location to the react.js dockerfile
    build: 
      context: ./react
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: react-container
    ports:
     # Host port:Container port
      - '3000:3000'
    stdin_open: true

上面的代码将创建一个名为 的服务react。它配置React.js Dockerfile 的位置。

它配置容器名称为react-container和端口映射。将react-container在端口设置为3000。

如果你按照上面的步骤正确的话，最终的效果docker-compose.yml将如下图所示：

# Version of Docker-compose
version: '3.9'
services:
  # Add the node-js service
  node:
  # Location to the node.js dockerfile
    build: 
      context: ./node
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: node-container
    ports:
       # Host port:Container port
      - '4000:4000'
    volumes:
      # Bind-mounts configuration
      - ./node:/app
      # Ignoring any changes made in "node_modules" folder
      - ./app/node_modules
  react:
  # Location to the react.js dockerfile
    build: 
      context: ./react
        # Name of the dockerfile
      dockerfile: Dockerfile
    container_name: react-container
    ports:
     # Host port:Container port
      - '3000:3000'
    stdin_open: true

现在我们已将所有服务添加到文件中，下一步是构建并运行两个容器。

使用 Docker Compose 运行两个容器

要使用 Docker Compose 构建并运行这两个容器，请在终端中执行以下命令：

docker-compose up --build

该命令将运行两个容器并在终端中显示以下输出：

输出显示 node-container和react-container正在运行。下图显示了在 Web 浏览器中运行的已部署容器：

• node-container
• react-container

结论

在本教程中，您学习了如何使用 Docker Compose 部署多容器 React.js 和 Node.js 应用程序。我们使用 Node.js创建了一个后端Express服务器。然后我们使用 React.js 创建了一个前端应用程序。完成这些步骤后，我们为这两个应用程序创建了 Dockerfile。我们还创建了一个docker-compose.yml文件。

我们使用docker-compose.yml来构建和运行两个应用程序容器。我们使用 Docker Compose 成功部署了两个Docker容器。可以通过浏览器访问它们。