Docker镜像构建失败：protoc-gen-grpc-web未找到或不可执行

问题原因 #

你遇到的错误是因为protoc-gen-grpc-web作为开发依赖安装在项目的node_modules目录中，但系统环境变量PATH未包含该路径，导致protoc无法找到这个插件。

解决方案 #

方案1：修改本地构建脚本，指定插件路径 #

直接在构建脚本第4行添加插件路径，指向项目已安装的protoc-gen-grpc-web可执行文件：

修改前：

protoc -I. graph_endpoint.proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

修改后：

protoc -I. graph_endpoint.proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. --plugin=protoc-gen-grpc-web=../node_modules/.bin/protoc-gen-grpc-web

说明：../node_modules/.bin/protoc-gen-grpc-web是相对于graph_endpoint目录的插件路径，对应根目录package.json中安装的依赖。

方案2：将构建步骤整合到Dockerfile中（推荐） #

把前端编译、webpack打包等步骤全部放到Docker镜像构建流程中，消除本地环境差异，更适配Kubernetes多微服务场景：

1. 修改Dockerfile，添加protoc安装和构建步骤：

FROM node:16

# 安装protoc编译工具
RUN apt-get update && apt-get install -y --no-install-recommends protobuf-compiler && \
    rm -rf /var/lib/apt/lists/*

# 设置工作目录
WORKDIR /frontend-app

# 复制依赖配置并安装
COPY package*.json ./
RUN npm install

# 复制Protobuf文件和前端源码目录
COPY Protobufs/ ./Protobufs/
COPY graph_endpoint/ ./graph_endpoint/

# 执行前端构建流程
RUN cd graph_endpoint && \
    cp ../Protobufs/Graph_Endpoint/graph_endpoint.proto . && \
    protoc -I. graph_endpoint.proto --js_out=import_style=commonjs:. && \
    protoc -I. graph_endpoint.proto --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. --plugin=protoc-gen-grpc-web=../node_modules/.bin/protoc-gen-grpc-web && \
    export NODE_OPTIONS=--openssl-legacy-provider && \
    npx webpack ./test.js --mode development && \
    cp ./dist/graph_endpoint.js ../public/graph_endpoint.js

# 复制应用核心文件
COPY server.js ./
COPY public/ ./public/
COPY routes/ ./routes/
COPY controllers/ ./controllers/

EXPOSE 3000
CMD [ "node", "server.js"]

2. 简化构建脚本，仅保留Docker构建和推送命令：

docker build . -t $1/canvas-lti-frontend:v2
docker push $1/canvas-lti-frontend:v2

说明：

• 在Docker镜像中预先安装protoc工具，确保Protobuf编译环境完备
• 所有构建步骤在容器内完成，直接使用项目依赖的protoc-gen-grpc-web，无需本地配置
• 最终生成的镜像包含完整可运行应用，可直接部署到Kubernetes

内容的提问来源于stack exchange，提问作者Saile