使用 Docker 运行 Node.js
使用 Docker,您可以快速启动您的 Node.js 应用程序,以便从 PhpStorm 运行、调试和分析它。 IDE 将通过自动创建一个新的 Dockerfile 、构建并运行一个镜像、同步您的源代码,和在容器中安装 npm 依赖项来处理初始配置。
您可以在 WebStorm 和 Docker 快速浏览 中找到一些示例。
开始之前
确保 JavaScript and TypeScript、 JavaScript Debugger、 Node.js、 Node.js Remote Interpreter 和 Docker 必需插件在 设置 | 插件 页面和 已安装 标签上已启用。 如需更多信息,请参阅 插件管理。
按照 从 JetBrains Marketplace 安装插件中的说明,在 设置 | 插件 页面、选项卡 Marketplace 上安装并启用 Node.js 远程解释器插件。
下载、安装并配置 Docker ,如 Docker 中所述
在 Docker 中配置 Node.js 解释器
Docker 中的 Node.js 解释器配置在 配置Node.js 远程解释器 对话框中。 您可以从 Node.js页面的 设置 对话框中打开此对话框,或者在 创建或编辑 Node.js 运行/调试配置以在 Docker 中运行或调试您的应用程序时打开。
推荐的方式是在 设置 对话框中配置远程 Node.js 解释器。 在这种情况下,您可以将解释器和关联的包管理器设置为项目的默认值。 因此,您不仅可以用配置好的 Node.js 解释器在 Docker 中运行和调试您的应用程序,还可以管理您的项目依赖项、运行测试并对代码进行 lint。 请参阅 npm、pnpm 和 yarn 与 Docker、 测试您的应用程序 和 使用 Docker 的 ESLint 下文。
您直接在 Node.js 运行/调试配置中配置的远程 Node.js 解释器只能与此运行/调试配置一起使用。
创建远程 Node.js 解释器
打开 设置 对话框(Ctrl+Alt+S ),然后转到 。
点击
字段旁的 Node 解释器(I)。

在 Node.js Interpreters 对话框中,当前配置的解释器列表,点击工具栏上的
并从上下文菜单中选择 添加远程。

在打开的 配置 Node.js 远程解释器对话框中,选择 Docker。
从 服务器 列表中,选择要使用的 Docker 配置。

或者,点击字段旁边的 新建 按照 启用 Docker 支持 中的描述配置 Docker 服务器。
请从 镜像名称 列表中选择要使用的映像。

Node.js 可执行文件会被自动检测并显示在 Node.js 解释器路径 字段。
点击 确定 返回到 Node.js 解释器 对话框,新的解释器将被添加到列表中。

要将新配置的解释器设置为项目默认解释器,请在列表中选择它并点击 确定 以返回 Node.js 对话框。

每次您从 Node Interpreter 列表中选择
Project别名时,PhpStorm都会自动使用此解释器,例如在创建运行/调试配置时。要使用与新解释器关联的包管理器来管理您的项目依赖项,请在项目中将此包管理器设置为默认值。 要做到这一点,请在 软件包管理器(M) 字段中指定包管理器的位置。 了解更多内容,请参见 指定默认项目 Node.js 解释器和包管理器。
指定默认项目的 Node.js 解释器和包管理器
PhpStorm 每次从 Project 列表中选择 Node Interpreter 别名时会自动使用默认的项目解释器,例如,在创建运行/调试配置时。
默认的项目包管理器会自动用于管理依赖项,例如,当您从 <package manager> install 文件运行 package.json 或安装第三方工具(例如 ESLint、Prettier 等)时。
打开 设置 对话框(Ctrl+Alt+S ),然后转到 。
从 Node 解释器(I) 列表中选择要在当前项目中默认使用的配置。
从 包管理器 列表中选择与要使用的软件包管理器相关联的别名。 PhpStorm 会自动检测其位置。

或者,手动指定所需包管理器的位置。
npm 可执行文件的默认位置是
/usr/local/lib/node_modules/npm。默认情况下,pnpm 的位置取决于安装方法:
通过 /usr/local/lib/node_modules/pnpm 安装。
通过 curl (
curl -f https://get.pnpm.io/<version>.js | node - add --global pnpm) 来安装 /usr/local/pnpm-global/<version>/node_modules/pnpm 。
进一步了解请访问 pnpm official website。
yarn 的默认位置是 /opt/yarn-<version>5 ,例如, /opt/yarn-v1.22.5 。

npm、pnpm 和 yarn 与 Docker
使用 PhpStorm,您可以管理项目依赖项并在 Docker 容器中运行脚本,就像处理本地项目一样。
请确保您已在 Docker 中配置了一个 远程 Node.js 解释器。
管理您的项目依赖项。
打开您的 package.json 文件并像本地开发一样进行操作,例如,从上下文菜单中选择 运行 '<package manager> install'。 依赖项使用 Docker 容器内的默认包管理器进行安装,并且 node_modules 文件夹会出现在您的项目中。
或者,打开嵌入的 终端 (Alt+F12 ),然后手动安装所需的包,例如,运行
npm install --save-dev eslint。
从 安装和更新包 和 编辑 package.json 了解更多。
创建 Node.js 运行配置
转到 。 在弹出的 编辑配置 对话框中,点击工具栏上的
并从上下文菜单中选择 Node.js。 运行/调试配置:Node.js 对话框打开。
在 File 字段中,指定启动应用程序的主文件路径(例如, bin/www 对于 Express 应用程序)。

如有必要,请按照 运行和调试 Node.js 应用程序中描述的方式指定一些可选设置。
从 Node 解释器(I) 列表中,选择 Docker 环境中的相关远程 Node.js 解释器。

或者,单击
,位于 Node 解释器(I) 字段旁边,并配置一个远程 Node.js 解释器 如上所述。

检查自动生成的 Docker 容器设置。 单击
以在弹出窗口中打开设置。

可选 :按照以下说明配置端口绑定 如以下所述。
配置端口绑定(可选)
基本上,您需要将应用程序运行所在的端口与容器的端口进行绑定。
单击 ,然后在 编辑 Docker 容器设置 字段旁边的 编辑 Docker 容器设置 对话框中指定设置。
展开 端口绑定 区域,然后单击工具栏上的
。 在打开的 端口绑定 对话框中,按以下方式映射端口:
单击 修改选项 并选择要指定的选项:

在 容器端口 字段中,输入在应用程序中指定的端口。
在 主机端口 字段中,输入希望从计算机访问应用程序所使用的任意端口。
在 主机IP 字段中,输入 Docker 主机的 IP 地址。 如果正在使用
localhost,请输入127.0.0.1。
单击 确定 返回到 编辑Docker 容器设置 对话框,此时新端口绑定已添加到列表中。

单击 确定 返回到 运行/调试配置:Node.js 对话框,此时端口绑定已显示在 Docker 容器设置 字段中。

运行您的应用程序

创建一个 Node.js 运行/调试配置 如上所述。
从 选择运行/调试配置 工具栏的列表中,选择 新创建的 Node.js 配置。
点击
到 选择运行/调试配置 列表。
检查应用程序输出
为了确保应用程序按预期工作,您可以从 PhpStorm 内置 HTTP 客户端 运行一个 HTTP 请求。

创建一个 HTTP 请求 文件。
请编写以下请求:
GET http://<host IP>:<container port>/例如:
GET http://127.0.0.1:3010/点击
在边栏中,并点击
在 运行 http://<host IP>:<container port>/ 旁边。

应用程序输出显示在 运行 工具窗口的单独选项卡中。

调试您的应用程序

测试您的应用程序
借助 PhpStorm,您可以在 Docker 容器内运行 Mocha 和 Jest 测试,与在本地运行的方式完全相同。 如需更多信息,请参阅 Mocha 和 Jest。
请确保为您的项目配置并选择一个相关的 Docker 中的远程 Node.js 解释器作为默认解释器。 还请确保与此远程解释器关联的软件包管理器设置为项目默认。 如需更多信息,请参阅 在 Docker 中配置 Node.js 解释器 和 npm、pnpm 和 yarn 与 Docker。
打开您的 package.json 并确保所需的测试框架列在
devDependencies部分:{ "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "chai": "^4.3.4", "concurrently": "^6.3.0", "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1", "mocha": "^9.1.3", "nyc": "^15.1.0" } }在编辑器中的任意位置右键点击,然后从上下文菜单中选择 运行 '<package manager> install'。
请根据 Mocha 官方网站 或 Jest 官方网站 的说明创建测试。
直接从编辑器运行和调试单个测试,或者创建运行/调试配置以启动部分或全部测试,如 运行 Mocha 测试、 调试 Mocha 测试、 运行 Jest 测试 和 调试 Jest 测试 中所述。
使用 Docker 的 ESLint
使用 PhpStorm,您可以在 Docker 容器中对代码运行 ESLint ,就像在本地一样。 如需更多信息,请参阅 JavaScript 代码检查工具 和 ESLint。
请确保为您的项目配置并选择一个相关的 Docker 中的远程 Node.js 解释器作为默认解释器。 还请确保与此远程解释器关联的软件包管理器设置为项目默认。 如需更多信息,请参阅 在 Docker 中配置 Node.js 解释器 和 npm、pnpm 和 yarn 与 Docker。
请打开您的 package.json 并确保 ESLint 列在
devDependencies部分:{ "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "eslint": "^8.1.0" } }在编辑器中的任意位置右键点击,然后从上下文菜单中选择 运行 '<package manager> install'。
在那之后,ESLint 的工作方式与您在本地处理代码时相同。 在编辑器或 问题 工具窗口中查看检测到的不一致描述并应用建议的快速修复。 如需更多信息,请参阅 JavaScript 代码检查工具 和 ESLint。
