教程：将 Node.js Express 应用程序容器化

1. 确保在 设置 | 插件 页面上的 已安装 选项卡中启用了所需的插件： JavaScript Debugger、 Node.js、 Node.js Remote Interpreter 和 Docker。 有关更多信息，请参阅 管理插件。

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

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

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

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

3. 指定应用程序的位置及其名称，例如： hello_world_docker。

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

   

5. 点击 创建。

填充应用程序

1. 现在我们将为应用程序创建一个单独的文件夹，这将帮助我们稍后将本地文件夹映射到容器中的文件夹。

   为此，请打开 项目 工具窗口 Alt+1 ，右键点击项目文件夹，从上下文菜单中选择 新建 ，然后选择 目录。 在弹出对话框中，指定文件夹名称，例如： app 。

   

2. 现在是时候创建一个 JavaScript 文件来存放应用程序的代码了。

   在 app 文件夹的上下文菜单中，选择 新建 ，然后选择 JavaScript 文件。

   

   在弹出的对话框中，指定文件名称，例如： hello_express.js 。

   

3. 在编辑器中打开新创建的 hello_express.js 文件并输入以下代码：

   const express = require('express'); const app = express(); app.get('/', function(req, res) { res.send('Hello World!') }); app.listen(3000,function() { console.log('Example app listening on port 3000!') });

4. 正如所预期的那样， express 引用无法解析，并被标记为错误。 但是，当您将鼠标悬停在引用上时，WebStorm 会建议进行快速修复。

   

   当您点击 安装 'express' 链接时， express 将被添加到 package.json 文件中并安装。

   

在本地运行应用程序

让我们在本地运行应用程序，以确保其按预期工作。

• 打开 hello_express.js 文件，在编辑器选项卡中的任意位置右键点击，然后在上下文菜单中选择 运行 'hello_express.js'。

  

  运行 工具窗口已打开，显示 Example app listening on port 3000!。

  如果您在 http://localhost:3000 地址打开浏览器，将会看到页面如预期那样显示 Hello World!。

  

创建 Dockerfile

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

   

2. 打开新创建的 Dockerfile ，并输入以下代码：

   FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./app/ ./app/ CMD ["node","./app/hello_express.js"]

   此 Dockerfile 包含基于 node:22 镜像从 Docker Hub 构建镜像的指令。

   当您从此镜像运行容器时，Docker 会将 /app/ 目录的内容复制到容器中的 /tmp/app/ 目录（在我们的示例中， /app/ 目录包含 hello_express.js 文件）。 package.json 文件将被复制到 /tmp/ 。

   然后 Docker 将当前工作目录设置为 /tmp 并运行 node ./app/hello_express.js。 因此，容器日志中应显示 Example app listening on port 3000!。

从 Dockerfile 构建并运行镜像

1. 在编辑器中打开 Dockerfile ，点击 装订区域图标，选择 运行 ，然后选择 在 'Docker' 上运行。

   

2. WebStorm 创建一个 Dockerfile 运行配置 ，该配置从 Dockerfile 构建一个镜像，然后基于该镜像运行一个容器。

   

   要跟踪整个过程，请在 构建日志 工具窗口中打开 服务 选项卡。

   

3. 您可以与他人共享此镜像，例如，无需安装 Node.js（仅需 Docker），即可准确展示您的应用程序预期的运行方式。

公开容器端口

• 打开您的 Dockerfile 并添加以下行：

  EXPOSE 3000

  您的 Dockerfile 现在如下所示：

  FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./app/ ./app/ EXPOSE 3000 CMD ["node","./app/hello_express.js"]

创建一个 Node.js Express 应用程序

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

2. 在打开的对话框中，在左侧窗格中选择 Express。

3. 指定应用程序的位置及其名称，例如： node_express_docker。

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

   

5. 接受 视图引擎 和 样式表引擎 的默认设置。

6. 点击 创建。

WebStorm 会生成一个简单的 Express 应用程序，并安装 package.json 中列出的依赖项。

在本地运行应用程序

为确保我们自动生成的应用程序可以正常工作，我们首先在本地运行它。 您可能会注意到，WebStorm 还生成了一个类型为 Node.js 的 bin/www 运行/调试配置。

1. 从工具栏上的 运行 微件中选择 bin/www 运行/调试配置，然后点击其旁边的 。

   

   运行 工具窗口会打开，显示应用程序的输出。

   

2. 在浏览器中打开 http://localhost:3000。 页面会显示一条欢迎消息：

   

3. 我们稍微更新一下代码，这样就不需要打开浏览器，而是能够在控制台中获取来自应用程序的响应。 为此，请打开 bin/www ，例如，在 onListening() 函数中添加以下代码行：

   console.log("Hello world");

   如果现在重新运行应用程序， 运行 工具窗口如下所示：

   

创建 Dockerfile

1. 在 项目 工具窗口中，右键点击项目名称，指向 新建 并点击 文件。

2. 在 新建文件… 对话框中，键入 Dockerfile 并按 Enter。

3. 请将以下代码粘贴到新的 Dockerfile 中：

   FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./bin/ ./bin/ COPY ./public/ ./public/ COPY ./routes/ ./routes/ COPY ./views/ ./views/ COPY ./app.js . CMD ["npm","start"]

   如您所见，此处我们逐步单独复制本地文件夹。

4. 让我们通过向 Dockerfile 添加 EXPOSE 3000 来暴露容器端口：

   FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./bin/ ./bin/ COPY ./public/ ./public/ COPY ./routes/ ./routes/ COPY ./views/ ./views/ COPY ./app.js . EXPOSE 3000 CMD ["npm","start"]

部署并运行应用程序

• 要部署并运行应用程序，请点击 装订区域图标，选择 运行 ，然后选择 在 'Docker' 上运行。 应用程序现在正在容器中运行：

  

绑定端口

要使应用程序可以从 Docker 容器外部访问，我们需要将容器端口（在示例中为 3000 ）绑定到主机上的一个端口。

您可以直接在正在运行的容器中，或在 Dockerfile 运行/调试配置中执行此操作， 如上所述。

• 在 仪表板 选项卡中，在 端口 区域点击 添加 ，然后指定容器端口，在本例中为 3000。

  

  点击 修改选项 ，勾选 主机端口 ，并在新增的字段中指定主机端口。 在本示例中，设为 3001。