如何通过web-build文件夹运行Docker化的Expo React Native Web

问题描述 #

我通过npx expo export:web在项目根目录生成了web-build生产构建文件夹，本地进入该文件夹执行npx serve可在http://localhost:3000正常启动应用。但通过docker compose -f docker-compose-prod.yml build构建镜像后，运行容器访问http://localhost:19006仅显示项目根目录结构，无法加载应用。

当前使用的Dockerfile内容：

# pull base image

FROM node:lts-alpine


ARG NODE_ENV=production
ENV NODE_ENV $NODE_ENV


ARG PORT=19006
ENV PORT $PORT
EXPOSE $PORT 19001 19002


ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
ENV PATH /home/node/.npm-global/bin:$PATH
RUN npm i --unsafe-perm --allow-root -g npm@latest expo-cli@latest

RUN mkdir /opt/dwl_frontend
WORKDIR /opt/dwl_frontend
ENV PATH /opt/dwl_frontend/.bin:$PATH
COPY package.json yarn.lock ./
RUN yarn
RUN yarn install


WORKDIR /opt/dwl_frontend

COPY ./ ./ 


ENTRYPOINT [ "npx", "serve" ]

解决方案 #

1. 修正serve命令的目标目录 #

问题核心在于：容器中执行npx serve时，默认以当前工作目录（/opt/dwl_frontend）作为静态文件根目录，而你的应用静态文件实际在web-build子文件夹中，因此serve会展示根目录的文件列表而非启动应用。

修改Dockerfile的ENTRYPOINT，明确指定serveweb-build文件夹：

ENTRYPOINT [ "npx", "serve", "web-build", "-l", "$PORT" ]

• -l $PORT指定服务监听的端口，确保和环境变量中的PORT一致。

2. 优化Docker镜像（可选） #

当前Dockerfile包含冗余步骤（重复执行yarn和yarn install），且生产环境不需要expo-cli或项目依赖（因为已经导出了静态文件）。可以改用更轻量的镜像来运行静态文件，比如nginx：

改用nginx的Dockerfile示例

FROM nginx:alpine

ARG PORT=19006
ENV PORT $PORT
EXPOSE $PORT

# 复制自定义nginx配置（处理SPA路由）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 将web-build文件夹复制到nginx默认静态文件目录
COPY web-build /usr/share/nginx/html

对应的nginx.conf配置文件

server {
    listen ${PORT};
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理React单页应用的路由，刷新页面时重定向到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 确认Docker Compose端口映射 #

确保docker-compose-prod.yml中正确映射了容器端口到主机端口：

services:
  dwl_frontend:
    build: .
    ports:
      - "19006:19006"
    environment:
      - PORT=19006

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