如何解决如何在反应应用程序中放置图像文件夹以进行生产/开发
我正在做一个个人项目,有两件事一直困扰着我。
这个项目是用 React 编写的,我正在使用一个快速节点应用程序作为后端。在我的前端,我可以加载图像并将其发送到服务器,并将文件保存在 upload
文件中,路径存储在 mongo 数据库中。
构建完成后,文件如下所示:
如您所见,我的上传文件夹位于公共文件夹中。 public 文件夹是 react 应用程序的构建。我刚刚重命名了它。问题是,如果我想更新构建,我必须将上传文件保存在其他地方,而不是将其重新引入新的构建(公共)文件夹中。这对我来说听起来不切实际。有没有办法解决这个问题?最佳实践? 那将是第一件事。
第二个是我用来将图像文件夹链接到 <img src=''/>
的路径。
现在,路径如下所示:http://localhost:5000/${ filePath }
。并且工作得很好。但我不认为在生产场景中我将能够使用此路径。
问题是:我是否也必须链接端口?类似于:http://localhost:${PORT}/${ filePath }
并且端口是 const PORT = process.env.PORT
?或者有更好的做法吗?获得自己的域的方法?
希望我提供了准确答案所需的所有信息。如果没有,我在等待反馈。谢谢!
解决方法
“最佳实践”是将文件上传到静态文件服务器(如 S3)并存储对文件密钥的引用。
但除此之外,我相信 Express 可以让您使用
设置多个静态文件目录app.use('/uploads',express.static(path.join(__dirname,'uploads')));
这样你就可以将你的上传目录保存在你的构建文件夹之外。
至于在您的资产 URI 中包含端口,我过去所做的是使用名为 domain
的环境变量指定当前环境的网址(包括协议、域和端口) .这样你的开发环境可以使用本地主机,但如果你决定将你的生产应用程序部署到公众,你可以将环境设置为域名——并且可以告诉你的快速服务器监听 80/443 端口。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。