使用帶有 webpack 的 npm run build 后如何使用 nginx 提供靜態文件

Question

使用 npm run build 生成開發構建后，我收到消息“提示：構建的文件旨在通過 HTTP 服務器提供服務。通過 file:// 打開 index.html 將不起作用。”

使用 nginx 執行此操作的最佳方法是什么？ 目前為了測試它，我使用了一個名為 serve 的 npm 模塊。

此外，如果我在 mydomain.com 上訪問我的主頁並搜索用戶，則一切正常，將我重定向到 mydomain.com/users/brad 但如果我隨后進行 url 搜索 formmydomain.com/users/布拉德我得到一個未找到的錯誤，任何幫助表示贊賞！

Answer 1

就我而言，當我必須使用 nginx 提供靜態內容時，它通常看起來像：

   location /static {
       alias $myroot/staticfiles;
   }

另外，如果您還沒有，請閱讀 NginX 服務靜態內容指南。

Answer 2

如果您熟悉 Docker 技術，我建議您使用 Docker Nginx 容器並將您的靜態內容從 Webpack Buildflow 添加到您的容器（這可以通過構建服務器自動完成）。 查看 Nginx 的以下 Docker 鏡像： https : //hub.docker.com/_/nginx/ 。

否則，您必須在托管主頁的服務器上安裝 nginx。 為此，請查看您的服務器操作系統，並訪問網絡以獲取服務器的詳細 nginx 設置。 沒有任何配置，nginx 將從/usr/share/nginx/html類似 Linux 的服務器上的靜態內容

如果您只有 FTP 訪問您的服務器，您可以通過 FTP/SFTP 將您構建的文件傳輸到特定文件夾，例如 /myHomepage，然后您的靜態內容是來自 yourdomain.de/myHompage 的服務器。