create-react-app中动态上传的图片应存储于何处？

你当前能搞定图片上传到build目录并动态访问已经很不错了，但确实如你所说，把用户上传的动态图片存在build目录不是长期的最佳方案——毕竟build目录是前端构建的产物，每次重新执行npm run build都会被清空覆盖，而且如果用CI/CD流程部署，这个目录会被完全重新生成，之前用户上传的图片直接就没了。下面给你几个适合这种动态上传场景的最佳实践：

1. 优先使用独立的文件存储方案 #

这是生产环境最推荐的方式，完全和前端构建目录解耦：

• 云存储服务：比如阿里云OSS、腾讯云COS、AWS S3这类，用户上传图片时后端直接把文件传到云存储，拿到带CDN加速的访问链接，前端直接用这个链接展示就行。不用自己维护存储服务器，还能享受到CDN的带宽优势，稳定性也更高。
• 本地独立存储目录：如果暂时不想用云服务，可以在服务器上专门建一个和前端项目目录平级的文件夹（比如/var/www/uploads），后端把上传的图片存在这里，和前端的build目录彻底分开，避免被构建操作影响。

2. 用Nginx配置独立的静态资源访问路径（针对本地存储场景） #

如果选择本地独立目录存储，咱们可以通过Nginx把图片请求和前端页面请求分开处理，示例配置如下：

server {
    listen 4000;

    # 处理后端API请求，转发到你的后端服务端口（比如3001）
    location /api {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 处理上传图片的静态请求，指向咱们的独立存储目录
    location /uploads {
        root /var/www; # 这里是uploads目录的上级目录
        expires 30d; # 设置30天缓存，优化访问性能
        add_header Cache-Control "public, immutable";
    }

    # 处理前端页面的静态请求，指向create-react-app的build目录
    location / {
        root /var/www/your-react-app/build;
        try_files $uri $uri/ /index.html; # 支持SPA路由的fallback
    }
}

配置完成后，用户上传的图片存在/var/www/uploads下，前端直接通过http://localhost:4000/uploads/image.png就能访问，完全和前端构建目录隔离，再也不用担心构建丢失文件的问题。

3. 再明确下为什么create-react-app的两种官方方式不适用你的场景 #

• import方式：这是webpack的静态资源处理方式，只能在代码里引用已知路径的图片，webpack会把这些图片打包成带hash的文件名，适合项目内置的静态资源，但完全不支持用户动态上传的图片——总不可能每次用户传图都改代码重新构建吧？
• public文件夹：放在这里的文件会在构建时被复制到build目录，但它本质还是静态资源目录，动态上传的文件无法自动同步到这里，而且如果手动把上传的文件放到public，下次构建还是会被覆盖，确实不适合动态场景。

总结 #

生产环境的优先级推荐：云存储服务 > 本地独立目录+Nginx配置，绝对不要把用户上传的动态文件存在build或者public目录里。

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