使用docker部署node和react应用

使用docker部署node和react应用

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

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

在 Docker 中运行 NodeJS

开始之前，请确保计算机上已安装并运行 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

而我们的node应用非常简单，就只有一个文件

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 上运行的基本 Express 应用程序。该端口也映射到 docker 中的 4000，这让我们可以在 Docker 容器中运行它。

启动服务器

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

npm run start

让 Express 应用程序在 Docker 内运行需要不同的命令。首先，我们需要位于docker-compose.yml文件所在的根文件夹中。现在运行下面的命令，它应该在 Docker 容器内运行。

docker-compose up

不要忘记首先停止运行节点服务器，因为我们只能让一台服务器在端口 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 的设置。

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 容器外部运行服务器，只需在命令行中运行以下代码即可。

npm run start

确保我们位于客户端文件夹内。如果我们访问http://localhost:3000，我们应该会在浏览器窗口中看到主路由。

让 React 应用程序在 Docker 内运行需要不同的命令。首先，我们需要位于docker-compose.yml文件所在的根文件夹中。现在运行下面的命令，它应该在 Docker 容器内运行。

docker-compose up

不要忘记首先停止运行 React 应用程序服务器，因为我们只能让一台服务器在端口 3000 上运行。

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

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

docker-compose down

通过此设置，我们可以在 Docker 内同时运行 NodeJS 后端和 React 前端项目。如果遇到任何错误，则可能需要打开 Docker 桌面应用程序并删除与该项目相关的任何镜像。然后我们可以尝试docker-compose up再次运行该命令。