如何从Heroku上的Django项目中正确提供我的Angular应用程序静态文件? [英] How to properly serve my Angular application static files from a Django project on Heroku?
问题描述
我试图在Heroku上部署我的使用Django 2，DRF和Angular 6构建的应用程序，并且努力获取Angular应用程序的静态文件.我在开发环境和Heroku上都使用WhitheNoise.该项目的结构如下:
I am trying to deploy on Heroku my app built with Django 2, DRF and Angular 6, and struggling to get the static files of my Angular app served. I am using WhitheNoise for both development environment and on Heroku. The structure of the project is as follows:
my_project/
|-frontend/
| |- dist/
| |- ...
|-myproject/
| |-settings/
| | |- __init.py
| | |- base.py
| | |- prod.py
| | |- dev.py
| |- __init__.py
| |- urls.py
| |- views.py
| |- wsgi.py
|-other_app1/
| |- ...
|-other_app2/
| |- ...
|-staticfiles/
| |-....
|-manage.py
|-Procfile
|-requirements.txt
我对Heroku的配置方式是，每次部署我的应用程序时，都会构建我的角度应用程序，因此将在frontend/dist/中生成静态文件，然后运行collectstatic并将其复制到我的static文件文件夹中.我项目的根源.我的设置是:
I have configured Heroku in such a way that every time my app is deployed, my angular app is built, so the static files are generated in frontend/dist/, then collectstatic is run and copies them to my static files folder in the root of my project. My settings are:
ANGULAR_APP_DIR = os.path.join(BASE_DIR, 'frontend/dist')
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
('frontend', os.path.join(ANGULAR_APP_DIR)),
]
这可以正常工作，并通过名为frontend/
This works fine and collects all the files of my angular app inside staticfiles/ withing a folder called frontend/
我的问题是，现在我正在尝试提供位于staticfiles/frontend中的index.html文件，但是我无法使其工作:
My problem is that now I am trying to serve the index.html file that is located in staticfiles/frontend and I cannot make it work:
urls.py
urlpatterns = [
path('', HomePageView.as_view()), #first one
# .... Other urls
]
views.py
from django.views import static
# Serves the index page
class HomePageView(TemplateView):
def get(self, request, **kwargs):
return static.serve(request,'index.html', 'staticfiles')
这找到并提供了index.html文件，但由于没有附加'/static/'，因此无法成功提供其余的必要js文件供我的应用程序运行(polyfills，main，style ...)自动转到请求他们的网址.有人知道我如何告诉Django或Heroku在staticfiles/frontend文件夹下找到它们吗?
This finds and serves the index.html file, but fails to serve successfully the rest of necessary js files for my app to run (polyfills, main, styles...), as the '/static/' is not appended automatically to the url that requests them. Does someone know how I can tell Django or Heroku to find them under the staticfiles/frontend folder?
生成的index.html如下所示:
The generated index.html looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Angular Project</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.578ada0b0e3742b4b4bb.css"></head>
<body class="with-top-navbar">
<app-root></app-root>
<script type="text/javascript" src="runtime.92d800a8cdfd75f49eae.js"></script>
<script type="text/javascript" src="polyfills.7ee4ee2275a8c5d5ea6f.js"></script>
<script type="text/javascript" src="main.4aeccc46b72bbab58fd0.js"></script></body>
</html>
控制台的输出是:
[29/Jun/2018 13:31:30] "GET / HTTP/1.1" 200 638
Not Found: /styles.578ada0b0e3742b4b4bb.css
Not Found: /runtime.92d800a8cdfd75f49eae.js
[29/Jun/2018 13:31:30] "GET /styles.578ada0b0e3742b4b4bb.css HTTP/1.1" 404 2353
Not Found: /polyfills.7ee4ee2275a8c5d5ea6f.js
Not Found: /main.4aeccc46b72bbab58fd0.js
[29/Jun/2018 13:31:30] "GET /polyfills.7ee4ee2275a8c5d5ea6f.js HTTP/1.1" 404 2359
[29/Jun/2018 13:31:30] "GET /runtime.92d800a8cdfd75f49eae.js HTTP/1.1" 404 2353
[29/Jun/2018 13:31:30] "GET /main.4aeccc46b72bbab58fd0.js HTTP/1.1" 404 2344
Not Found: /styles.578ada0b0e3742b4b4bb.css
[29/Jun/2018 13:31:32] "GET /styles.578ada0b0e3742b4b4bb.css HTTP/1.1" 404 2353
Not Found: /runtime.92d800a8cdfd75f49eae.js
[29/Jun/2018 13:31:32] "GET /runtime.92d800a8cdfd75f49eae.js HTTP/1.1" 404 2353
Not Found: /polyfills.7ee4ee2275a8c5d5ea6f.js
[29/Jun/2018 13:31:32] "GET /polyfills.7ee4ee2275a8c5d5ea6f.js HTTP/1.1" 404 2359
Not Found: /main.4aeccc46b72bbab58fd0.js
[29/Jun/2018 13:31:32] "GET /main.4aeccc46b72bbab58fd0.js HTTP/1.1" 404 2344
另外，请注意，我不想手动编辑生成的index.html也不要将其放置在其他位置，因为这会改变我的部署工作流程.
Also, please note that I do not want to edit manually the generated index.html nor place it somewhere else, as this would change my deployment workflow.
此外，我知道django.views.statics.serve不适合生产，因此如果您知道如何以其他方式提供此文件，也欢迎提供提示
In addition, I know that django.views.statics.serve is not appropriate for production, so tips are also welcome if you know how to serve this file in some other way
谢谢！
推荐答案
最后，我可以通过安装以下不错的软件包自己解决它: django-spa ，它建立在whitenoise之上，可直接从statics文件的根文件夹提供SPA中的索引和文件.
In the end I could solve it myself by installing this nice package: django-spa that builds on top of whitenoise to serve index and files from a SPA directly from the statics files root folder.
使用软件包的示例此处
此外，我还必须从收集静态填充的目录中删除"frontend"文件夹:
Also, I had to remove the "frontend" folder from the directory where static filles are collected:
STATICFILES_DIRS = [
os.path.join(ANGULAR_APP_DIR),
]
然后删除我用来在'/'上提供索引的视图:
And Remove the view I was using to serve my index on '/':
urlpatterns = [
# The following SPA settings are handled in Django-SPA
# - everything not matched in Django's urlpatterns goes to /
# - index.html served on /
# - all /static/... files served on /...
# other views....
path('admin/', admin.site.urls),
]
感谢该软件包的 @metakermit ！
这篇关于如何从Heroku上的Django项目中正确提供我的Angular应用程序静态文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
