Azure Linux容器运行React应用启动失败求助

错误信息（中文翻译） #

[34mℹ[39m [90m｢wds｣[39m: 项目运行在 http://192.168.0.13/
[34mℹ[39m [90m｢wds｣[39m: webpack 输出文件从以下位置提供服务
[34mℹ[39m [90m｢wds｣[39m: 非webpack生成的内容从 /react-assignment1/public 提供服务
[34mℹ[39m [90m｢wds｣[39m: 404 请求将回退到 /
正在启动开发服务器...

node:events:491
throw er; // 未处理的 'error' 事件
^

错误: spawn /mnt/c/Windows/System32/WindowsPowerShell/v1.0/powershell.exe ENOENT
在 ChildProcess._handle.onexit (node:internal/child_process:283:19)
在 onErrorNT (node:internal/child_process:476:16)
在 process.processTicksAndRejections (node:internal/process/task_queues:82:21)
在 ChildProcess 实例上触发了 'error' 事件:
在 ChildProcess._handle.onexit (node:internal/child_process:289:12)
在 onErrorNT (node:internal/child_process:476:16)
在 process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn /mnt/c/Windows/System32/WindowsPowerShell/v1.0/powershell.exe',
path: '/mnt/c/Windows/System32/WindowsPowerShell/v1.0/powershell.exe',
spawnargs: [
'-NoProfile',
'-NonInteractive',
'–ExecutionPolicy',
'Bypass',
'-EncodedCommand',
'UwB0AGEAcgB0ACAAIgBoAHQAdABwADoALwAvAGwAbwBjAGEAbABoAG8AcwB0ADoAMwAwADAAMAAiAA=='
]
}
Node.js v18.14.1

问题原因 #

React开发服务器（webpack-dev-server）尝试调用Windows PowerShell来打开浏览器，但Azure Linux容器是纯Linux环境，不存在Windows路径下的powershell.exe。本地Docker如果运行在Windows环境，镜像能访问到宿主系统的PowerShell，因此不会报错。

解决方案 #

方案1：改用生产模式构建镜像（推荐） #

开发服务器不适合部署到生产环境，应先构建静态文件，再用Nginx托管：

1. 修改Dockerfile：

   # 构建阶段
   FROM node:18-alpine AS builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build
   
   # 运行阶段
   FROM nginx:alpine
   COPY --from=builder /app/build /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

2. 重新构建镜像并部署到Azure。

方案2：禁用开发服务器自动打开功能（仅测试用） #

如果必须使用开发模式，阻止服务器尝试打开浏览器：

1. 在package.json的启动命令中添加--no-open参数：

   "scripts": {
     "start": "react-scripts start --no-open"
   }
   

2. 或在webpack配置中设置open: false。

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