Docker构建API Platform应用时React Markdown编辑器出现视觉BUG

首先看你的Dockerfile，prod阶段的文件复制顺序存在严重问题，这很可能是导致编辑器样式崩坏的核心原因：

在prod阶段，你先从builder镜像复制了构建好的api和pwa/out，但随后执行了COPY --chown=www-data:www-data . /var/www/$PROJECT_DIRECTORY，这会把本地项目目录的所有文件（包括未构建的pwa目录，里面没有out或者是旧的out）覆盖到镜像里，直接替换掉之前从pwa_builder复制的、已经构建好的静态资源。

核心修复：调整Dockerfile的复制逻辑 #

修改prod阶段的文件复制步骤，避免覆盖构建好的静态资源：

# Step 3: Start of the production stage
FROM --platform=linux/amd64 php:${PHP_VERSION}-fpm-alpine as php_prod

# ... 保留之前的环境变量、依赖安装步骤 ...

# 先复制整个项目目录，但后续用builder的构建产物覆盖关键目录
COPY --chown=www-data:www-data . /var/www/$PROJECT_DIRECTORY
# 从builder复制构建好的api和pwa/out，覆盖本地未构建的对应目录
COPY --from=php_builder /var/www/app/api /var/www/$PROJECT_DIRECTORY/api
COPY --from=pwa_builder /var/www/app/pwa/out /var/www/$PROJECT_DIRECTORY/pwa/out

# ... 保留后续的Nginx配置、entrypoint、权限设置等步骤 ...

更严谨的写法是只复制必要的非构建文件，彻底避免覆盖风险：

# Step 3: Start of the production stage
FROM --platform=linux/amd64 php:${PHP_VERSION}-fpm-alpine as php_prod

# ... 保留之前的环境变量、依赖安装步骤 ...

# 仅复制项目配置、脚本等非构建文件
COPY --chown=www-data:www-data docker/ /var/www/$PROJECT_DIRECTORY/docker/
COPY --chown=www-data:www-data api/.env /var/www/$PROJECT_DIRECTORY/api/.env

# 复制builder阶段的构建产物
COPY --from=php_builder /var/www/app/api /var/www/$PROJECT_DIRECTORY/api
COPY --from=pwa_builder /var/www/app/pwa/out /var/www/$PROJECT_DIRECTORY/pwa/out

# ... 保留后续的Nginx配置、entrypoint、权限设置等步骤 ...

其他排查方向 #

如果修复Dockerfile后问题仍存在，检查以下几点：

• Nginx静态资源配置：确保Nginx正确映射pwa/out目录作为静态资源根路径，同时处理SPA路由的fallback：

  server {
      listen 80;
      root /var/www/my_app/pwa/out;
  
      location /api {
          fastcgi_pass 127.0.0.1:9000;
          fastcgi_param SCRIPT_FILENAME /var/www/my_app/api/public/index.php;
          include fastcgi_params;
      }
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

• Next.js构建环境：在pwa_builder阶段显式设置生产环境变量，确保构建产物为优化后的版本：

  ENV NODE_ENV=production
  

  同时检查pwa/next.config.js，如果后台部署在非根路径下，需配置basePath或assetPrefix保证静态资源路径正确。

• 编辑器CSS依赖：确认react-mde和react-markdown的CSS文件被正确导入到React组件中：

  import 'react-mde/lib/styles/css/react-mde-all.css';
  import 'react-markdown/style.css';
  

  验证Next.js的CSS配置允许打包第三方CSS文件。

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