WebStorm 2026.2 Help

教程:将 Node.js Express 应用与 Redis 数据库进行 Docker 容器化

可以使用 WebStorm 在多个 Docker 容器下通过 Docker Compose 运行和调试 Node.js Express 应用程序。

本教程介绍如何在同一个虚拟网络中的容器内运行两个 Docker Compose 服务:一个简单的 Node.js Express 应用程序和一个 Redis 数据库。

在本教程中,我们将:

  • 创建一个 Node.js Express 应用程序,实现 HTTP 请求计数器并在数据库中递增该计数。

  • 为此应用程序编写一个 Dockerfile

  • 创建一个 DockerCompose 文件,将计数器应用程序和 Redis 数据库两个服务连接起来。

  • 构建、部署并在 docker 容器中运行我们的应用程序镜像和 Redis 镜像。

  • 在浏览器中访问应用程序,并检查在刷新页面时计数器是否实际递增。

开始之前

  1. 确保在 设置 | 插件 页面上的 已安装 选项卡中启用了所需的插件: JavaScript DebuggerNode.jsNode.js Remote InterpreterDocker。 有关更多信息,请参阅 管理插件

  2. 下载、安装并配置 Docker ,如 Docker 中所述.

创建 Node.js 应用程序

  1. 请点击 新建项目欢迎屏幕或从主菜单中选择 文件 | 新建 | 项目

  2. 在打开的对话框中,在左侧窗格中选择 Node.js

  3. 指定应用程序的位置及其名称,例如: counter

  4. 指定要使用的本地 Node.js 运行时。 接受建议的安装,或从列表中选择另一个,或者如果您的计算机尚未安装 Node.js,可点击 下载 进行安装。 详细了解 创建新的 Node.js 应用程序

    使用 Node.js 创建一个空项目
  5. 点击 创建

WebStorm 生成项目存根并在编辑器中打开。

填充应用程序

我们的应用程序将包含一个 JavaScript 文件 index.js

  1. 打开 项目 工具窗口 Alt+1 ,右键点击项目文件夹,从上下文菜单选择 新建 ,然后选择 JavaScript 文件

    创建新的 JavaScript 文件
  2. 在弹出的对话框中,指定文件名称,例如: index.js

    创建新的 JavaScript 文件 — 指定文件名称

    WebStorm 创建一个 index.js 文件并在编辑器中打开它。

  3. index.js 文件内,输入以下代码:

    const express = require('express'); const redis = require('redis'); const app = express(); // The host name 'redis-server' will be specified in docker-compose.yml const client = redis.createClient({ url: 'redis://redis-server:6379' }); client.on('error', (err) => console.log('Redis Client Error', err)); app.get('/', async (req, res) => { try { // The `incr` command atomically increments the value stored at the key by 1. // If the key does not exist, it is created with the value 0 before the increment. const visits = await client.incr('visits'); res.send(`The number of visits is ${visits}`); } catch (err) { res.status(500).send('Error while accessing Redis'); } }); // First we connect to Redis, and then we run the server app.listen(3000, async () => { await client.connect(); console.log('Server running at port 3000'); });
  4. WebStorm 检测到缺少 Express 框架和用于连接 Redis 的客户端,并将其引用高亮显示为未解析。

    将光标放置到未解析的引用处,按 Alt+Enter ,然后选择 将 'express' 安装为开发依赖项将 'redis' 安装为开发依赖项

    使用快速修复来安装依赖项

容器化应用程序

对于 Redis,我们将使用现成的镜像,而应用程序 Web 部分需要我们自己编写 Dockerfile

创建 Dockerfile

  1. 在项目文件夹的上下文菜单中选择 新建 ,然后选择 Dockerfile

    创建 Dockerfile(上下文菜单)
  2. 打开新创建的 Dockerfile ,并输入以下代码:

    # Specify a light-weight Node.js image FROM node:22-alpine # Specify the working directory inside the container WORKDIR /usr/src/app COPY package*.json ./ RUN npm install --production COPY . . # Expose the container's port EXPOSE 3000 # Specify the command to launch application CMD ["node", "index.js"]

现在需要通过 docker-compose.yml 文件将应用程序的两个部分绑定起来。

创建一个 docker-compose.yml 文件

  1. 在项目文件夹的上下文菜单中选择 新建 ,然后选择 Docker Compose 文件

    创建 docker-compose.yml

    在弹出的窗口中,接受默认的 Docker Compose 文件名或指定自定义名称,然后按下 Enter

    创建 docker-compose.yml
  2. 打开新创建的 docker-compose.yml ,并输入以下代码:

    services: redis-server: image: redis:alpine web: # The build directive instructs Docker Compose to build # an image of our application based on the Dockerfile # from the current folder build: . # Bind the local port with port inside the container ports: - "3000:3000" # The depends_on directive ensures that # the container starts after the redis-server depends_on: - redis-server

运行应用程序

  • docker-compose.yml 中,点击 docker-compose up 装订区域图标 ,在 services 旁边,然后从上下文菜单中选择 在 Docker 上运行 ,以运行 docker compose up -d 命令。

    运行 docker-compose

WebStorm 首先启动 redis-server Docker Compose 服务,并确保数据库健康。 然后启动 web 服务。 如果一切正常,将在 服务 工具窗口中看到如下内容:

服务工具窗口中运行了两个容器

如果在 web 节点下点击 counter-web-1 ,将会看到 Server running at port 3000 输出:

控制台中的应用程序输出

检查应用程序是否按预期工作

  1. 在浏览器中打开 http://localhost:3000。 页面打开后显示 The number of visits is 1

  2. 多次刷新页面,查看计数器是否递增。

2026年 7月 14日