基本上我构建我的应用程序类似这样的GitHub项目： https://github.com/zackargyle/angularjs-django-rest-framework-seed

Basically I'm structuring my app similar to this GitHub project: https://github.com/zackargyle/angularjs-django-rest-framework-seed

是否有可能同时部署在后端和前端到一个单一的PaaS如Heroku的/弹性魔豆？

Is it possible to deploy both the backend and frontend onto a single PaaS such as Heroku/Elastic Beanstalk?

有一个分开的REST后端和JavaScript前端似乎是一个更清洁/更可扩展的方式来做事，而不是试图将它们混合在一起，就像[Django的角度]：（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

Having a separated REST backend and JavaScript frontend seems like a cleaner/more scalable way to do things rather than trying to mix them together like [django-angular]: (http://django-angular.readthedocs.org/en/latest/index.html/), or having a REST backend mix with the Django app like http://blog.mourafiq.com/post/55099429431/end-to-end-web-app-with-django-rest-framework

如果这是不可能很容易地将其部署到弹性魔豆，有一种简单的方式来部署Django的后端到弹性魔豆，以及AngularJS前端到Amazon EC2 / S3使用最低配置？

If it is not possible to deploy it easily onto Elastic Beanstalk, is there an easy way to deploy the Django backend onto Elastic Beanstalk, and AngularJS frontend to Amazon EC2/S3 with minimal configuration?

我知道有一个类似的讨论在此之前：客户端JS +的Django的REST框架 但它缺乏更具体的细节。

I realize there's a similar discussion before this: Client JS + Django Rest Framework but it lacks more specific details.

推荐答案

我在完全相同的船AngularJS为我的客户和Django的REST的架构为我服务。我也有相​​同类型的混帐设置的服务器和客户机code是在同一个库中的兄弟姐妹。我没有与Heroku的任何经验，我是新来的魔豆，但我还是能够部署我的网站和它的工作在AWS上的豆茎。

I'm in the exact same boat with AngularJS as my client and django-rest-framework as my service. I also have the same type of git setup where the server and client code are siblings in the same repository. I don't have any experience with Heroku and I'm new to beanstalk but I was able to deploy my site and it's working on AWS beanstalk.

由于豆茎有两种方法，我所知道的部署code。

With beanstalk there are two ways I know of to deploy your code.

使用EB和Git描述此处。 工作好，如果你想要把你的源$ C ​​$ C直接。 路线我选择了这样我就可以'咕噜打造我的客户和部署之前，服务器code拉链。

我自动zip创建使用python脚本。 亚马逊的演练提供了一个示例蟒蛇拉链。你必须采用正确的，我的看起来大致是这样的

I automated the zip creation using a python script. Amazon's walkthrough provides an example python zip. You have to structure it properly, mine looks roughly like this

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：而不是命令：。我失去了几个小时，这...

I know you didn't specifically ask but the .config file inside .ebextensions/ took me way too long to get working. It can be formatted as YAML or JSON (can be confusing at first as every blog shows it differently). This blog helped me out quite a bit just be careful to use container_commands: and not commands:. I lost a few hours to that...

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 ）客户端code在你的/静/文件夹会自动推当你部署到S3。

In the zip you create (if you follow the beanstalk guides on django) the client code in your /static/ folder is automatically pushed to s3 when you deploy.

此设置是不完美的。我打算微调的东西，但它的工作。这里有一些不足之处我遇到了，我还没有解决尚未：

This setup isn't perfect and I plan on fine tuning things but it's working. Here are some downsides I ran into that I haven't solved yet:

因为我把我的客户code静态/文件夹下mysite.com/static/我的网站坐。理想情况下我希望它担任的根在mysite.com我的下mysite.com/api Django的休息，框架内容/ 如果您使用自描述API 豆茎上默认的资产将不会推，因为他们在你的Python目录中，而不是与你的源$ C ​​$ C坐。 Since I put my client code in the static/ folder my site sits under mysite.com/static/. Ideally I'd want it to be served as the root at mysite.com with my django-rest-framework content under mysite.com/api/ If you use the self describing api on beanstalk by default the assets won't be pushed since they sit in your python directory and not with your source code.

更新2014年4月17日

我进一步完善了这个设置让我再也不用去mysite.com/static/~~V加载我的index.html。要做到这一点我用了一个 Django的基于类的视图地图index.html来我的网站的根目录。我的urls.py看起来像

I further refined this setup so I no longer have to go to mysite.com/static/ to load my index.html. To do so I used a django class based view to map index.html to the root of my site. My urls.py looks like

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

在我的settings.py我TEMPLATE_DIRS配置如下：

and in my settings.py I configured TEMPLATE_DIRS as follows

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

我用../static，因为我的静态目录是我的应用程序目录的兄弟。

I use ../static because my static directory is a sibling of my app directory.

最后一块是更新我Gruntfile.js如此咕噜打造'prefixes所有的相对URL在我的角度code与静态文件夹。我用咕噜文本替换这一点。它的运行后，我的code坐在精缩在/ DIST文件夹中的最后一个任务。这样做的缺点的方法是，我会更新这个任务，如果我添加静态内容到一个新的子文件夹，除了剧本，bower_components，款式等。

The last piece was to update my Gruntfile.js so 'grunt build' prefixes all the relative URLs in my angular code with the static folder. I used grunt-text-replace for this. It's the last task that runs after my code is sitting minified in a /dist folder. The downside to this approach is I'll have to update this task if I ever add static content to a new subfolder besides scripts, bower_components, styles, etc.

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页面，但一切在我的/静/目录可以受益于CDN。

Now django will serve my index.html page but everything else in my /static/ directory can benefit from a CDN.