如何將圖像文件夾放置在反應應用程序中以進行生產/開發

Question

我正在做一個個人項目，有兩件事一直困擾着我。 這個項目是用 React 編寫的，我正在使用一個 express 節點應用程序作為后端。 在我的前端，我可以加載圖像並將其發送到服務器，並將文件保存在upload文件中，路徑存儲在 mongo 數據庫中。

構建后，文件如下所示：

如您所見，我的上傳文件夾位於公共文件夾內。 公共文件夾是 react 應用程序的構建。 我只是重命名了它。 問題是，如果我想更新構建，我必須將上傳文件保存在其他地方，而不是在新的構建（公共）文件夾中重新引入它。 這對我來說聽起來不切實際。 有辦法解決嗎？ 最佳實踐？ 那將是第一件事。

第二個是我用來將圖像文件夾鏈接到<img src=''/>的路徑。 現在，路徑如下所示： http://localhost:5000/${ filePath } 。 並且工作得很好。 但我不認為在生產場景中我將能夠使用這條路徑。

問題是：我是否也必須鏈接端口？ 類似： http://localhost:${PORT}/${ filePath }端口是const PORT = process.env.PORT ？ 還是有更好的做法？ 獲得自己的域名的方法？

希望我提供了准確答案所需的所有信息。 如果沒有，我正在等待反饋。 謝謝！

Answer 1

“最佳實踐”是將文件上傳到 static 文件服務器（如 S3）並存儲對文件密鑰的引用。

但除此之外，我相信 Express 可以讓您使用設置多個 static 文件目錄

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

這樣您就可以將上傳目錄保留在構建文件夾之外。

至於在資產 URI 中包含端口，我過去所做的是使用一個名為domain的環境變量，它指定當前環境的 web 地址（包括協議、域和端口）。 這樣，您的開發環境可以使用 localhost，但如果您決定將生產應用程序部署到公眾，您可以將環境設置為域名 - 並且可以告訴您的快速服務器偵聽 80/443 端口。