Ubuntu Apache 原生Django Angular 开发与部署

之前做了一个项目,要求用Angular7做前端,Django做后端。

其实标准做法是用Django RESTful Framework 做后端,Angular写WebApp。

然而Django是已经现成的,因为之前网站是完全用Django+Jquery做的,所以Django是原生的,要改版还有点小麻烦,所以我就想偷偷懒,直接拿原生Django做Angular的后端接口。

Angular的跨域问题已经是个老生常谈的问题了,在这里就不做介绍了。

但是以下的问题就不是Angular跨域的问题能解决了,因为Django原生自带的用户验证是基于session的,原生网站登录后,可以按F12打开控制台看见cookie中含有session key。但是由于浏览器的安全限制问题,导致如果是跨域请求,那么这个sessionkey会自动被浏览器过滤掉,所以就导致了angular登陆无限失败。

那么怎么办呢,苦思冥想后,突然,我发现在做Angular开发测试运行的时候,可以把npm命令修改,使得后台地址强行与Angular地址拉在一起,也就是代理。那么既然测试环境可以做代理,那我想Apache也可以做反向代理。话不多说,上Apache的配置文件代码:

首先你需要在/etc/apache2/ports.conf 中添加一行,使apache可以监听两个端口,我这里开的是79端口:


# If you just change the port or add more ports here, you will likely also
# have to change the VirtualHost statement in
# /etc/apache2/sites-enabled/000-default.conf

Listen 80

<IfModule ssl_module>
    Listen 443
</IfModule>

<IfModule mod_gnutls.c>
    Listen 443
</IfModule>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
Listen 79

然后关键的配置来了,在/etc/apache2/sites-available 文件夹中新建一个文件,我这边就取名django.conf啦,配置如下:

<VirtualHost *:80>
    DocumentRoot 你的angular路径
    <Directory 你的angular路径>
        Require all granted
        AllowOverride All
        Options FollowSymLinks
    </Directory>
    ProxyPass /api http://localhost:79/
    ProxyPassReverse /api http://localhost:79/
</VirtualHost>
<VirtualHost *:79>
    DocumentRoot 你的django路径
    WSGIDaemonProcess FrontEnd processes=6 threads=2 python-path=你的django路径
    WSGIProcessGroup FrontEnd
    <Directory 你的django路径>
        Require all granted
    </Directory>
    Alias /static/ 你的django路径/store/static/
    WSGIScriptAlias / 你的django路径/web_settings/wsgi.py
</VirtualHost>

到此部署配置就差不多快完成了,接着输入:

a2ensite django.conf;\
service apahce2 restart;

应用你的配置并重启apache服务,这样就完成了所有的部署。
当然了,要做这个配置需要启动apahce的proxy功能,大家可以看一下配置文件
可以看到,我用79端口配置了一个虚拟主机,发布了Django项目。然后用80端口配置了一个虚拟主机,发布了Angular项目,同时在这个Angular虚拟主机上配置了反向代理ProxyPass,设置/api这个路径自动转发给Django的虚拟主机,所以在Angular项目中应该避免有/api这个路由配置才能使这个配置生效,当然了“/api”这个转发路径是可以自定义的,大家可以根据自己的情况自己改名字。

反思(优缺点):
优点:
可以完全规避Angular跨域的问题,Django可以不用设置跨域允许,Angular同样也不需要设置跨域头。因为Apache的反向代理已经强行将Django和Angular拉在了一个域里;自然而然,浏览器的跨域安全规则也就对这样的部署方式无效了,原生Django做API的后台验证的Session key可以正常传给Angular前台。

缺点:
由于做了反向代理的操作,所以在高并发性能方面可能要大打折扣了,不过Django本来就不是用来处理高并发的框架,它本身是用来做管理系统的,所以这个缺点似乎可以忽略。
配置可能麻烦了点,做成Dockerfile或者.sh可执行配置文件会好一点应该。

这是开发过程中的奇思妙想,有不中听的不专业的还请各位海涵。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 很多人反应很难访问 Github Page,所以 ng-alain.com 转移到阿里云服务器上,因此做了一次完整...
    cipchk阅读 4,080评论 1 14
  • 1.Linux下如何用命令查看实时日志(完整命令) tail -f 路径.log查看前多少行 tai-200f 路...
    qianyewhy阅读 2,236评论 0 11
  • 面试题一:https://github.com/jimuyouyou/node-interview-questio...
    R_X阅读 1,608评论 0 5
  • 近年来,素有“六国五味”“众香之首”的沉香,因其迷人的香味与稀少的数量,价格越涨越高。而近日,却有香友咨询,自己入...
    沉香文化阅读 1,044评论 0 0
  • 一、浮动布局1.给儿子加上float:left2.给父元素加clearfix时刻记住这一点!! 二、flex布局1...
    阿龙哟阅读 551评论 0 0