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

使用 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 包含从 Docker Hub 中的 node:22 镜像构建镜像的指令。

   当您从该镜像运行容器时，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 还生成了一个类型为 bin/www 的 Node.js 运行/调试配置。

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。