如何讓 django 為非靜態 js 文件提供服務？

Question

我的 python 后端服務器將 React 應用程序作為靜態文件提供。 在 React 中，當我們構建應用程序時，src 目錄中的所有內容都被捆綁在一起，但是，在 src 之外的公共目錄中有一個 javascript 文件，我將其留在那里，因為我想在構建后保持原狀。 我這樣做的原因是因為在 src 代碼中，我創建了 Worker，而要創建 Worker，我們必須指定 Worker 文件的 url。 這個文件叫worker.js，構建后保持不變，但是部署后端后，前端無法訪問/worker.js url，因為顯然django只提供靜態文件，所以/worker.js無法識別，索引.html 被返回。 我怎樣才能訪問這個非靜態js文件？

Answer 1

靜態文件如何工作的解釋：

發展

讓我們首先讓它在開發情況下工作（django 使用 runserver 為您的靜態文件提供服務）。 STATIC_ROOT 在這種情況下不相關。

Django 可以從這些位置找到所有靜態文件：

• 任何位於您的應用程序內的 /static/ 文件夾，例如，如果您有一個blog應用程序，那么文件夾/blog/static/將被解析。
• 在STATICFILES_DIRS指定的任何文件夾，例如，如果您的主項目中有一個assets文件夾，您可以使用os.path.join(BASE_DIR, "assets")將其添加到STATICFILES_DIRS ，其中BASE_DIR是manage.py的位置。

如果blog應用程序和您的資產目錄都需要“logo.png”怎么辦？ 與其擔心圖像、js 文件、css 文件有唯一的名稱，不如使用命名空間。 在blog應用程序中，將所有靜態文件放在/blog/static/blog/因此在使用它們時您需要參考/blog/logo.png並且您確定它會是正確的 logo.png。 在主項目中，將文件放在assets/assets （或稱為static/assets ）中，以便您可以參考/assets/logo.png獲取項目的主要資產。

現在，如果你設置STATIC_URL = "/static/" ，這會告訴 django 所有靜態文件 url 都以 "/static/" 為前綴，即上面的標志可以用 "/static/assets/logo.png" 和 "/靜態/博客/徽標.png”。 這是必需的，因為它允許將靜態文件的 url 與 Django 路由到視圖的 url 區分開來。

實際上，在您的模板中，您將使用{% static 'blog/logo.png' %}這樣您就不必在任何地方對STATIC_URL進行硬編碼。

現在進入webpack。 它需要將它的包資產放在上述任何目錄中，或者放在你 ** 也添加到STATICFILES_DIRS自己的目錄中。 讓我們假設后者：我們的項目中還有一個/webpack/webpack/文件夾，它定義在STATICFILES_DIRS ，因此所有 webpack 資產都將通過 url 前綴“/static/webpack/”訪問。

worker.js 文件應該在“assets/assets”和你的其他腳本中，如果你通過 url 引用它（用 HTTP 請求獲取它），你應該通過“/static/assets/worker.js”引用它。 js”或使用相對網址“../assets/worker.js”。

生產

部署后，您不再使用 Django 提供靜態文件，而是使用網絡服務器，例如 Apache 或 nginx。 您將 Web 服務器配置為識別以STATIC_URL （“/static/”）開頭的任何請求，並從STATIC_ROOT獲取相應的文件。

因此，首先要做的是將 django 應用程序的所有靜態文件復制到 Web 服務器可訪問的文件夾/位置。 該位置在您的項目文件夾之外。

設置STATIC_ROOT = os.path.abspath(os.path.join(os.path.dirname(os.path.dirname(BASE_DIR)), 'static')) ，將其指向父文件夾中的“靜態”目錄你的項目。

然后運行python manage.py collectstatic 。

這會將所有靜態文件復制到項目外部的這個新靜態文件夾中。 你會看到的：

path/to/dir/
   |_ static/
   |   |_ blog/
   |   |   |_ logo.png
   |   |_ assets/
   |   |   |_ logo.png
   |   |   |_ worker.js
   |   |_ webpack/
   |       |_ some_file.js
   |_ django_project/
       |_ manage.py
       |_ main_app/
       |    |_ settings.py
       |_ assets/
       |    |_ assets/
       |        |_ worker.js
       |_ blog/
       |   |_ static/
       |       |_ blog/
       ...

現在，當您的 Web 服務器看到 url “/static/assets/worker.js” 時，它將返回“path/to/dir/static/assets/worker.js”中的文件。

如果你讓你的生產服務器構建 webpack 文件而不是將它們提交到你的源（即它們不在“django_project”中），那么你應該配置 webpack 將它們放在正確的位置“path/to/dir/static/webpack /" 因為那是您的 Web 服務器將查找它們的地方。

想象一下，現在您將所有內容都轉移到 3rd 方存儲提供商。 然后你只需要做兩件事：

• 為該存儲提供程序安裝和配置存儲后端，以便 Django 知道如何在那里讀/寫文件（使用collecstatic ）。 這可能包括設置STATIC_ROOT ，例如STATIC_ROOT = https://my-bucket.my-storage-provider.com/static 。
• 將STATIC_URL設置為存儲提供程序的 URL，例如STATIC_URL = https://my-bucket.some_cdn.com/ 。 在這里，我們指向您已配置為知道從何處獲取文件的 CDN。

就是這樣，一切都在繼續工作。