客户端JS（例如AngularJS）+ Django REST后端：部署到单个PaaS？ [英] Client side JS (e.g. AngularJS) + Django REST Backend: Deploy onto single PaaS?
问题描述
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的静止框架
如果不可能将其轻松部署到Elastic Beanstalk上，是否有一种简单的方法来将Django后端部署到Elastic Beanstalk上，而AngularJS前端却以最小的配置进入Amazon EC2 / S3？
我知道部署代码的两种方式。
- 使用eb和git描述这里。
- 如果你想直接推送你的源代码，你可以很好的。
- 创建自己的邮箱，通过AWS管理控制台上传到beanstalk。亚马逊有一个演练这里。
- 路由我选择了，所以我可以在部署之前用服务器代码咕噜构建我的客户端和zip。
我使用python脚本自动化了zip创建。 亚马逊的演练提供了一个示例python zip。你必须正确地结构化，我的外观大致如此
app.zip
/.ebextensions/
/.elasticbeanstalk/
/ app /< - 我的django-rest-framework项目（settings.py，wsgi.py等）
/ restapi /< - 我的django-rest - 框架应用程序（我的api）
/ static /< - AngularJS结果'grunt build'放在这里
/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：< ;把你的秘密密钥放在这里，如果你想参考env变量>
AWS_ACCESS_KEY_ID：<把你的访问密钥在这里>
AWS_S3_Bucket：<把你的桶在这里>
在您创建的zip中（如果您遵循 django上的beanstalk指南）部署时，/ static /文件夹中的客户端代码会自动推送到s3。
这个设置不完美，我打算微调一些东西，但是它的工作。这是我遇到的一些缺点，我还没有解决：
- 由于我将客户端代码放在我的站点的静态/文件夹坐在mysite.com/static/下。理想情况下，我希望将其作为mysite.com的根目录，并在mysite.com/api /
- 下使用我的django-rest-framework内容如果您使用自我描述api 关于beanstalk默认情况下，资产赢得了因为他们坐在你的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，因为我的静态目录是我的应用程序目录的兄弟。
最后一件是更新我的Gruntfile.js，所以'grunt build'将我的角度代码中的所有相对URL与静态文件夹前缀。我为此使用了 grunt-text-replace 。这是在我的代码坐在/ dist文件夹中之后运行的最后一个任务。这种方法的缺点是如果我除了脚本，bower_components，样式等之外添加静态内容到新的子文件夹，我将不得不更新此任务。
替换：{
replace_js_templates：{
src：['dist / scripts / *。js']，
覆盖：true，//覆盖匹配的源文件
替换：[{
from：/ templateUrl：\s */ g，
to：'templateUrl：static /'
}]
}，
replace_index：{
src：['dist / index.html']，
覆盖：true，//覆盖匹配的源文件
替换：[{
from： /（src | href）=（bower_components | styles | scripts）/ g，
to：'$ 1 =static / $ 2'
}
]
}
}，
现在，django将为我的index.html页面提供服务，但是/ static /目录中的其他内容可以受益于CDN。
Basically I'm structuring my app similar to this GitHub project: https://github.com/zackargyle/angularjs-django-rest-framework-seed
Is it possible to deploy both the backend and frontend onto a single PaaS such as Heroku/Elastic Beanstalk?
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
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?
I realize there's a similar discussion before this: Client JS + Django Rest Framework but it lacks more specific details.
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.
With beanstalk there are two ways I know of to deploy your code.
- Use eb and git described here.
- Works well if you want to push your source code directly.
- Create your own zip to upload to beanstalk via the AWS management console. Amazon has a walkthrough on it here.
- Route I chose so I can 'grunt build' my client and zip with server code before deploying.
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
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>"
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:
- 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.
UPDATE 4-17-2014
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")),
...
)
and in my settings.py I configured TEMPLATE_DIRS as follows
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(__file__) , '../static').replace('\\','/')
)
I use ../static because my static directory is a sibling of my app directory.
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'
}
]
}
},
Now django will serve my index.html page but everything else in my /static/ directory can benefit from a CDN.
这篇关于客户端JS（例如AngularJS）+ Django REST后端：部署到单个PaaS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
