客户端JS(例如AngularJS)+ Django REST后端:部署到单个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 /),或者与Django应用程序混合使用REST后端,例如http://blog.mourafiq.com/post/55099429431/end-to-end-web-app-with-django-rest-framework

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

我意识到在此之前有类似的讨论:客户端JS + Django Rest Framework 但它缺少更具体的细节.

Answer 1

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

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

1. 使用这里描述的eb和git .
   • 如果您想直接推送源代码,请运行良好.
2. 创建您自己的zip,以通过AWS管理控制台上传到beanstalk.亚马逊在这里有一个演练.
   • 我选择的路由所以我可以在部署之前'笨拙地构建'我的客户端并使用服务器代码压缩.

我使用python脚本自动创建了zip. 亚马逊的演练提供了一个示例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(起初可能会令人困惑,因为每个博客都以不同的方式显示它).这篇博客帮助我了解了一下只需要小心使用container_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中(如果您按照django上的beanstalk指南),部署时,/ static /文件夹中的客户端代码会自动推送到s3.

这种设置并不完美,我计划进行微调,但它正在发挥作用.以下是我遇到的一些缺点,我还没有解决:

• 由于我将客户端代码放在static /文件夹中,我的网站位于mysite.com/static/下.理想情况下,我希望它在mysite.com上作为root用户使用我的django-rest-framework内容在mysite.com/api/下
• 如果在默认情况下在beanstalk上使用自描述api,则不会推送资源,因为它们位于python目录中而不是源代码.

更新4-17-2014

我进一步完善了这个设置,所以我不再需要去mysite.com/static/来加载我的index.html.为此,我使用基于django类的视图将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'在我的角度代码中的所有相对URL前缀为static文件夹.我为此使用了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中受益.