webstorm中react前端项目使用docker镜像作为开发环境进行开发

当在本地电脑上开发了多个前端项目，不同的前端项目所依赖的Node版本跨度比较大，一种解决办法是使用Node版本管理工具比如nvm；还有种办法就是在webstorm中选择使用docker镜像中的Node解释器。下面将说明如何让前端项目使用docker镜像中的Node解释器。这里以开源项目dify(https://github.com/langgenius/dify)的前端项目为例

1. 准备dockerfile文件

# 使用官方 Node.js 20 镜像作为基础镜像
FROM node:20-alpine3.20 AS base

# 安装必要的包
RUN apk add --no-cache openssh

# 创建 SSH 目录并生成 SSH 密钥
RUN mkdir -p /root/.ssh && \
    ssh-keygen -A

# 配置 SSH 服务
RUN sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config && \
    sed -i 's/#StrictModes yes/StrictModes no/' /etc/ssh/sshd_config

# 设置 SSH 服务的默认密码
RUN echo 'root:root' | chpasswd


FROM base AS packages

WORKDIR /app/web

COPY package.json .
COPY yarn.lock .

# if you located in China, you can use taobao registry to speed up
RUN yarn install --frozen-lockfile --registry https://mirrors.cloud.tencent.com/npm/

#RUN yarn install --frozen-lockfile
ENV NODE_MODULES_PATH=/app/web/node_modules
ENV NODE_PATH=${NODE_MODULES_PATH}
ENV NODE_MODULES_PATH=${NODE_MODULES_PATH}

ENV PATH="${NODE_MODULES_PATH}/.bin:${PATH}"


# 暴露 SSH 端口
EXPOSE 22

# 启动 SSH 服务
CMD ["/usr/sbin/sshd", "-D"]

2. 在dockerfile所在目录下，放入package.json和yarn.lock文件，目录结构如下

 3. 打包镜像

docker build -t dify-node .

4. 在websorm中配置npm启动器

 

 5. 由于在构建镜像时已经安装了前端项目依赖，并且也指定了yarn的依赖路径，因此设置好启动器后，能直接运行