V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
litp
V2EX  ›  Python

Django+Vue 的项目实际部署的时候,使用 Django 集成 vue 到一个服务上,还是 Django 和 vue 分开?

  •  
  •   litp · 2020-03-02 16:12:09 +08:00 · 6028 次点击
    这是一个创建于 1711 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想了好久 最终还是在这里提问了,因为我毕竟是属于后端

    目前在架构选择,基本上定了 Django + Vue

    但是实际部署的时候,就有两种情况

    1. 看到很多教程会这样推荐,就是在 Django 上集成 VUE,也就是在 settings.py 配置 templates 目录到 vue 的 dist 目录,这样可以实现,在 Django 的服务上直接调取 vue 前端,后端 api 还是使用 Django 的。

    2. Django 自己启服务,只提供 API,VUE 自己启动服务,只提供前端

      我又在想,既然前后端分离开发,那么如果按照“上 1”的方案来的话,每次前后端开发完之后,还得做单独的集成,这个时候就需要前后端一起来搞了,或者说多了一步骤,为何不直接 Django 跑自己的服务,vue 跑自己的服务,这样前后端开发完,只要接口没问题,直接就可以分别上线了,而不需要集成这一步骤。

    各位大佬有什么建议?

    26 条回复    2020-03-04 13:56:41 +08:00
    mayx
        1
    mayx  
       2020-03-02 16:14:19 +08:00 via Android
    我觉得分开好,直接上 nginx,反代 django 就 OK 了
    ThirdFlame
        2
    ThirdFlame  
       2020-03-02 16:16:19 +08:00
    同意楼上的观点。
    just1
        3
    just1  
       2020-03-02 16:17:24 +08:00 via Android
    1 事实上在正式部署的时候是 nginx 读取你的前端静态文件,前端跟 django 没有关系,django 只是帮忙把 dist 的文件 copy 到 static
    2vue 提供的服务那个是调试环境呀
    GoLand
        4
    GoLand  
       2020-03-02 16:18:16 +08:00
    当然分开。不管是出于开发还是部署,都应该分开放。分开放前后端自己管理自己的代码库,也不存在代码间的相互依赖。
    saulshao
        5
    saulshao  
       2020-03-02 16:21:54 +08:00
    显然分开是对的,网上的教程是为了教你怎么入门。
    入门教材肯定不能讲你开发的时候准备俩虚拟机,一个起 vue,另外一个起 Django,然后后端读完数据库,切换到前端的虚拟机上去继续编界面......
    这估计读者一看就直接关了。
    litp
        6
    litp  
    OP
       2020-03-02 16:26:29 +08:00
    @just1 第一点我还真不知道,我现在的小测试环境是,集成到了 templates 之后,应该是根据 Django 的路由,走到的 vue index,所以应该是在 apache 或者 uwsgi 上,集成到了 templates 里之后,应该不会直接走 nginx 吧。
    just1
        7
    just1  
       2020-03-02 16:57:54 +08:00
    @litp #6 嗯。。。我发出去才感觉不对但不能改了...
    可以 location / 配置 vue
    location /api/ 反代 django
    tonytonychopper
        8
    tonytonychopper  
       2020-03-02 17:07:18 +08:00
    分开就完事了,楼上说的对,教程只是图个方便。
    ben1024
        9
    ben1024  
       2020-03-02 17:17:08 +08:00
    看渲染模式
    1.模版渲染模式直接写在一起
    2.spa 渲染模式分开
    更喜欢模版渲染
    chuanqirenwu
        10
    chuanqirenwu  
       2020-03-02 17:23:50 +08:00   ❤️ 1
    最好是分开,不要把 django 的模板引擎和 Vue 的模板混到一起,不然你会发现你会陷入汪洋大海。
    Django 和 Vue 结合的你可以看下这个项目: https://github.com/zmrenwu/django-blog-project

    大部分页面都是 django 模板引擎渲染,评论应用使用 Vue 渲染,通过 API 与后台交互。Vue 相关部分使用 Webpack 打包,通过 django-webpack-loader 读取打包后的文件。
    litp
        11
    litp  
    OP
       2020-03-02 17:24:28 +08:00
    @ben1024 看来是大佬,我刚搜了下 spa 渲染模式,应该就是指的单页面应用吧。
    1. 目前来看如果将 vue 集成到 Django 之后,也是只有一个前端入口,比如 index。所以进去之后,还是走 vue 自己的路由,只不过 index 是走的 Django 路由。所以还是个单页面应用。
    2.而且集成到了 Django 之后,应该是算模版渲染,可数据都是 api 来的了,感觉模版渲染的好处也用不到。

    所以是不是结论还是得分开啊,这样自己搞自己的,以后 vue 转给前端也方便😂
    litp
        12
    litp  
    OP
       2020-03-02 17:30:06 +08:00
    @chuanqirenwu 感谢,看了你的 GitHub。
    请问下,为什么页面渲染不完全用 vue 呢,而是要一部分使用 Django 模版,一部分使用 vue。
    完全的分开前后端不是更有利于分工合作么?
    chuanqirenwu
        13
    chuanqirenwu  
       2020-03-02 17:41:07 +08:00   ❤️ 1
    @litp 一部分 django 一部分 vue 是出于 SEO 考虑。这个我一个人维护小项目,没有分离的必要,大点项目肯定是 vue + rest api。另外 Django 模版 和 Vue 配合起来非常顺畅,想怎么用完全由自己根据需求来决定就可以了。
    总之遵循一个原则就行,别学网上的同时用 django 和 vue 渲染一个模板。首先是语法冲突,其次是不好维护。
    chuhemiao
        14
    chuhemiao  
       2020-03-02 17:43:06 +08:00
    vue 放 oss 上省心省事
    litp
        15
    litp  
    OP
       2020-03-02 17:51:47 +08:00
    @chuanqirenwu 谢谢。
    moonlitlaputa
        16
    moonlitlaputa  
       2020-03-02 18:02:07 +08:00 via Android
    同意 1 楼的观点
    ben1024
        17
    ben1024  
       2020-03-02 18:13:48 +08:00   ❤️ 1
    @litp
    1.spa 的集成进入 Django 是不会使用到后端路由,只是走了静态页面到访问路由,这个在 nginx 配置路由时可以设置
    2.使用 template 到好处是权限控制,渲染速度,渲染方式,数据级别隐藏,跨域交互,这些优点都是隐性的(更适合展示型界面输出)
    有专业的前端,或对项目本身整体性不在意,非开丢给前端也无所谓
    find456789
        18
    find456789  
       2020-03-03 11:59:36 +08:00
    可以在一个机器上, 用 docker, 一个 nginx 容器,一个 django 容器

    nginx:
    vue 放在 www 目录下
    同时 nginx 反代 django
    LeeReamond
        19
    LeeReamond  
       2020-03-03 12:20:48 +08:00
    @litp
    问 LZ 个问题,大部分答案似乎都倾向于分开写。但是我感觉现在的前后端框架开发模式已经高度解耦了,比如一楼所谓的写在一起的方式是通过 webpack 配置 dist 目录来实现“写在一起”,感觉与当初的 php 那种大锅炖的模式已经完全不同了,前后端唯一耦合的地方应该就是前端的 api 指向需要指向后端的地址了吧。。

    有一个问题是,你的服务部署生产环境终归还是要通过 nginx 反向代理出去用的,Django 直接暴露显然比较蛋疼一些。如果终归是要反向代理的话,那么比如说按照楼上们回答的方式,是将 node 部署的 vue serve 比如部署在 127.0.0.1:10086,而 Django 提供的 serve 在 127.0.0.1:10087,那么你总不可能用 nginx 将 10087 反代到 10086,一个端口不是只能绑一个程序么,10086 已经被 node 吃掉了。所以 node 部署的服务如果要访问 api 必须得挂 cors。本菜鸡的疑问是我感觉这不是有种脱裤子放屁的感觉么。。。
    litp
        20
    litp  
    OP
       2020-03-03 13:59:07 +08:00
    @LeeReamond
    跨域是肯定的,前端不只一个 PC,还会有 APP 和 H5 呢,后端也不一定是一台服务。
    我这边也不清楚 跨域 有啥不妥😂,现在前后端分开的话,跨域很正常吧。

    我现在为了后续前端考虑的话,我就直接 django + vue 分开了,分开开发,分开部署,以后前端接手也好搞。
    wnanbei
        21
    wnanbei  
       2020-03-03 14:06:54 +08:00
    @LeeReamond 实际上用 nginx,那所有的前后端请求都是去请求 nginx,跟你前后端部署在哪个端口已经没关系了
    encro
        22
    encro  
       2020-03-03 14:13:33 +08:00
    1,nginx 跑 vue 静态,对应根目录;
    2,WSGI/ASGI + Supervisord 部署 django rest framework ;
    3,nginx 代理 api 目录到 wsgi/ASGI 服务端口;
    LeeReamond
        23
    LeeReamond  
       2020-03-03 15:01:45 +08:00
    @litp

    cors 我也不懂。。不过我的感觉是既然本身是作为一个安全机制专门设计出来的,然后你还非得要把它关掉,岂不是有种不识好人心的感觉,总归会有啥问题吧(大概),虽然我目前做的项目都比较菜,开全域允许 cors 也没遇到啥问题,虽说我也没遇到什么非得开 cors 不可的情况。。。。

    再者还有一个问题是正常生产环境,假如说你确定我要开 cors 了,安全不安全暂且不提,你总得手调个白名单,这个也增加维护的麻烦度吧

    另外前端好上手的问题。。我感觉你照这个配置方法,用 webpack 部署前端和直接部署前端解耦度没有任何区别。。你要是真的分开写是不是叫别人接手的时候他还得配置一大堆 nginx,不是配置起来更麻烦了。。。
    LeeReamond
        24
    LeeReamond  
       2020-03-03 15:04:24 +08:00
    @wnanbei

    我跟 LZ 讨论的意思是,你在服务不是直接暴露 node 而是 nginx 反代的情况下,不能实现 nginx 反代 Django 到 node 的同源,node 必须开 cors。我的疑问是我感觉这并不能增大解耦。
    litp
        25
    litp  
    OP
       2020-03-03 23:15:22 +08:00
    @LeeReamond 哦我懂你的意思了,我这样说你可能就懂了些。
    1.先看开发的解耦问题
    方案 1 是 可以前后端分开开发,但是最终要做集成测试,和集成之后的功能测试。
    如果是方案 2,单独做各自的功能测试即可。

    2.再来看部署的问题
    方案 1 是一套代码走一套服务,不管是 uwsgi 也好还是其他中间件,就走一个,就可以跑整个服务
    方案 2 是两个服务起步

    从我的目前的理解来讲,方案 2 在人员开发、测试分配上更友好。
    todd7zhang
        26
    todd7zhang  
       2020-03-04 13:56:41 +08:00   ❤️ 1
    @LeeReamond vue 那边线上跑的时候,根本是不用跑 node 的啊, 直接 nginx 访问到 vue 的 index.html 就完事了, 之后 /api 请求,由 nginx 反代到 wsgi 的端口就行了. 这样也不存在跨域的问题
    server {
    location /api/v1 {proxy http://127.0.0.1:8080/api/v1}
    location / {index vue/dist/index.html}
    }
    忙写,可能有错. 这样怎么会有跨域问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5447 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 06:01 · PVG 14:01 · LAX 22:01 · JFK 01:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.