Manifest项目中的生产环境图片URL配置问题解析

问题背景

在使用Manifest构建应用时，开发者可能会遇到一个常见问题：即使在生产环境部署后，系统返回的图片URL仍然指向本地开发环境(localhost:10000)。这种情况通常发生在使用Manifest的图片属性功能时，系统未能正确识别生产环境的基地址。

问题表现

当开发者在集合中设置图片属性并上传图片后，通过JavaScript SDK查询数据时，返回的图片URL格式如下：

{
  small: "http://localhost:10000/storage/items/image/[date]/d5jem26m6lstqzi-small.jpg",
  large: "http://localhost:10000/storage/items/image/[date]/d5jem26m6lstqzi-large.jpg"
}

而期望的应该是生产环境的URL格式：

{
  small: "https://[生产环境URL]/storage/items/image/[date]/d5jem26m6lstqzi-small.jpg",
  large: "https://[生产环境URL]/storage/items/image/[date]/d5jem26m6lstqzi-large.jpg"
}

根本原因

这个问题的根源在于Manifest系统默认使用本地开发环境的基地址来构建图片URL。在开发环境中，这没有问题，但当应用部署到生产环境时，系统需要知道如何构建正确的绝对URL。

解决方案

Manifest提供了一个环境变量配置来解决这个问题：

1. 配置BASE_URL环境变量
   在项目的.env文件中添加BASE_URL变量，将其设置为生产环境的基地址。这个配置会让Manifest系统"知道"它运行的位置，从而生成正确的绝对URL。

2. 注意事项

   • 这个配置只会影响新上传的图片和文件，不会自动更新已存在的记录
   • 确保在生产环境部署前正确设置这个变量
   • 变量值应该是完整的基地址，包括协议(https://)

临时解决方案

对于已经存在的记录，开发者可以采用字符串处理的方式来临时解决问题：

// 从返回的URL中提取路径部分
let path = image.small.slice(22);
// 拼接生产环境URL
let correctUrl = productionUrl.concat(path);

但这种方法只是权宜之计，建议尽快配置BASE_URL环境变量以获得长期稳定的解决方案。

最佳实践建议

1. 在项目初期就配置好BASE_URL变量
2. 区分开发环境和生产环境的配置
3. 考虑在CI/CD流程中自动设置这个变量
4. 对于已有项目，可以先配置BASE_URL，然后考虑批量更新已有记录的URL

通过正确配置BASE_URL环境变量，开发者可以确保Manifest系统在各种环境下都能生成正确的资源URL，避免开发环境和生产环境之间的不一致问题。