如何告诉 WebStorm 在 Docker 容器中查找项目？

Question

我当前的项目目录如下所示：

.
├── backend
│   ├── Dockerfile # NestJS Dockerfile.
│   ├── docker # Folder that contains docker-compose.yml file.
│   ├── package.json
│   └── src
└── frontend
    ├── Dockerfile # Angular Dockerfile.
    ├── package.json
    └── src

我的docker-compose.yml 文件如下所示：

version: "3.7"
services:
  # ########################
  # Back-End Container
  # ########################
  backend: # Node-Express backend that acts as an API.
    container_name: nest_backend
    build:
      context: ../
    restart: always
    expose:
      - 3000
    ports:
      - "3000:3000"
    volumes:
      - /home/node/node_modules
      - "../:/home/node/"
  # ########################
  # Front-End Container
  # ########################
  frontend: # Angular frontend to be served to client.
    container_name: angular_frontend
    build:
      context: ../../frontend/
    restart: always
    expose:
      - 4200 # Angular ng-serve port.
      - 49153 # Websocket port for live reloading.
    ports:
      - "49153:49153"
      - "4200:4200"
    volumes:
      - /home/node/node_modules
      - "../../frontend/:/home/node/"
    depends_on:
      - backend
networks:
  default:

我想使用 Docker 并且不失去使用 WebStorm 作为 IDE 的好处。例如，它告诉我没有安装 tslint 包，我需要运行 npm install 来安装 node_modules 文件夹。但是，我的 node_modules 文件夹只存在于容器中。有没有办法让 WebStorm 正常工作？

我知道有一种叫做路径映射的东西，我已经尝试配置它，但没有任何反应；它仍然告诉我安装软件包。

这是我到目前为止所做的：

我已经按照教程here：

• 转到调试按钮旁边窗口右上角的编辑配置。
• 点击+符号并选择Node.js。
• 点击节点解释器旁边的...。
• 点击+符号，选择Add Remote...。
• 从单选按钮中选择 Docker Compose，单击 Configuration file(s) 旁边的文件夹图标，然后从下拉列表中选择合适的服务 Service。
• 在所有内容上单击确定，然后运行它。它会运行，给出一个找不到命令的错误。

当我运行docker-compose up 时，一切运行顺利。当我尝试添加运行配置Run > Edit Configurations... 以添加（+）Docker-compose 运行时，将其指向docker-compose.yml 文件，它也可以顺利运行。

我希望完成的是在 Docker 中使用 IDE 的功能。目前，它不知道去哪里寻找tslint 配置或node_modules。

Answer 1

TLDR；

技巧是将 docker 容器内的路径从 /your-path 更新为 /opt/project。

详细解决方案

webstorm 的问题是它们不允许您定义可以从中选择node_modules 的路径。但是他们有一个默认路径，可以从中选择它。当我想为在 docker 中运行的后端节点服务集成远程调试时，我遇到了同样的问题。

您需要更新您的 docker 文件。假设你使用的 Dockerfile 是这样的

# pull official base image
FROM node:12.11-buster

# set working directory
WORKDIR /app

COPY ./package.json ./package-lock.json /app

RUN npm install

现在这不会检测用于远程调试的 node_modules 或您在 webstorm 中需要的任何其他集成。

但是如果你将 dockerfile 更新为这样的东西

# pull official base image
FROM node:12.11-buster

# set working directory
# This done particularly for enabling debugging in webstorm.
WORKDIR /opt/project

COPY ./package.json ./package-lock.json ./.npmrc /opt/project

RUN npm install

然后，webstorm 就能够按预期检测到所有内容。

技巧是将路径从/your-path 更新为/opt/project

您的 docker-compose 文件应该如下所示：

version: "3.7"
services:
  backend-service:
    build:
      dockerfile: ./Dockerfile.local
      context: ./
    command: nodemon app.js
    volumes:
      - ./:/opt/project
      - /opt/project/node_modules/
    ports:
      - 6060:6060
    

您可以在my blog here阅读更多相关信息