如何在 Node 和 React 应用程序中使用 Docker

Docker 使开发人员能够将所有应用程序打包到容器中。这些容器可以在任何安装了 Docker 的机器上运行，并且应用程序完全相同。这是一种在多个系统上运行代码库克隆的好方法，并且可以确保所有克隆的代码库完全相同。

使用 Docker 时，CI/CD 工作流程和 DevOps 测试环境会显著改善，Docker 本质上是一组可共享的软件工具。Kubernetes 是另一个用于操作多个 Docker 容器的工具，但规模要大得多。

在本教程中，我们将学习如何在 Docker 容器内创建和运行 NodeJS Express 后端和 React 前端。

在 Docker 中运行 NodeJS Express 后端

开始之前，请确保您的计算机上已安装并运行 Docker。

现在使用命令行导航到类似桌面的目录，然后运行以下命令。

mkdir my-app-docker
cd my-app-docker
touch docker-compose.yml
mkdir api
cd api
npm init -y
npm i express
touch app.js Dockerfile .dockerignore
cd ..

我们设置了一个名为 api 的后端，并创建了一些 Docker 文件。现在，在代码编辑器中打开项目，并将下面的代码添加到相应的文件中。

将其放入docker-compose.yml文件中。请注意 yaml 格式，否则运行时会收到 Docker 错误。

version: '3.8'
services:
  api:
    build: ./api
    container_name: api_backend
    ports:
      - '4000:4000'
    volumes:
      - ./api:/app
      - ./app/node_modules

添加这个文件app.js。

const express = require('express');

const app = express();

const port = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('Home Route');
});

app.listen(port, () =>
  console.log(`Server running on port ${port}, http://localhost:${port}`)
);

现在将此行添加到.dockerignore文件中。

node_modules

接下来将此代码添加到Dockerfile文件中。

FROM node:16-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 4000

CMD ["node", "app.js"]

最后将此运行脚本添加到package.json文件中。

"scripts": {

"start": "node app.js"

},

（可选）使用 Nodemon 让服务器在发生更改时自动重启

如果您希望每次更改后端文件时都重新启动服务器，那么您可以将其配置为使用 Nodemon。

您所要做的就是更新api文件夹内的Dockerfile文件。package.json

使用下面的代码更新代码Dockerfile。我们现在在启动时安装 Nodemon，并使用dev作为运行命令。

FROM node:16-alpine

RUN npm install -g nodemon

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 4000

CMD ["npm", "run", "dev"]

package.json现在使用 Nodemon 的这个运行脚本更新文件。

"scripts": {

"start": "node app.js",

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

},

我们刚刚创建了一个在端口 4000 上运行的基本 NodeJS Express 应用程序。该端口在 docker 中也映射到 4000，这让我们可以在 Docker 容器中运行它。

启动服务器

要像平常一样使用 Node 在 Docker 容器外运行服务器，只需在命令行中运行以下代码即可。您需要确保位于 api 文件夹中。如果您访问http://localhost:4000，您应该会在浏览器窗口中看到 home 路由。

npm run start

要让 NodeJS Express 应用在 Docker 中运行，需要使用不同的命令。首先，你需要进入docker-compose.yml文件所在的根文件夹。现在运行以下命令，它应该会在 Docker 容器中运行。

不要忘记先停止正在运行的节点服务器，因为只能在端口 4000 上运行一个服务器。

docker-compose up

如果您访问http://localhost:4000，您应该会在浏览器窗口中看到主路由。

您可以使用以下命令停止服务器，或者您可以转到 Docker 应用程序并停止容器运行。

docker-compose down

在 Docker 中运行 React 前端

现在让我们创建一个 React 前端！使用命令行进入 my-app-docker 的根文件夹。运行以下命令来设置项目。

npx create-react-app client
cd client
touch .dockerignore Dockerfile

现在将下面的代码添加到相应的文件中。

将这一行添加到.dockerignore文件中。

node_modules

将此代码放入Dockerfile文件中。

FROM node:17-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

最后，使用下面的代码更新docker-compose.yml根文件夹中的文件。我们在底部添加了一个客户端部分，其中包含用于在 Docker 容器内运行 React 的设置。请注意 yaml 格式，否则在尝试运行时会遇到 Docker 错误。

version: '3.8'
services:
  api:
    build: ./api
    container_name: api_backend
    ports:
      - '4000:4000'
    volumes:
      - ./api:/app
      - ./app/node_modules
  client:
    build: ./client
    container_name: client_frontend
    ports:
      - '3000:3000'
    volumes:
      - ./client:/app
      - ./app/node_modules
    stdin_open: true
    tty: true

启动服务器

要像平常一样使用 Node 在 Docker 容器外运行服务器，只需在命令行中运行以下代码即可。请确保您位于客户端文件夹中。如果您访问http://localhost:3000，您应该会在浏览器窗口中看到主路由。

npm run start

要让 React 应用在 Docker 中运行，需要使用不同的命令。首先，你需要进入docker-compose.yml文件所在的根文件夹。现在运行以下命令，它应该在 Docker 容器中运行。

不要忘记先停止正在运行的 React 应用服务器，因为只能在端口 3000 上运行一台服务器。

docker-compose up

如果您访问http://localhost:3000，您应该会在浏览器窗口中看到主路由。

您可以使用以下命令停止服务器，或者您可以转到 Docker 应用程序并停止容器运行。

docker-compose down

通过此设置，您可以在 Docker 中同时运行 NodeJS 后端和 React 前端！如果遇到任何错误，您可能需要打开 Docker 桌面应用程序并删除与该项目相关的所有镜像。然后，您可以尝试docker-compose up再次运行该命令，希望这次一切能够按预期运行。