django - 客户端 JS(例如 AngularJS)+ Django REST 后端 : Deploy onto single PaaS?

Question

基本上，我正在构建类似于此 GitHub 项目的应用程序:
https://github.com/zackargyle/angularjs-django-rest-framework-seed

是否可以将后端和前端都部署到单个 PaaS(例如 Heroku/Elastic Beanstalk)上？

拥有一个分离的 REST 后端和 JavaScript 前端似乎是一种更清洁/更可扩展的方式来做事，而不是像 [django-angular]: ( http://django-angular.readthedocs.org/en/latest/index.html/ ) 那样尝试将它们混合在一起，或者将 REST 后端与 Django 应用程序混合在一起，比如http://blog.mourafiq.com/post/55099429431/end-to-end-web-app-with-django-rest-framework

如果无法将其轻松部署到 Elastic Beanstalk 上，是否有一种简单的方法可以将 Django 后端部署到 Elastic Beanstalk 上，并将 AngularJS 前端部署到 Amazon EC2/S3 上，只需最少的配置？

我意识到在此之前有一个类似的讨论:Client JS + Django Rest Framework
但它缺乏更具体的细节。

Answer 1

我与 AngularJS 作为我的客户和 django-rest-framework 作为我的服务完全一样。我也有相同类型的 git 设置，其中服务器和客户端代码是同一个存储库中的 sibling 。我对 Heroku 没有任何经验，而且我是 beanstalk 的新手，但我能够部署我的网站并且它正在 AWS beanstalk 上运行。

使用 beanstalk，我知道有两种部署代码的方法。

使用 eb 和 git 描述 here .

如果您想直接推送源代码，效果很好。

创建您自己的 zip 以通过 AWS 管理控制台上传到 beanstalk。亚马逊有一个演练here .

我选择的路线是为了在部署之前“构建”我的客户端并使用服务器代码压缩。

我使用 python 脚本自动创建 zip。 Amazon's walkthrough提供了一个示例 python zip。你必须正确地构造它，我的看起来大致是这样的

app.zip
  /.ebextensions/
  /.elasticbeanstalk/
  /app/     <-- my django-rest-framework project (settings.py, wsgi.py, etc.)
  /restapi/ <-- my django-rest-framework application (my api)
  /static/  <-- AngularJS results of 'grunt build' put here
  /manage.py
  /requirements.txt

我知道你没有特别问，但是 .ebextensions/中的 .config 文件让我花了太长时间才开始工作。它可以被格式化为 YAML 或 JSON(起初可能会令人困惑，因为每个博客都以不同的方式显示它)。这个 blog帮了我很多，只是小心使用 container_commands: 而不是 commands:。我为此浪费了几个小时……

container_commands:
 01_syncdb:
  command: "django-admin.py syncdb --noinput"
  leader_only: true
option_settings:
 "aws:elasticbeanstalk:container:python:environment":
  "DJANGO_SETTINGS_MODULE": "app.settings"
 "aws:elasticbeanstalk:container:python":
  "WSGIPath": "app/wsgi.py"
  "StaticFiles": "/static/=static/"
 "aws:elasticbeanstalk:container:python:staticfiles":
  "/static/": "static/"
 "aws:elasticbeanstalk:application:environment":
  "AWS_SECRET_KEY": "<put your secret key here if you want to reference from env variable>"
  "AWS_ACCESS_KEY_ID": "<put your access key here>"
  "AWS_S3_Bucket": "<put your bucket here>"

在您创建的 zip 中(如果您遵循 beanstalk guides on django )，您的/static/文件夹中的客户端代码会在您部署时自动推送到 s3。

这个设置并不完美，我计划进行微调，但它正在工作。以下是我遇到的一些尚未解决的缺点:

由于我将客户端代码放在 static/文件夹中，因此我的站点位于 mysite.com/static/下。理想情况下，我希望它作为 mysite.com 的根，在 mysite.com/api/

下使用我的 django-rest-framework 内容。

如果您使用 self describing api默认情况下，在 beanstalk 上， Assets 不会被推送，因为它们位于您的 python 目录中，而不是您的源代码。

2014 年 4 月 17 日更新

我进一步完善了这个设置，所以我不再需要去 mysite.com/static/来加载我的 index.html。为此，我使用了 django class based view将 index.html 映射到我网站的根目录。我的 urls.py 看起来像

urlpatterns = patterns('',
  (r'^$', TemplateView.as_view(template_name="index.html")),
  ...
)

在我的 settings.py 中，我配置了 TEMPLATE_DIRS 如下

TEMPLATE_DIRS = (
  os.path.join(os.path.dirname(__file__) , '../static').replace('\\','/')
)

我使用 ../static 是因为我的静态目录是我的 app 目录的兄弟。

最后一部分是更新我的 Gruntfile.js，因此“grunt build”为我的 Angular 代码中的所有相对 URL 加上静态文件夹的前缀。我用了 grunt-text-replace为了这。这是我的代码在/dist 文件夹中缩小后运行的最后一个任务。这种方法的缺点是，如果我将静态内容添加到脚本、bower_components、样式等之外的新子文件夹中，我将不得不更新此任务。

replace: {
    replace_js_templates: {
        src: ['dist/scripts/*.js'],
        overwrite: true,                 // overwrite matched source files
        replacements: [{
            from: /templateUrl:\s*"/g,
            to: 'templateUrl:"static/'
        }]
    },
    replace_index: {
        src: ['dist/index.html'],
        overwrite: true,                 // overwrite matched source files
        replacements: [{
            from: /(src|href)="(bower_components|styles|scripts)/g,
            to: '$1="static/$2'
        }
        ]
    }
},

现在 django 将为我的 index.html 页面提供服务，但我的/static/目录中的所有其他内容都可以从 CDN 中受益。