Docker化React Native Web应用时react-scripts找不到的解决方法

错误根源 #

你执行的npm run build调用了react-scripts build，但你的项目是Expo管理的React Native Web应用，并未安装react-scripts依赖，同时你已经通过expo build:web生成了静态产物web-build，Dockerfile里的冗余步骤进一步导致了冲突。

解决方案 #

根据你的需求，提供两种可行方案：

方案一：直接托管本地已构建好的静态文件（推荐，更高效） #

既然已经在本地生成了web-build静态文件夹，无需在Docker内重复构建，直接用静态文件服务器托管即可：

修改Dockerfile如下：

FROM node:14-alpine
WORKDIR /app
# 安装轻量静态文件服务器serve
RUN npm install -g serve
# 拷贝本地已构建好的web-build文件夹
COPY web-build ./web-build
EXPOSE 3000
# 启动服务器，指定静态文件目录和端口
CMD ["serve", "-s", "web-build", "-l", "3000"]

方案二：在Docker内完成构建流程 #

如果需要在Docker镜像构建阶段完成编译，调整如下：

1. 修改package.json的build脚本，替换为Expo官方的web构建命令：

"scripts": {
    // ... 其他脚本保持不变
    "build": "expo build:web",
    // ...
}

2. 修改Dockerfile：

FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 用Expo命令构建web产物
RUN npm run build
# 安装静态文件服务器
RUN npm install -g serve
EXPOSE 3000
CMD ["serve", "-s", "web-build", "-l", "3000"]

额外说明 #

• 生产环境不要用expo start --web启动服务，这是开发服务器，性能和稳定性无法满足生产需求，静态文件服务器（如serve、Nginx）是更合适的选择。
• 原Dockerfile中COPY web-build ./web-build属于冗余步骤，COPY . .已经包含了该文件夹，且后续构建会覆盖它，可直接删除。

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