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

2024-01-17

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

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

My 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 https://blog.jetbrains.com/webstorm/2017/04/quick-tour-of-webstorm-and-docker/:

  • Went to 编辑配置位于窗口右上角调试按钮旁边。
  • 单击了+签名并选择Node.js.
  • Clicked ...旁边节点解释器.
  • 单击了+标志,选择添加远程....
  • 已选择Docker 组合从单选按钮中,单击旁边的文件夹图标配置文件,然后从下拉列表中选择适当的服务Service.
  • Clicked OK在一切上,然后就运行了它。它会运行,并给出未找到命令的错误。

当我跑步时docker-compose up,一切顺利。当我尝试添加运行配置时Run > Edit Configurations...添加 (+) aDocker-compose运行,将其指向docker-compose.yml文件,它也运行顺利。

我希望实现的是在 Docker 中使用 IDE 的功能。目前不知道去哪里寻找tslint配置,或node_modules.


TLDR;

技巧是更新 docker 容器内的路径/your-path to /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

然后网络风暴就能够按预期检测到一切。

技巧是更新路径/your-path to /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
    

您可以阅读有关此内容的更多信息我的博客在这里 https://thetldr.tech/how-to-configure-webstorm-for-docker-container-node_modules/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何告诉 WebStorm 在 Docker 容器中查找项目? 的相关文章

随机推荐